You're familiar with the different types of HTML quotation tags that make it possible to quote text from another source. So now it's time to learn about some tags that enable you to render text on web pages in other ways. In this topic, you'll see how to display acronyms/abbreviations using the <abbr> tag and define an address with the <address> tag. You'll also find out how to reverse the direction of text with the <bdo> tag.
The <abbr> tag
The <abbr> tag can be used to define the meaning of acronyms/abbreviations, like "CSS," "Mr.," "Dr.," and "HTML." It also provides additional information about abbreviations to browsers and search engines, which can aid search engine optimization (SEO).
You can utilize the global title attribute to display the full form of an abbreviation (or a description) when you hover over the element.
The syntax of the <abbr> tag is shown below:
<abbr title="Full form of the abbreviation">abbr</abbr>The following example demonstrates how you can add abbreviations to your HTML code:
<body>
<abbr title="You aren't gonna need it">YAGNI</abbr>
<hr />
<abbr title="Keep it simple, stupid">KISS</abbr>
<hr />
<abbr title="Don't repeat yourself">DRY</abbr>
<hr /> <!-- hr is used to create the horizontal lines -->
</body>The output of the above snippet is shown below. When hovering over these acronyms, the user will see the text that's specified in the title attribute:
The <address> tag
The <address> tag is used to provide the contact information of the author/owner of a document or article. The contact details can be information such as a phone number, email, or postal address. Browsers generally render the address text in italics, and line breaks are always placed before and after the <address> element. If the <address> tag is inserted into the <body> section, it represents the contact information associated with the document. But if it's located within an <article> tag, it represents the contact information for that particular article.
You can see the syntax of the <address> tag in this code snippet:
<address>This line is part of the address content,
along with this line,
and this one, too.</address>The following example shows how you can add an address to your HTML code:
<body>
<address>
Kavčí Hory Office Park, <br />
Na Hřebenech II 1718/10 <br />
Praha 4 - Nusle - 140 00, <br />
Czech Republic
</address>
</body>And you can see what the output looks like below:
The <bdo> tag
The <bdo> tag allows you to reverse the order of the characters in a piece of HTML text. Or, to put it another way, you can use this tag to override the current text direction. BDO stands for bi-directional override and the syntax of the <bdo> tag is as follows:
<bdo dir="rtl">Text</bdo> <!-- dir can be either ltr or rtl -->As you can see above, the <bdo> tag has a dir attribute — this is used to specify the direction of the text by supplying one of two possible direction values:
"ltr"— the content of the<bdo>tag is displayed in the left-to-right direction."rtl"— the tag's content is displayed in the right-to-left direction.
Take a look at this example:
<body>
<bdo dir="ltr">JetBrains Academy</bdo>
<bdo dir="rtl">JetBrains Academy</bdo>
</body>The output of the above snippet is shown below:
Conclusion
In this topic, you learned how to use three semantic HTML elements in your code. You discovered that the <abbr> tag enables you to add an acronym/abbreviation to a webpage. And that you can include the contact details of an HTML document's author/owner with the <address> tag. You also found out that it's possible to change the direction of HTML text using the <bdo> tag. Don't forget that you need to pass a direction value to the <bdo> tag's dir attribute — "ltr" (left-to-right) or "rtl" (right-to-left).