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.
Syntax:
<bdi>content</bdi>
Example:
<!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>
Explanation:
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, then 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.
Tag-specific attribute:
There is no specific attribute for the HTML <bdi> tag.
Global Attributes:
All the HTML Global Attributes are supported by the HTML <bdi> tag.
Event Attributes:
All the HTML Event Attributes are supported by the HTML <bdi> tag.
Supporting Browsers:
Chrome, Firefox, Opera, and Safari.
The Internet Explorer does not support the HTML <bdi> tag.