HTML - Phrase Tags
HTML Phrase Tags
HTML Phrase Tags are provided for very specific purposes, even though they are all displayed in quite an identical way as most of the other basic HTML tags such as <b>, <i>, <pre>, and <tt>, as we have discussed in the other previous chapter. This particular chapter will help make you understand all the important HTML phrase tags, so let's start discussing them one at a time.
Types of HTML Phrase Tags
1. Emphasized Text
2. Marked Text
3. Strong Text
4. Text Abbreviation
5. Acronym Element
6. Text Direction
7. Special Terms
8. Quoting Text
9. Text Quotation
10. Text Citation
11. Computer Code
12. Programming Variables
13. Program Output
14. Address Text
We are going to be discussing just a few of these phrase tags but they are the important ones that we use in our everyday HTML documents.
Emphasized Text
Any text that appears in between the <em> </em> tags, will be displayed as an emphasized text.
Example:
<!DOCTYPE html> <html> <head> <title>Emphasized Text Example</title> </head> <body> <p>The following word uses an <em>emphasized</em> typeface.</p> </body> </html>
The above code will be displayed as:
Marked Text
Any text that appears in between the <mark> </mark> tags, will be displayed as a marked text with yellow ink. An example is shown below:
Example
<!DOCTYPE html> <html> <head> <title>Marked Text Example</title> </head> <body> <p>The following word has been <mark>marked</mark> with yellow</p> </body> </html>
The above code will be displayed as:
Strong Text
Any text that appears in between the <em> </em> tags, will be displayed as a thick and important text. An example is shown below:
Example
<!DOCTYPE html> <html> <head> <title>Strong Text Example</title> </head> <body> <p>The following word uses a <strong>strong</strong> typeface.</p> </body>
The above code will be displayed as:
Text Abbreviation
You can abbreviate a text just by placing it in between an opening <abbr> and a closing </abbr> tag. when present, the title attribute must be placed inside the tag containing just a full description and nothing else. An example is shown below:
Example
<!DOCTYPE html> <html> <head> <title>Text Abbreviation</title> </head> <body> <p>My best friend's name is <abbr title = "Abhishek">Abhy</abbr>.</p> </body> </html>
The above code will be displayed as:
Acronym Element
The <acronym> element tag lets you to display that the content in between the <acronym> and </acronym> HTML tags is actually an acronym.
Although currently, most browsers do not change how the content of the <acronym> element looks.
Example
<!DOCTYPE html> <html> <head> <title>Acronym Example</title> </head> <body> <p>This chapter covers marking up text in <acronym>XHTML</acronym>.</p> </body> </html>
The above code is displayed as:
Text Direction
The <bdo>...</bdo> element is full for Bi-Directional Override and it mainly is used to manually override the direction of the current text. An example is shown below:
Example
<!DOCTYPE html> <html> <head> <title>Text Direction Example</title> </head> <body> <p>This text will go left to right.</p> <p><bdo dir = "rtl">This text will go right to left.</bdo></p> </body> </html>
The above code will be displayed as:
Jobs Vacancy
The Jobs portal provides you with real time Jobs Opening and Vacancy Updates curated globally. Start applying for your dream job with ease in any location you choose.
Learn More >>
CV Builder
The CV Builder provides you with comprehensive guide and proven steps to take in writing a professional CV including top CV templates to get you started quickly.
Learn More >>
