HTML <bdi> Tag

 

Wednesday, August 13, 2014

❰bdi❱ isolates text to be rendered in a specific direction. ❰bdi❱ description, syntax, usage, attributes and examples. HTML-5.com is a great guide for web developers. TV Series & Actors and Actresses. Follow TV Series and HTML 5 on Google+.

ATTENTION: THIS PAGE IS Valid HTML 5 AND IS BEST VIEWED WITH HTML 5 - Please upgrade your browser or download one of the HTML 5 compatible browsers such as Mozilla Firefox, Chrome, Opera or IE 9 (March 14, 2011 or later). For more information see HTML 5 browsers.

If you find this helpful, please click the Google +1 Button to the left, if it is white, to make it turn blue or red. Thank you! (It also helps find this page again more easily.)

PDF mobile

The <bdi> Tag in HTML 5

The HTML <bdi> tag (bi-directional isolation) isolates a span of text that might be formatted in a different direction from other text outside the bdi element. It is one of the formatting tags in HTML 5.

back to top

<bdi> Tag Syntax

<body>
   ...
   ... phrasing content expected ...<bdi>... phrasing content ...</bdi>...
   ...
</body>
Rules for coding the HTML bdi element

Make sure you understand the difference between a tag and element and the difference between an attribute and property and are familiar with the definitions of namespace and other HTML terms.

  1. Code the bdi element where phrasing content is expected.
  2. Begin the bdi element with a starting <bdi> tag. The element name uses lower case letters and should be in the HTML namespace, which it will pick up automatically from the xmlns attribute on the <html> tag.
  3. Inside the starting <bdi> tag code the dir attribute to specify the directionality of the text inside the bdi element or omit the attribute to have the directionality property based on the contents of the element. Include any HTML global attributes on the <bdi> tag as appropriate.
  4. Inside the bdi element, between the starting <bdi> tag and the ending </bdi> tag, code the inner HTML phrasing content.
  5. End the bdi element with a matching </bdi> closing tag.
Content Model
Content of the bdi element

The content of the bdi element can include HTML comments, text content and only those HTML tags that can be used in phrasing content.

back to top

<bdi> Tag Attributes

Attributes of the <bdi> tag
global attributes In addition to the personal attributes of the <bdi> tag below, any of the common HTML attributes can also be coded.
dir="auto" default
dir="ltr"
dir="rtl"		 directionality

Unlike most elements, the dir attribute is not inherited from the parent element but defaults to auto instead.

back to top

<bdi> Tag Examples

Examples of the bdi tag in HTML 5

back to top

Changes in HTML 5 - <bdi> Tag

What's new in HTML 5

The <bdi> tag is one of the new elements in HTML 5.

Differences between HTML 5 and earlier versions of HTML

The <bdi> tag did not exist in older versions of HTML.

The 2000-2010 Recommendations from the W3C HTML Working Group defined the HTML namespace for the names of all HTML element types, which now includes the bdi element name. In older (pre-2000) versions of HTML, element type names were not associated with a namespace.

back to top

Valid HTML 5