Enroll Course

100% Online Study
Web & Video Lectures
Earn Diploma Certificate
Access to Job Openings
Access to CV Builder



Online Certification Courses

HTML - Phrase Tags

HTML Phrase Tags Tutorial. 

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:

Corporate Training for Business Growth and School