HTML <bdi> Tag Definition, Usage and Examples

The <bdi> HTML Tag instructs the browser’s bidirectional algorithm to treat the text contained within it independently of the surrounding text. It’s especially useful when a website dynamically inserts text and is unaware of the text’s directionality. The <bdi> HTML Tag is used to indicate that the text was generated by the user and contains unknown directions. The <bdi> HTML Tag is part of the Formatting HTML category in HTML Element Reference. The attributes of the <bdi> HTML Tag are global attributes and event attributes. 

<bdi> code block example to learn how it works is given below. 

<bdi>Text</bdi>

The second example usage of the “<bdi>” code block example is below. 

<p>Most Downloaded Smartphone Apps</p>
<ol>
<li>User <bdi>Facebook Messenger</bdi>: 51 Million downloads</li>
<li>User <bdi>Facebook</bdi>: 47 Million downloads</li>
<li>User <bdi>Youtube</bdi>: 47 Million downloads</li>
</ol>

What is <bdi> HTML Tag?

The <bdi> HTML Tag denotes a section of text that may be formatted differently than the surrounding text.  It is necessary for web developers because <bdi> HTML Tag is used when embedding user-generated content whose text direction is unknown. Bi-Directional Isolation is abbreviated as BDI.

How to Use <bdi> HTML Tag?

To use <p> HTML Tag, the web developer should insert text with an unknown directionality in between the <bdi> and </bdi> HTML Tags. The <bdi> HTML Tag wraps a section of text and instructs the bidirectional algorithm to treat it independently of its surroundings. This is accomplished in two ways which are the directionality of text contained within <bdi> HTML Tag has no effect on the directionality of adjacent text and the directionality of text embedded in <bdi> HTML Tag is unaffected by the surrounding text’s directionality.

Example Usage of <bdi> HTML Tag?

The following example of usage of <bdi> HTML Tag is given below.

<p>Most Used Phone 2021</p>
<ol>
<li>User <bdi>Samsung</bdi>: 28%</li>
<li>User <bdi>Apple</bdi>: 27%</li>
<li>User <bdi>Xiaomi</bdi>: 12%</li>
</ol>

What are the Attributes of <bdi> HTML Tag?

There are multiple attributes for the <bdi> HTML Tag. The following attributes are listed below.

  • Global Attributes: The <link> HTML Tag supports global attributes. All HTML elements, even those not specified in the standard, can have global attributes. This means that any non-standard elements must nevertheless allow certain characteristics, even if using such elements makes the content non-HTML5 compliant.
  • Event Attributes: The <link> HTML Tag supports event attributes. The Event Attributes always have a name that begins with “on” and is followed by the name of the event for which it is intended. They specify a script to run when an event of the defined type is dispatched to the element with the specified attributes.

What are the Default CSS Settings for <bdi> HTML Tag?

The following are the Default CSS Settings for the <bdi> HTML Tag.

html {
    Font-family: "Times New Roman", serif;
}

bdi {
}

.name {
    color: red;
}

What are the Related other HTML Tags to <bdi>?

The other related HTML Tags to <bdi> HTML Tag are listed below.

  • <cite> HTML Tag: The <cite> HTML Tag is related to <bdi> HTML Tag because they are both in formatting HTML Tags. The <cite> HTML Tag is used to specify the work’s title.
  • <code> HTML Tag: The <code> HTML Tag is related to <bdi> HTML Tag because they are both in formatting HTML Tags. The <code> HTML Tag is used to define the document’s code.
  • <del> HTML Tag: The <del> HTML Tag is related to <bdi> HTML Tag because they are both in formatting HTML Tags. The <del> HTML Tag specifies the text that has been deleted from the document.
  • <dfn> HTML Tag: The <dfn> HTML Tag is related to <bdi> HTML Tag because they are both in formatting HTML Tags. The <dfn> HTML Tag is used to define a term’s defining instance.

Holistic SEO
Follow SEO

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.