Metadata tags for linking and tags for phrasing elements in HTML 5

Metadata Tags for linking in HTML 5

 
1. <link>:- <link> tag is used to indicate a link to a document that is external. It can be put in the <head> section of HTML document.
        
Syntax:
 
<link rel="stylesheet" href="css file" />

Code:   
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.     <head>  
  4.         <link rel="stylesheet" href="styles.css" />  
  5.     </head>  
  6.     <body>  
  7.         <h1>I am formatted with a linked   
  8.          style sheet  
  9.         </h1>  
  10.         <p>Me too! </p>  
  11.     </body>  
  12. </html>  
Output:
 
link.gif
 

Tags for phrasing elements in HTML 5   

 
2. <abbr>:- This tag is used for providing an abbreviation in HTML 5.

Syntax:
 
Abbreviation"> Short Form </abbr>       
 
Code:                   
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.     <body>  
  4.         <abbr title ="Hypertext Markup  
  5.            Language"></abbr> HTML 5.  
  6.             
  7.     </body>  
  8. </html>            
Output
 
abbr.gif
 
3. <cite>: This tag is used for phrasing elements in HTML 5. It indicates some titles in our document.   
Syntax:
 
<cite> some title </cite>
            
Code:                   
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.     <body>  
  4.         <p> I m phrasing tag. </p>  
  5.         <cite> HTML: I m cite tag</cite>  
  6.     </body>  
  7. </html>             
Output:
 
cite.gif
 
4. <code>:- This tag is used for giving some format to text which we will write in this tag.
       
Syntax:
 
<code>

Code:                       
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.     <body>  
  4.         <p> I m phrasing tag. </p>  
  5.         <code>I m code tag. </code>  
  6.     </body>  
  7. </html>           
Output:
 
code.gif
 
5. <dfn>:- In this tag, we give some word that is related to the definition. After this tag,  we can also write the actual definition.      
 
Syntax:
 
<dfn> Any line related to actual
definition. </dfn> Actual definition.
 
Code:         
  1. <!DOCTYPE HTML             
  2. <html>  
  3.     <body>  
  4.         <p> I m phrasing tag. </p>  
  5.         <dfn>Term:</dfn> I m dfn tag             
  6.     </body>  
  7. </html>  
Output:
 
dfn.gif
 
6. <em>:- If we want to give focus on some elements in our document, we will use this tag. 

Syntax:
 
<em> Element we want to give focus 
</em> 
 
Code:                 
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.     <body>  
  4.            I m   
  5.         <em> em </em> tag            
  6.     </html>  
Output:  
 
em.gif
 
7. <figcaption>:- We use this tag to provide some title to a figure in our document if we have used it.            
 
Syntax:
 
<figcaption> some title for figure. 
<figcaption> 
 
Code:
                    
  1. <!DOCTYPE HTML />  
  2. <html>  
  3.     <body>  
  4.            I m figure.          
  5.         <br />  
  6.         <figure>  
  7.             <figcaption> I m Bluehills  
  8.             figure  
  9.                 <figcaption>  
  10.                     <img src="Blue hills.jpg"  
  11.             width="302",height="226" />  
  12.                 </figure>  
  13.             </body>  
  14.         </html>     
Output:
 
figcaption.gif
 
8. <kbd>:-It gives format to the text which will be entered by the user and user entered text will come inside this tag.

Syntax:
 
<kbd> A text entered by user </kbd>
           
Code:               
  1. <!DOCTYPE HTML />  
  2. <html>  
  3.     <body>  
  4.         <p> I m kbd tag</p>  
  5.         <kbd> I m formatting </kbd> tag  
  6.             
  7.     </body>  
  8. </html>       
Output:
 
kbd.gif
Next Recommended Reading Importance of Form Tag in HTML Page