HTML Headings

Most documents have headings in one form or another. In longer pieces of text, headings can also help structure a document. HTML offers six levels of headings, which use the elements - <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. Browsers display the <h1> element as the largest of the six and <h6> as the smallest.

Most browsers display the contents of the <h1>, <h2>, and <h3> elements larger than the default size of text in the document. The content of the <h4> element would be the same size as the default text, and the content of the <h5> and <h6> elements would be smaller.

Thus, <h1> defines the most important heading. <h6> defines the least important heading. Browsers automatically add some empty space (margin) before and after each heading.

Example:

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

1. Headings for SEO

Search engines use headings to index the structure and content of the web pages.

2. Headings for Users

Users skim or scan pages by its headings. It is important to use headings to show the document structure. The h1 headings should be main headings, followed by h2 headings, then the less important h3, and so on.