HTML Phrase Tags

HTML Phrase is the special purpose tags which defines the structural meaning of a block or semantics of text. Following are the tags which are commonly used:-

1. Abbreviation text

This tag is used to abbreviate the text. Anything we placed within <abbr> tag, will display as abbreviated. 

Input:

<body>
	
	<p>

	  <abbr title = "Hypertext Markup language">
		HTML
 
	  </abbr>
          language is used to create web pages.
        </p>
   
</body>

Output:


2. Strong text

This tag is used to display the important text of the page. Anything we placed within <strong> tag, will make it bold.

Input:

<body>
	<p>
           HTML is
 
		   <strong>building block</strong>
 
           of the webpage.
        </p>
 
   
</body>

Output:


3. Emphasized text

This tag is used to emphasize a text. Anything we placed within <em> tag, it will display as italic.

Input:

<body>
        <p>

	  HTML is an
 
		  <em>easy</em>
          to learn language
        </p>
</body>

Output:


4. Definition text

This attribute helps to add definition to any of the terms. Anything we placed within <dfn> tag, will display it as a definition.

Input:

<body>
        <p>

	  <dfn>HTML</dfn>
	  is a markup language used to make webpages.
        </p>
</body>

Output:


5. Quoting text

This attribute shows that enclosed content is quoted from another source. That source URL can be put within the cite attribute. Anything we placed within <blockquote> tag, will come as a quote.

Input:

<body>
	
	<p>
Here is a quote:</p>

          <blockquote>

            Point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters

         </blockquote>

         <cite>-Mark Frost</cite>    
</body>

Output:


6. Short quotation

This attribute helps to write short quotations. Anything we placed within <q> tag, will come as a quotation with double-quotes.

Input:

<body>
	
	<p>
Mark Frost said:

          <q>

            Point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters

         </q>

       

</p>
   
</body>

Output:


7. Code tag

This attribute is used to display the part of any computer code. Anything we placed within <code> tag, will come as code with a monospaced font.

Input:

<body>
	
	<p>
First Javascript program <br/>
           <code>
            document.getElementById("test").style.color = "#000"
         </code>
	</p>
   
</body>

Output:


8. Address tag

This attribute helps to define contact information. Anything we placed within <address> tag, will come as address in italic font.

Input:

<body>
	<p>Contact Detail</p>
	<address>

          You can contact us on
 
          <a href="#">test@somain.com</a><br/>
          You can also visit at

          58, Gargal Road
        </address>
</body>

Output:


9. Keyboard tag

This attribute helps to display the section of content that is a user input from a keyboard. Anything we placed within <kbd> tag, will come as keyboard input.

Input:

<body>
	
	<p>
Please press
 <kbd>Ctrl</kbd> + 
<kbd>Shift</kbd> + t
 to restore page on chrome.
</p>
   
</body>

Output: