HTML bdi Tag

HTML bdi Tag is used for a piece of text that maybe formatted in opposite direction by directing the browser to isolate it from other part of text.

Table of Contents

Syntax of HTML bdi Tag

The Syntax of HTML bdi Tag is shown below. It has both opening and closing tags.


<!DOCTYPE html>
<html>
<head>
</head>
<body>
<bdi>علي</bdi>
</body>
</html>

Example of HTML bdi Tag

Simple example of HTML bdi tag is given below.


<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ul>
 <li><bdi >علي</bdi> - 1000</li>
 <li><bdi >John</bdi> - 800</li>
</ul>
</body>
</html>

In the above example as you can see, the bdi tag is used for both words starting from different direction. The word bdi stands for Bi-Directional Isolation.

Browser Support for HTML bdi Tag

HTML bdi Tag is supported by all major browsers except Safari.

Global Attributes Support in HTML bdi Tag

The HTML bdi Tag supports Global Attributes.

Event Attributes Support in HTML bdi Tag

The HTML bdi Tag supports Event Attributes.

HTML bdi Tag Video

Watch our video on HTML bdi Tag and subscribe our Youtube Channel.