What are HTML Headings

 | 

Headings in HTML help users and search engines in defining the hierarchy and the structure of content in a web page. HTML offers six levels of heading tags, right from <h1> to <h6>.

HTML Headings

Types of Headings

HTML offers six levels of heading tags, right from <h1> to <h6>.

<h1> tag defines the most important heading in the web page and similarly <h6> defines the least important heading.

Sample Code

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Output

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Importance of Headings

Headings in HTML serve various important purposes. Headings help in defining the hierarchy and structure of the content in a web page. Some of the other important uses are defined below.

Customizing the Headings

Note that each heading has a default font properties such as the font size, color, typeface, etc. These properties of headings can be customized using the CSS font properties.

Sample Code

<h1 style="font-size:18px">Heading 1 with  new size</h1>
<h2 style="color:#7574ff" >Heading 2 with a new color</h2>
<h3 style="margin-bottom:0.25rem" >Heading 3 with a new bottom margin</h3>
<h4 style="font-style:italic">Heading 4 with new a font style</h4>

Output

Heading 1 with a new size

Heading 2 with a new color

Heading 3 with a new bottom margin

Heading 4 with a new font style

In the above example, font-size, color, margin-bottom, and font-style properties of the heading 1, heading 2, heading 3, heading 4 have been changed respectively.

Foot Notes

Comments