fbpx
April 2, 2020
html phrase tags

Tutorial #6 | Understanding the HTML Phrase Tags and The Usage

Hello today we will be discussing about HTML phrase tags. These tags are similar to other tags we have been discussing about earlier but they provide additional properties to the text.

READ PREVIOUS TUTORIAL: Tutorial #5 | Understanding the HTML Formatting and The Usage

What are HTML Phrase Tags?

HTML phrase tags are tags used to format text phrase. They are for:

  • Bold text
  • Adding quotation to text
  • Identifying special terms in a sentence
  • Marking text
  • Emphasizing Text

Some of the HTML Phrase tags we will be talking about are the basics which you are expected to know today and they are listed below:

  • Emphasized Text Tag
  • Marked Text Tag
  • Strong Text Tag
  • Quoting Text
  • Text Citation Tag
  • Code Tag
  • Address Text Tag

The Emphasized Text Tag <em> & </em>

This tag is used to emphasize on a particular section of a text. If you intend laying emphasis on a particular word or phrase in a sentence when creating a web document you can make use of the emphasize tag as shown In the illustration below

Emphasizing on “good and clean” in the sentence “This Is a good and clean looking boy”

<!DOCTYPE html>
<html lang="en">
<head>
    
</head>
<body  >
         <p> This is a <em>good and clean</em> looking boy  </p> 
    
</body>
</html>

RESULT ON WEB BROWSER

emphasize html phrase tag

Marked Text Tag <mark> & </mark>

This tag is used to mark a section of an HTML web text document. What this tag does is to highlight such section in yellow. The marked section is expected to be placed in the middle of the tags as shown below

<!DOCTYPE html>
<html lang="en">
<head>
    
</head>
<body  >
         <p> This is a <mark>good and clean</mark> looking boy  </p> 
    
</body>
</html>
marking html phrase tag

Strong Text Tag <strong> & </strong>

This tag is used to bold a text section of a web document. Example shown below.

<!DOCTYPE html>
<html lang="en">
<head>
    
</head>
<body  >
         <p> This is a <strong>good and clean</strong> looking boy  </p> 
    
</body>
</html>

RESULT ON WEB BROWSER

bold html phrase tag

Short Quoting Text Tag <q> & </q>

The quoting tag is used to add the traditional short double quote (“”)to an HTML document. Example shown below

<!DOCTYPE html>
<html lang="en">
<head>
    
</head>
<body  >
         <p> This is a <q>good and clean</q> looking boy  </p> 
    
</body>
</html>

RESULT ON WEB VIEW

short quote html phrase tag

Text citation tag <cite> & </cite>

The text citation tag is used to cite a section of text in a sentence. With the text citation tag, the font structure of the cited text automatically differs from others when views on a web browser.

<!DOCTYPE html>
<html lang="en">
<head>
    
</head>
<body  >
         <p> This is a <cite>good and clean</cite> looking boy  </p> 
    
</body>
</html>

RESULT ON WEB BROWSER

citetation tag html

Code tag <code> & </code>

The code tag is used to add codes to inform the web browser that a section of the html document is a special code and should be viewed in a code structure

<!DOCTYPE html>
<html lang="en">
<head>
    
</head>
<body  >
         <p> This is a <code>good and clean</code> looking boy  </p> 
    
</body>
</html>

RESULT ON WEB BROWSER

Address tag <address> & </address>

The address tag is used to add address to web document. The address are naturally structured in a different pattern compared to a normal web sentence.

<!DOCTYPE html>
<html lang="en">
<head>
    
</head>
<body  >
         <address>
                 7 festac lane washington dc 
                 maryland USA 




         </address>
    
</body>
</html>

RESULT ON WEB BROWSER

Conclusion

Now you understand the basics of HTML Phrase Tags and you are really doing great. Lets move on to the next tutorial on  HTML META TAGS

Leave a Reply

Your email address will not be published. Required fields are marked *