webdevlinux - logo Web Dev Linux

HTML Headings

There are 6 different type of headings & We use HTML headings to represent a Headline of an article.

HTML Headings HTML headings elements

Try the example given below.

FILE : headings.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML Headings</title>
</head>
<body>
<h1>Heading 01</h1>
<h2>Heading 02</h2>
<h3>Heading 03</h3>
<h4>Heading 04</h4>
<h5>Heading 05</h5>
<h6>Heading 06</h6>
</body>
</html>

The h1 element represents the main Heading and only one h1 element is permitted to a single article. Any number of sub-headings are permitted.

With the output, you will see there are 6 different default font sizes for each heading. We can change font sizes and other default styles with the CSS. In another lesson, We will see how to use CSS with HTML.

Best practices when using HTML headings

Headlines should be used in the right order. To use a low-level headline in an article, there should be exist all related high-level headline type.

This is an example of non-semantic nesting of headings. You can not have gaps between heading types. In other words, you can not use heading h4 after h1 without h2 & h3

Example for a bad usage of HTML headings.

<h1>Vehicles</h1>

<h4>Cars</h4>
<p>some contents</p>

This is an example for a properly nested HTML headings.

<h1>Vehicles</h1> <!-- main heading -->

<h2>Cars</h2> <!-- sub heading -->
<p>some contents</p>

<h3>Hybrid Cars</h3> <!-- sub heading of sub heading -->
<p>some contents</p>