HTML <bdi> Tag:
The Bidirectional Isolate Element is represented by the HTML <bdi> tag. To instruct the browser to isolate the specified text from its surrounding content, especially when it is required to embed the user-generated content with an unknown directionality, this tag is used. It was introduced in HTML 5. For languages like Arabic or Hebrew, it is equally useful. In simple words, the directionality of the surrounding content does not influence the directionality of the content inside the <bdi> tag.
<!DOCTYPE html> <html> <body> <h4>Students' Marks List:</h4> <ul> <li><bdi>Tom</bdi> : 80</li> <li><bdi>Joy</bdi> : 90</li> <li><bdi>إيان</bdi> : 85</li> </ul> </body> </html>
In the above example, the names of students are displayed along with their marks out of 100 in an exam. Since, it was required to embed the user-generated content with an unknown directionality, we have used the HTML <bdi> tag. In case, the browser does not support the HTML <bdi> tag, than the name of the Arabic student would confuse the text.
Difference between the HTML <bdi> and <bdo> tags:
Both the tags of HTML are very similar to each other. The HTML <bdi> tag is used to isolate the specified content from its surrounding content. The <bdo> tag, however, reverses the direction, which may cause some unexpected rendering errors. And this is the main difference between the HTML <bdi> tag and the HTML <bdo> tag.
There is no specific attribute for the HTML <bdi> tag.
All the HTML Global Attributes are supported by the HTML <bdi> tag.
All the HTML Event Attributes are supported by the HTML <bdi> tag.
Chrome, Firefox, Opera and Safari.
The Internet Explorer does not support the HTML <bdi> tag.