HTML Reference Manual

Comprehensive List of HTML Tags

HTML: <bdi> Tag

The HTML <bdi> element (Bi-directional Isolation element) isolates external text that may be formatted in different directions. It is very useful when the direction of the text is unknown, such as text from a database (which has a text direction).

Online Example

Isolate the username from the surrounding text direction settings:

Example

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Basic Tutorial(oldtoolbag.com)<//title>　
</head>
<body><ul>
　　　<li><bdi class="name">Evil Steven</bdi>:　1st　place</li>
　　　<li><bdi class="name">François fatale</bdi>:　2nd　place</li>
</ul>
</body>
</html>

Test and see ‹/›

Browser Compatibility

IEFirefoxOperaChromeSafari

Definition and Usage Description

bdi stands for bidi isolation (Bi-directional Isolation).-directional Isolation).

The <bdi> tag allows you to set a block of text so that it is separated from the text direction setting of its parent element.

is very useful when publishing user comments or other content you cannot fully control.

HTML 4.01 and HTML5differences between

<bdi> tag is HTML5 new tag.

Global attributes

Support for <bdi> tag Global attributes of HTML.

Event attributes

Support for <bdi> tag HTML event attributes.

HTML: <bdo> Tag HTML: <basefont> Tag