HTML - <bdi> Tag

Quiz

Introduction to <bdi> Tag

The HTML <bdi> tag is used to isolate a portion of text in a document to prevent it from inheriting the surrounding text direction. It is useful in multilingual content, where mixing languages with different writing directions, such as left-to-right (LTR) and right-to-left (RTL).

HTML <bdi> tag works in two ways:

The directionality of the embedded text in <bdi> has no effect on the directionality of the surrounding text.
The directionality of embedded text in <bdi> is unaffected by the directionality of the surrounding text.

Syntax

Following is the syntax of HTML <bdi> tag −.

<bdi>...</bdi>

Attributes

HTML bdi tag supports Global and Event attributes of HTML.

Example

Let's look at the following example, where we are going to consider the basic usage of the <bdi> tag.

<!DOCTYPE html>
<html>
<body>
   <ul>
      <li>
         <bdi class="name"></bdi> - 1st place
      </li>
      <li>
         <bdi class="name">Jerry Cruncher</bdi> - 2nd place
      </li>
   </ul>
 </body>
</html>

Example : Applying with CSS

Consider the following example, where we are going to create an HTML document using the <bdi> tag and applying the CSS properties to it.

<!DOCTYPE html>
<html>
<head>
   <style>
      bdi{
         color: red;
         font-style: italic;
      }
   </style>
</head>
<body>
   <h1>The bdi element</h1>
   <ul>
      <li>User 
         <bdi>hrefs</bdi>: 60 points 
      </li>
      <li>User 
         <bdi>jdoe</bdi>: 80 points 
      </li>
      <li>User 
         <bdi></bdi>: 90 points 
      </li>
   </ul>
 </body>
</html>

Supported Browsers

Tag
bdi	Yes 16.0	Yes 79.0	Yes 10.0	Not Supported	Yes 15.0

html_tags_reference.htm

Print Page