HTML Headings

HTML headings are titles or subtitles that you want to display on a webpage.

Example

<h1>Heading One</h1>
<h2>Heading Two</h2>
<h3>Heading Three</h3>
<h4>Heading Four</h4>
<h5>Heading Five</h5>
<h6>Heading Six</h6>

Try this code ❯

The <h1> to <h6> HTML elements represent six levels of headings. <h1> is the highest level and <h6> is the lowest.

Element	display	font-weight	font-size	margin-top	margin-bottom
<h1>	block	bold	2em	0.67em	0.67em
<h2>	block	bold	1.5em	0.83em	0.83em
<h3>	block	bold	1.17em	1em	1em
<h4>	block	bold	1em	1.33em	1.33em
<h5>	block	bold	.83em	1.67em	1.67em
<h6>	block	bold	.67em	2.33em	2.33em

Notes:

Bad Practice

<h1>Heading level 1</h1>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>

Good Practice

<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>

You can use different sizes for your headings. HTML also has six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>, <h5>, <h6>.

While displaying any heading, browser adds one line before and one line after that heading.

Styling Headings

You can use CSS for styling.

Example

<h1 style="color: tomato">Heading One</h1>
<h2 style="background: tomato">Heading Two</h2>
<h3 style="font-family:monaco">Heading Three</h3>

Try this code ❯

A complete list of all HTML tags, see HTML Tag Reference.

Headings Example

HTML headings are defined with the <h1> to <h6> tags.

<!DOCTYPE html>
<html>
<body>

<h1>Heading 1 (Main Title)</h1>
<h2>Heading 2 (Section Title)</h2>
<h3>Heading 3 (Subsection Title)</h3>
<h4>Heading 4 (Minor Subtitle)</h4>
<h5>Heading 5 (Small Heading)</h5>
<h6>Heading 6 (Smallest Heading)</h6>

</body>
</html>

Why Headings are Important

Search Engines: Search engines use headings to index the structure and content of your web pages.
User Experience: Users skim pages by reading headings. It is important to use headings to show the document structure.
Accessibility: Screen readers use heading hierarchy to help visually impaired users navigate content.