Headings are an important feature of a document. They provide a structure to the content to optimize readability. In an HTML document as well the headings play exactly the same role but there are a few other advantages of using them as discussed below.
Advantages of using headings
- Provides a sensible structure to the document
- Search engines primarily rely on headings to index the structure of the content
- Help users skim through the content and know what the content is about without getting into the details.
If you observe this document, you'll see the content is systematically organized with headings thus making it easier to navigate through the different topics of the content.
The Heading Tags
Headings in an HTML document are defined using tags. There are six levels of headings and thus six set of heading tags <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. We can use these tags to define headings in an HTML document. These headings vary in font size, the <h1> being the biggest and <h6> being the smallest.
The HTML code below better explains how to use the heading tags.
<!DOCTYPE html>
<html>
<head>
<title>HTML Headings</title>
</head>
<body>
<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>
</body>
</html>
Please note that search engines, screen readers use heading tags for indexing the content stucture. So you should use these tags for defining document "headings" only. Avoid using these tags just to enlarge a block of text.
Please note that the heading tags must be used in a proper hierarchy i.e. the <h1> tag must be the topmost, followed by the <h2> tag and so on. This helps screen readers and is also important from SEO perspective. That's all about headings.
Notification
A second ago