BDI Tag in HTML | Difference between BDI and BDO Tag | HTML

BDI (<bdi>) Tag


BDI stands for Bi-Directional Isolation. This element is used to perform bidirectional text isolation i.e. text which may be formatted to execute in the opposite direction like left-to-right context or right-to-left context.


This tag is applicable for bidirectional languages such as Arabic and used inline with left-to-right languages.

Difference between <bdi> and <bdo>:

<bdi> element is a new tag found in HTML5. Working of both <bdi> and older <bdo> tag is identical with only one difference i.e. <bdi> tag isolates the content from its surrounding content whereas <bdo> tag reverse the direction only.

Sometimes <bdo> tag may cause some unexpected rendering errors. This is the main reason why <bdi> is used.

Browsers Support:

Google ChromeFirefoxSafariInternet Explorer


<!DOCTYPE html>
<title> HTML Bdi Tag </title>
<h2>HTML Bdi Tag</h2>
The bdi text written in Arabic language see difference between them<bdi> </bdi>
<p> User &#1573; &#1610; &#1575; &#1606; : 200 posts <br>
<b> This normal plan text. </b> </p>
<p> User <bdi> &#1573; &#1610; &#1575; &#1606; </bdi>: 200 posts <br>
<b> We used bdi tag in this section for Arabic language </b> </p>


Best WordPress Hosting


Discount Coupons

Get a .COM for just $6.98

Secure Domain for a Mini Price

Leave a Reply

    Waiting for your comments