Post
Ask Question

Heading Footer and Content Grouping Tags in HTML 5

Heading and Footer tags in HTML 5

 
Heading and Footer tags in HTML 5 are used to provide heading and footers in HTML 5 which are as follows:-
 

1) Heading Tags

 
<header>:- It indicates an introduction, or it helps in navigation. Its content can be headings, information about version, subheadings etc. It can be used to include a table of content of sections. We cannot include it in another <header>, <address> or <footer> element. Optionally, it can also include headings of section such as <h1> to <h6>.
 
Syntax:
 
               <header>
 
Code:
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.     <body>  
  4.         <header>  
  5.             <h1> I m header </h1>  
  6.             <p> I m heading tag </p>  
  7.         </header>  
  8.     </body>  
  9. </html>  
Output
header.gif     
  • <hgroup>:- It indicates section's Or the document's heading. It can contain different levels of headings. First, we specify the main heading followed by subheadings. The main heading comes under the category of level 1 heading and other subheadings come under the category of after level 1  heading. After level 1, lower level of  heading can be from <h2> to <h6>. So <hgroup> tag is used to combine <h1> to <h6> tags.
Syntax:
 
               <hgroup>
          
Code:           
  1. <!DOCTYPE HTML>  
  2. <HTML>  
  3.     <body>  
  4.         <hgroup>  
  5.             <h1> I m also hgroup tag </h1>  
  6.             <h2> I m also heading tag </h2>  
  7.         </hgroup>  
  8.     </body>  
  9. </html>  
Output:
 
         hgroup.gif     
  • <hn>:-  This tag here specify <h1> to <h6> tags. If we don't specify these tags in <hgroup> tag ,we can specify each heading individually. <h1> indicates main heading and <h6> indicate most lower level heading.
Syntax:
 
         <h1>
         <h2>
         <h3>
         <h4>
         <h5>
         <h6>
          
Code:                      
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.     <body>  
  4.         <h1> I m first heading </h1>  
  5.         <h2> I m second heading </h2>  
  6.         <h3> I m third heading </h3>  
  7.         <h4> I m fourth heading </h4>  
  8.         <h5> I m fifth heading </h5>  
  9.         <h6> I m sixth heading </h6>  
  10.     </body>  
  11. </html>  
Output:
 
        hn.gif                 
 

2) Footer Tags 

  • <footer>:- This tag is used to indicate section's or document's footer. Its content can be the date when the document was written, the author's name or contact information. It can also contain a privacy policy. Footers are normally kept at the bottom of the document. We cannot include it in <header> or <footer> tag. More than one footer can be kept in the document.
     
    Syntax:
     
               <footer>
     
    Code:
    1. <!DOCTYPE HTML>  
    2. <html>  
    3.     <body>  
    4.         <p> I m footer tag </p>  
    5.         <footer> I reside at bottom </footer>  
    6.     </body>  
    7. </html>  
     Output:
     
     footer.gif      
     

3) Content Grouping Tags

 
         They are used for grouping text in HTML 5 which are as follows:
  • <div>:-This tag is used to define a particular style for a section of the document.
     
    Syntax:
     
    <div style="background-color:blue">
     
    Code:
    1. <!DOCTYPE HTML>  
    2. <html>  
    3.     <body>  
    4.         <div style="background-color:blue">  
    5.             <h3> I m div tag </h3>  
    6.             <p> I m content grouping tag </p>  
    7.         </div>  
    8.     </body>  
    9. </html>    
    Output:
     
    div.gif      
     
    <hr>    :- This tag is used to create a horizontal line in HTML 5.
     
    Syntax:
     
    <hr/>
     
    Code:
    1. <!DOCTYPE HTML>  
    2. <html>  
    3.     <body>  
    4.         <h1> tags </h1>  
    5.         <p> I m hr tag </p>  
    6.         <hr />  
    7.         <h1> I m content group tag</h1>  
    8.         <p> I define horizontal line</p>  
    9.     </body>  
    10. </html>  
    Output:
     
    hr.gif
  •  <p>:- This tag is used to indicate a paragraph. Browsers automatically takes space before and after paragraph.
     
Syntax:
 
           <p>
 
Code:   
  1. <html>  
  2.     <body>  
  3.         <p> I m used to indicate a paragraph. </p>  
  4.     </body>  
  5. </html>  
Output:
 
             p.gif