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
![]()
![header.gif]()
- <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:
<hgroup>
Code:
<!DOCTYPE HTML>
<HTML>
<body>
<hgroup>
<h1> I m also hgroup tag </h1>
<h2> I m also heading tag </h2>
</hgroup>
</body>
</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:
<!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:
![hn.gif]()
2) Footer Tags
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:
![div.gif]()
![]()
<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:
![hr.gif]()
- <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: ![p.gif]()