o7planning

HTML Headings Tutorial with Examples

  1. Section Heading
  2. Heading Elements
  3. Size

1. Section Heading

The structure of an HTML page consists of multiple Sections which can be nested. A section can also have Section Heading that helps users know the main content this section covers.

2. Heading Elements

The HTML <h1> - <h6> elements represent six levels of section headings in which the <h1> is the highest level, and the <h6> is the lowest one.
<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>
A well-designed page has clear Heading structure which users are able to search the content they want easily. In addition, Heading is one of the evaluation criteria of the search engines like Google, therefore, it is useful for SEO.
On a page, you should have the one and only <h1> element which refers to the Heading of the entire page. The Heading structure on your page is similar to the tree structure using the <h1> at level 1, then the <h2> at level 2, then the <h3> at level 3, and so on.
You shouldn't skip a certain level, for example, you use the <h1> at level 1, then use <h3> at level 2, so you skipped the <h2>. Some screen readers for blind users apply the navigation technique based on Headings, therefore, skipping a particular level of Heading will confuse them since they do not know why the content is lost.
<!-- GOOD: -->
<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>

<!-- BAD: -->
<h1>Heading level 1</h1>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
For example:
<h1>HTML Headings Tutorial</h1>
<i>Author: o7planning, Views: 500</i>

<h2>1 - What is section heading?</h2> Section Heading is .... 
<h2>2 - Heading Elements</h2> The HTML &lt;h1&gt;–&lt;h6&gt;
elements represent six levels of section headings...

<h3>2.1 - H1 Element</h3> h1 is ....
<h3>2.2 - H2 Element</h3> h2 is ....

3. Size

Each HTMLHeading has a default size, but you can use the CSS font-size to set new size for it.
<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5 style="font-size:20px;">Heading level 5 (font-size:20px)</h5>
<h6>Heading level 6</h6>

Newest Articles

Show More