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.
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 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.