The HTML bdo tag gives you the flexibility to set the custom direction of text on your webpage. It basically defines the direction of texts as well as overrides the direction defined.
The browsers follow a Unicode bidirectional approach to lock the text direction based on the language used on the webpage. Here, we will learn how to use <bdo> tags in HTML and their primary use cases.
The HTML bdo Tag: Overview
The HTML bdo tag stands for Bi-directional Override, used to override the default text direction in content. The texts on the webpage displayed in bidirectional languages like Hebrew or Arabic can be handled using the <bdo> tag.
- The <bdo> tag overrides the current text direction on a webpage.
- The HTML <bdo> tag is used to explicitly define the direction using the dir attribute.
- The bdo tag in HTML can be defined using the <bdo> element. It starts with the <bdo> tag and ends with the </bdo> tag.
- The “dir” tag is the only attribute in the HTML bdo tag that is used to define the text direction on a webpage.
- The “dlr” tag has three possible values i,e. ltr, rtl, and auto.
- The <bdo> tag ensures that text displays in the correct format when there are different languages on a webpage.
The HTML bdo Tag Full Form
The full form of the HTML bdo tag stands for Bi-directional Overrides. It is used to force text in a particular direction i,e. Either from left to right or right to left.
Suppose I need to reverse the display direction of a particular text or phrase. I can do it anytime I want using the <bdo> tag in HTML, which can override the default direction of any webpage elements.
For example, let us take the example of “Hello World” and reverse its direction using the HTML bdo tag.
| <p><bdo dir=”rtl”>Hello World!</bdo></p> |
This text “Hello World!” that is by default following left to right direction is made right-to-left using the <bdo> tag and the dir attribute. Let us check the output.
Read More: HTML address tag: Syntax, Components, Attributes, And Examples [2025]
The HTML <bdo> Tag Syntax
Check the syntax of the HTML bdo tag in the table below.
| <bdo dir= “” > Texts or phrases displayed in ltr or rtl format </bdo> |
- The <bdo> tag begins the bidirectional override element in the HTML document.
- The dir attribute defines the direction of the text, either starting from left to right or right to left.
- The </bdo> closing tag defines the end of the HTML bdo tag.
Attributes of the HTML bdo Tag
The bdo tag in HTML supports both global and event attributes. It also has a specific attribute “dir” used to short direction. The dir attributes values used in the HTML tag are given below.
| Attribute | Value |
| dir | ltr, rtl, and auto |
- ltr (left to right): The left-to-right is used to render text inside the <bdo> tag from left to right.
- rtl (right to left): The right to left value renders the text enclosed from right to left.
The HTML bdo tag also supports the global and event attributes. Check some of the main global and event attributes to be used with the <bdo> tag in HTML.
| Attribute Name |
Description |
|
Global Attributes |
|
| id | The id attribute represents a unique ID for the element. Useful for CSS or JavaScript targeting. |
| class | It is used when we need to assign one or more class names for applying CSS styles. |
| style | The style element applies inline CSS styling directly within the element. |
| title | It provides additional information displayed as a tooltip when the mouse hovers over the element. |
| lang | The lang attribute defines the language of the text used on the webpage. |
| hidden | This attribute hides the web element from view without deleting it from the document. |
| tabindex | The tabindex element specifies the tab order when navigating through elements using the keyboard. |
|
Event Attributes |
|
| onclick | The onclick attribute is used to execute the JavaScript code whenever an element is clicked. |
| onmouseover | It is used to run a script when the mouse pointer moves over the element. |
| onmouseout | It runs a script when the mouse pointer leaves the element. |
| ondblclick | The ondblclick executes a script when the element is double-clicked. |
| onkeydown | The onkeydown runs the JavaScript when a key is pressed down. |
| onkeyup | It executes the JavaScript when a key is released. |
How to Use the bdo Tag In the HTML?
The <bdo> tag in HTML is used for overriding the direction of text in HTML. We have to enclose the text we want to override within the <bdo> and </bdo> tags.
The “dir” attribute is used to specify the direction of the text. You will see that by default, the texts on a webpage are arranged from left to right. You can change this default arrangement to “right to left”. The text will be changed from right to left.
Examples of the HTML <bdo> Tag
Let us see the <bdo> tag of HTML to understand it in more detail. In the example below, you can see the Arabic language i,e. By default, the arrangement from right to left can be set using the HTML <bdo> tag.
| <!DOCTYPE html>
<html lang=”en”> <head> <meta charset=”UTF-8″> <title>BDO Tag with Arabic Word</title> </head> <body> <h2>Example of <bdo> Tag with Arabic Text</h2> <p>Normal Arabic text:</p> <p lang=”ar”>مرحبا بالعالم</p> <p>Arabic text forced to left-to-right using <bdo>:</p> <p><bdo dir=”ltr” lang=”ar”>مرحبا بالعالم</bdo></p> <p>Arabic text in correct direction (right-to-left):</p> <p><bdo dir=”rtl” lang=”ar”>مرحبا بالعالم</bdo></p> </body> </html> |
Output
 |
