Overview

In this lesson you will learn about the six tags available in HTML that allow you to create different levels or sizes of headings and subheadings.

Headings

Written documents are structured in such a way that certain information is easy to identify. Titles are typically a larger font size and bolder than the normal paragraph text. The subtitle is smaller than the title, but still larger than the paragraph text. This is true of web pages as well. The way the page is structured allows a user to quickly find what they are looking for.

HTML Headings

Below are the six h tags available in HTML5 that can be used to display the different headings.

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

The following frame shows how the code above will render in a browser. The h1 tags are used for the main heading and is the largest. The h6 tags produce the smallest. Most browsers will render them with bold text.

Browsers apply a default font-size for each heading. The size of each element is generally a multiple of the font-size attributed to the parent container. In the example above, the default font-size is 16px. The h1 element is twice as large or 32px. The h2 element is one and a half times 16 or 24px. The h4 element is equal to the default font-size of 16px.

You can change these font-sizes by writing your own custom styles, but make sure to keep in mind that h1 tags are used for the most important headings and h6 tags are used for the least important headings.