The <bdi> tag disconnects a piece of content that may be arranged in an alternate course from other content outside it.
This component is valuable when inserting client produced substance with an obscure directionality.
The BDI Element stands for Bi-Directional Isolation Element, which is one of the best feature of HTML5, especially when someone wants to display a text in the Bi-directional way around the remaining text. Whenever we write the aroma, Hebrew or Urdu fonts, it shows from the opposite side of the general fonts. So browser behavior directly change for that particular text.
The uses of the BDI is exactly has been implemented for better performance of those texts, that can't be read easily by the user. The more confusion can be cleared about the BDI Element in the example. Try our try it editor to have a better understanding.
Here is the Syntax for BDI Element
<bdi> Some Text here </bdi>
Below is complete syntax along with example
<!DOCTYPE html> <html> <head> <title>Title Name will go here</title> </head> <body> <!-- The below code is without using BDI element --> <p>شمع: 100</p> <p>Ruchika Rai: 90</p> <p>Shubash Kumar: 105</p> <!-- The below code is with using BDI element --> <p><bdi>شمع</bdi>: 100</p> <p>Ruchika Rai: 90</p> <p>Shubash Kumar: 105</p> </body> </html>