Bidirectional Isolate And Override (<bdi>, <bdo>)

When To Use

• When some part of the page content possibly has different directionality (LTR = left-to-right, RTL = right-to-left) than the rest of the page. ¹

Rules

• Most of the time the browser can figure the correct directionality out on its own, but not always, see example. ¹
• Its better to use the <dbi> element than to use the CSS rule "unicode-bidi: isolate", since it the HTML is more semantic this way and because browsers can ignore CSS styling. ¹
• The newer <bdi> and older <bdo> elements perform similar functions, but the former isolates the directionality inside the element from the surrounding content, while the latter does not. This is demonstrated in the example.
• You can choose <bdi> over <bdo> to make sure, that the directionality is always isolated as expected.

Examples

Non-automatically distinguishable text directionality: ¹

<bdi class="name">الرجل القوي إيان</bdi>: 4th place // Without the <bdi> element, ": 4" would also be interpreted right-to-left, since those characters are treated as neutral.
<bdo class="name" dir="rtl">الرجل القوي إيان</bdo>: 4th place // Since the right-to-left directionality is not isolated, this the ": 4" part will still be rendered right-to-left.

Sources 

1. MDN: <bdi>: The Bidirectional Isolate element by Mozilla contributors is licensed under CC-BY-SA 2.5
2. MDN: <bdo>: The Bidirectional Text Override element by Mozilla contributors is licensed under CC-BY-SA 2.5