The importance of HTML Headings
Headings, just like in normal paper pages, are used to structure the content of a web page. They help users understand the hierarchy and organization of the content, making it easier to read and navigate.
The headings here, however, are not just for humans. They are very important for search engines and assistive technologies, such as screen readers, which help people with visual impairments access the content of the page.
Long story short, if the headings are correct, a page will appear higher in search results, and it will be easier to read for people with disabilities.
How to use headings in HTML
Headings are used just like any other HTML element, using tags. There are six levels of headings in HTML, from <h1> to <h6>. The <h1> tag is used for the main heading of the page, while the other headings are used for subheadings.
The <h1> tag should be used only once per page, as it represents the main topic of the page. The other headings can be used multiple times, but they should follow a logical hierarchy. For example, <h2> should be used for subheadings of <h1>, <h3> for subheadings of <h2>, and so on.
In a normal paper document, you have only one big title, right? And the index of the document has adequate hierarchy, with the main title, then the chapters, and then the sections of the chapters. The same applies to web pages.
Example of headings in HTML
<!doctype html>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>Welcome to my first HTML page!</h1>
<h2>Introduction</h2>
<p>This is a simple page that contains some text and images.</p>
<h2>Content</h2>
<h3>Subheading 1</h3>
<p>This is a paragraph of text under subheading 1.</p>
<h3>Subheading 2</h3>
<p>This is a paragraph of text under subheading 2.</p>
<h2>Conclusion</h2>
<p>This is the conclusion of the page.</p>
</body>
</html>The example above shows how to use headings in HTML. The <h1> tag is used for the main heading of the page, while the <h2> and <h3> tags are used for subheadings. The content of the page is structured using these headings, making it easier to read and understand.
<h1> tags could also not be the first element in the <body> section, it is allowed. You can have more elements before it, such as images, paragraphs, or other elements so long as they are not headings.
At some point in your developer career, you might hear about the word “SEO”, which stands for Search Engine Optimization, which is a technique used to improve the visibility of a web page in search results. Using headings correctly is one of the important aspects of SEO, as it helps search engines understand the structure and content of the page. In this case, here I could disclose that the h1 and the meta title should be different and that you should not have duplicated meta titles and/or h1 tags across all of your pages, but that is a topic for another post.
Questions
About the author
Vasil Kostadinov
Software developer, specializing in React, Next.js and Astro for the frontend, as well as in Supabase and Strapi for the backend. Creates content in all shapes & sizes in his free time.