The HTML5 bdi Tag

The HTML5 <bdi> tag is a new addition to the tags that can be used with HTML5. BDI stands for Bi Directional Isolation. The HTML5 <bdi> tag is an important one because it isolates a part of the text that might be formatted or oriented in a different direction from the other text surrounding it. It is also one of the new formatting tags under HTML5. The HTML5 <bdi> tag is useful when embedding user-generated content with an unknown directionality.

The HTML5 <bdi> tag is commonly used when including language written with right-to-left scripts in a document. Some examples of these languages are Arabic, Persian, Hebrew, Urdu, and others. This is what leads to mixing in words or phrases in English or some other language that uses a left-to-right script. The result is called bidirectional or bidi text.

Since the HTML5 <bdi> tag is fairly new, it is not yet supported by the major browsers such as Firefox, Safari, Internet Explorer, Opera, and Google Chrome. The HTML5 <bdi> tag has no functional counterpart in the HTML4.01 since this is new to the HTML5 environment.

The HTML5 <bdi> tag is also capable of supporting the Global Attributes and Event Attributes in HTML5.

Here is an example of the HTML5 <bdi> tag:

User <bdi>إيان</bdi>: 120 clicks

Featured pages


Learn about HTML5 architecture, design principles and patterns on HTML5 Overview Tutorial. Become …


Learn about HTML5 tags and discover a new list of HTML5 tags. Find out about HTML5 tags support by…


 Learn HTML5 development techniques, tips and tricks on our website. Find out what is required…

Date Time Picker

HTML5 forms use date and time controls regularly. HTML5 date and time controls are used by booking …