Heading Footer and Content Grouping Tags in HTML 5

Monika Arora
13y
2.9k
0
0

Blog

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:

<!DOCTYPE HTML>
<html>
<body>
<header>
<h1> I m header </h1>
<p> I m heading tag </p>
</header>
</body>
</html>

Output

<hgroup>:- It indicates section's or document's heading. It can contain different levels of headings. First we specify main heading followed by subheadings. Main heading come 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:

          Code:

          <!DOCTYPE HTML>
        <HTML>
        <body>
        <hgroup>
        <h1> I m also hgroup tag </h1>
        <h2> I m also heading tag </h2>
        </hgroup>
        </body>
        </html>

Output:

<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:

           Code:

           <!DOCTYPE HTML>
         <html>
         <body>
         <h1> I m first heading </h1>
         <h2> I m second heading </h2>
         <h3> I m third heading </h3>
         <h4> I m fourth heading </h4>
         <h5> I m fifth heading </h5>
         <h6> I m sixth heading </h6>
         </body>
         </html>

          Output:

2) Footer Tags

<footer>:- This tag is used to indicate section's or document's footer. Its content can be date when the document was written, author's name or contact information. It can also contain 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 document.
Syntax:

<footer>

Code:

<!DOCTYPE HTML>
<html>
<body>
<p> I m footer tag </p>
<footer> I reside at bottom </footer>
</body>
</html>

Output:

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 document.

Syntax:

<div style="background-color:blue">

Code:

<!DOCTYPE HTML>
<html>
<body>
<div style="background-color:blue">
<h3> I m div tag </h3>
<p> I m content grouping tag </p>
</div>
</body>
</html>

Output:

<hr>:- This tag is used to create a horizontal line in HTML 5.

Syntax:

<hr/>

Code:

<!DOCTYPE HTML>
<html>
<body>
<h1> tags </h1>
<p> I m hr tag </p>
<hr />
<h1> I m content group tag</h1>
<p> I define horizontal line</p>
</body>
</html>

Output:

<p>:- This tag is used to indicate a paragraph. Browsers automatically takes space before and after paragraph.

           Syntax:

         <p>

           Code:

         <html>
         <body>
         <p> I m used to indicate a paragraph. </p>
         </body>
         </html>

          Output:

Heading Footer and Content Grouping Tags in HTML 5

Up Next

Importance of Form Tag in HTML Page

Ebook Download

View all

Grid structure in css

Read by 1 people

Download Now!

Learn

View all