CSS Styling With the bdo Tag
You can apply custom styling with the <bdo> tags in HTML. Check some of the styling below.
| CSS Property | Purpose |
| font-size | It changes the size of the text. |
| font-family | It defines the font style used (e.g., Verdana, Arial). |
| font-weight | It makes the text bold or light. |
| color | It is used to set the text color. |
| background-color | It sets the background color behind the text. |
| text-decoration | This attribute is used for decorations like underline, overline, etc. |
| text-transform | This attribute sets the text to uppercase, lowercase, or capitalized. |
| padding | It adds space inside the element. |
| border-radius | This attribute is used to set the corners of the background. |
| display | Controls layout; inline-block allows padding and margin to work properly. |
| :hover | Adds interactivity when the user moves the cursor over the element. |
Example of HTML bdo tag with CSS Styling
Check some of the custom styling possible with the HTML <bdo> tag, given below.
- Adding color, size, and direction of fonts
Let us take our “Hello World” and style it using the custom CSS styling. Also, check the results below.
| <bdo dir=”rtl” style=”color:blue; font-size:20px;”>Hello World</bdo> |
Result
 |
- We can also add bold and Yellow highlight effects using the custom CSS styling.
| <bdo dir=”rtl” style=”font-weight:bold; background-color:yellow; text-transform:uppercase;”>welcome</bdo> |
Result
 |
Become a Master In Web Development With PW Skills
If you are interested in pursuing a career in web development and upskilling, PW Skills offers a complete all-in-one Full Stack Web Development Course, where you can learn all aspects of web development with interactive tutorials, hands-on learning sessions, projects, and more.
You will get to master in-demand tools and frameworks with the industry led live sessions and recorded tutorials covered by dedicated mentors. You will get doubt support sessions, real-world projects, assignments, quizzes, and assessments. Get career support and build a strong portfolio to explore wide range of opportunities in web development.
HTML Bdo Tag FAQs
Q1. What is the HTML bdo tag?
Ans: The HTML bdo tag is used to override the default direction of the text on a webpage.
Q2. What is the full form of BDO tag?
Ans: The HTML bdo tag stands for the Bi-directional Override element. It can be used to change the default text direction from left to right to right to left or vice versa.
Q3. What is the use of bdo tag in HTML?
Ans: The tags in HTML are used to override the default text direction in the webpage content i,e. It can make text go from left to right or right to left. It is mainly used for right-to-left languages like Arabic, Hebrew, and more. It can also be used to reverse the text directions.
Q4. What is the need for the dir attribute in the bdo tag?
Ans: The dir attribute in the bdo tag is used to change the direction of text. It either changes the direction from left to right or right to left, completely depending on your custom needs on a webpage. It can have three values i,e. ltr, rtl and auto.
