---
title: "HTML Headings Done Right: How to Organize Content with h1 to h6"
description: Learn how to properly structure HTML headings from <h1> to <h6> to improve readability, accessibility, and SEO.
image: https://blog.rheinwerk-computing.com/hubfs/HTML%20Headings%20Done%20Right_%20How%20to%20Organize%20Content%20with%20_h1_%20to%20_h6_.png
---

[![Rheinwerk Computing Logo](https://blog.rheinwerk-computing.com/hubfs/computing_logo-header.svg)](https://blog.rheinwerk-computing.com/) [Blog](https://blog.rheinwerk-computing.com)

- Books 
    - Get an overview of our wide selection of books on every relevant computing topic. 
          - [General Computing](https://www.sap-press.com/rheinwerk-computing/general-computing/)
          - [DevOps](https://www.sap-press.com/rheinwerk-computing/devops/)
          - [Programming Languages](https://www.sap-press.com/rheinwerk-computing/programming-languages/)
          - [Security](https://www.sap-press.com/rheinwerk-computing/security/)
          - [Software Development](https://www.sap-press.com/rheinwerk-computing/software-development/)
- Book Subscription 
    - Get unlimited access to all Rheinwerk Computing books! 
          - [Programming Subscription](https://sap-press.com/subscriptions/)

[HTML & CSS](https://blog.rheinwerk-computing.com/tag/html-css)

# HTML Headings Done Right: How to Organize Content with h1 to h6

![Rheinwerk Computing](https://blog.rheinwerk-computing.com/hubfs/RW-logo-300x300.png)  by [Rheinwerk Computing](https://blog.rheinwerk-computing.com/author/rheinwerk-computing)

Properly structured HTML headings not only improve readability but also enhance accessibility and SEO—learn how to use <h1> to <h6> correctly in this post.

 

The [HTML](https://learning.rheinwerk-computing.com/html-and-css)element for headings of a certain order is <h1> to <h6>. The number (1 to 6) represents the heading level. Thus, everything you write between <h1> and </h1> is used as a top-level heading, everything between <h2> and </h2> belongs to a second-level heading, and so on down to the lowest level with <h6> and </h6> as a sixth-level heading.

 

The HTML elements <h1> through <h6> should not be misused to emphasize a text, but rather to define the content structure of a document. Consider the following HTML structure:

 

...

   <h1>Heading 1</h1>

   <h2>Heading 1.1</h2>

   <h3>Heading 1.1.1</h3>

   <h2>Heading 1.2</h2>

   <h2>Heading 1.3</h2>

   <h3>Heading 1.3.1</h3>

   <h1>Heading 2</h1>

...

 

Based on this sequence of headings, the following content structure (or *document outline*)will be mapped:

 

`1. Heading 1`

`   1.1. Heading 1.1`

`        1.1.1. Heading 1.1.1`

`   1.2. Heading 1.2`

`   1.3. Heading 1.3`

`        1.3.1. Heading 1.3.1`

`2. Heading 2`

![This Is What the Web Browser Will Make of It](https://blog.rheinwerk-computing.com/hs-fs/hubfs/image-png-Feb-12-2025-02-11-02-3386-PM.png?width=501&height=624&name=image-png-Feb-12-2025-02-11-02-3386-PM.png)

## What Happens to the Headings in the Section Elements?

If you use the <section>, <article>, <aside>, or <nav> section elements, the content structure of the headings will also be affected. Within each new section element, the heading level count starts from the beginning, but always at a lower hierarchy level. The following HTML code illustrates this:

 

`...`

`   <body>`

`   <h1>My Blog</h1>`

`   <p>A simple blog ...</p>`

`   <section>`

`      <h1>News on HTML</h1>`

`      <article>`

`         <h1>A preview of the new HTML elements</h1>`

`         <p>It looks like ...</p>`

`      </article>`

`   </section>`

`   <section>`

`      <h1>News on CSS</h1>`

`      <article>`

`         <h1>New Styles at Last</h1>`

`         <p>After a long time of development ...</p>`

`      </article>`

`   </section>`

`   </body>`

`...`

Here, five <h1> headings of the first order were used. If you look at the HTML code, you can see several sections. Next to the top section with <body>, you can find two additional <section> elements, each of which contains an <article> element in which headings of the first order have also been defined.

 

This is a blog that’s been divided into two content sections with <section> containing the topics HTML and CSS. Within these sections, you can find the news articles included within <article>.

![All Headings with <h1> Are Adjusted and Output Corresponds to the Section due to the Section Elements of HTML That Are Based on the Outline Algorithm](https://blog.rheinwerk-computing.com/hs-fs/hubfs/image-png-Feb-12-2025-02-11-28-2811-PM.png?width=666&height=641&name=image-png-Feb-12-2025-02-11-28-2811-PM.png)

 

Due to the use of the new HTML elements <article> and <section>, the following content structure (or document outline) results:

1. `My Blog`
2. `News on HTML`
3. `A preview of the new HTML elements`
4. `News on CSS`
5. `New Styles at Last `

## Document Outline for Advanced Users

The term *outline* or *document outline* refers to the structure of the document, which can be generated and represented by the headings, among other things—as in the case of the table of contents of this book, for example. The document outline can be quite useful. For example, the web browser might offer you a table of contents, letting you jump from one heading to another. Search engines can also use such a table of contents to create better page previews or even improve search results. Screen reader users probably have the biggest advantage here because they can be guided through deeply nested hierarchies and sections.

 

In the following figure, you can see the JavaScript HTML5 outliner (h5o) to test the document outline during execution. Here, the document outline is displayed in the upper-right corner, and you can jump to the individual headings via hypertext links.

 

![JavaScript h5o from Google during Execution](https://blog.rheinwerk-computing.com/hs-fs/hubfs/image-png-Feb-12-2025-02-11-50-9490-PM.png?width=1129&height=646&name=image-png-Feb-12-2025-02-11-50-9490-PM.png)

 

Section elements such as <section>, <article>, <aside>, and <nav> allow you to refine the document outline even more.

 

Even if not all web browsers support document outlines directly, it won’t do any harm to pay attention to a proper outline of the HTML document because basically that’s no extra work. Screen reader users will thank you for it, and search engine robots may reward you for it because a good document outline can improve a page index, which in turn could mean a higher ranking in search results. Besides, a neatly structured web page is easier to read than an unstructured one.

## Keeping Track of the Document Outline

When the website becomes more extensive and the document contains many headings and perhaps different sections, it often isn’t easy to keep track of whether the document outline still makes sense and is neatly structured with regard to its contents. Outlining tools that output the headline structure of the web page in the existing structure can assist you here. For example, Google offers the [JavaScript](https://learning.rheinwerk-computing.com/javascript)h5o, mentioned in the previous section, at [*https://h5o.github.io*](https://h5o.github.io). Alternatively, you can find an online service at [*http://gsnedders.html5.org/outliner/*](http://gsnedders.html5.org/outliner/). Meanwhile, the validation checker at *[https://validator.w3.org/nu/#textarea](https://validator.w3.org/nu/#textarea)* also provides an outline option for HTML documents.

 

Editor’s note: This post has been adapted from a section of the book [*HTML and CSS:* *The Comprehensive Guide*](https://www.amazon.com/HTML-CSS-Comprehensive-J%C3%BCrgen-Wolf/dp/1493224220/) by [Jürgen Wolf](https://www.linkedin.com/in/j%C3%BCrgen-wolf-689bb114b/). Jürgen is a web and software developer and the author of several seminal works about programming and photography. Find out more about him on [www.pronix.de](https://www.pronix.de/). 

 

This post was originally published 2/2025.

## Recommendation

[![HTML and CSS](https://blog.rheinwerk-computing.com/hs-fs/hubfs/social-suggested-images/2422-Mar-10-2024-05-38-42-3601-PM-2.jpg?width=170&name=2422-Mar-10-2024-05-38-42-3601-PM-2.jpg)](https://www.amazon.com/stores/page/F4ED3E86-FFFF-43AC-9971-F4AD0B8D7CC7)

**Create Modern-Looking Websites with HTML and CSS!**

From structuring pages with HTML5 to crafting polished layouts with CSS3, this all-in-one guide walks you through everything you need to build modern websites — including responsive design, forms, tables, and multimedia. You'll also get a practical introduction to JavaScript fundamentals, making it a solid foundation for anyone getting started in web development.

[Learn More](https://www.amazon.com/stores/page/F4ED3E86-FFFF-43AC-9971-F4AD0B8D7CC7)

![Rheinwerk Computing](https://blog.rheinwerk-computing.com/hubfs/RW-logo-300x300.png)

**by [Rheinwerk Computing](https://blog.rheinwerk-computing.com/author/rheinwerk-computing)**

Rheinwerk Computing is an imprint of Rheinwerk Publishing and publishes books by leading experts in the fields of programming, administration, security, analytics, and more.

[HTML & CSS](https://blog.rheinwerk-computing.com/tag/html-css) [Web Development](https://blog.rheinwerk-computing.com/tag/web-development)

[![Share on facebook](https://7528309.fs1.hubspotusercontent-na1.net/hub/7528309/hubfs/raw_assets/public/mV0_d-web-default-modules_hubspot/img/facebook-color.png?width=24&name=facebook-color.png)](https://www.facebook.com/share.php?u=https%3A%2F%2Fblog.rheinwerk-computing.com%2Fhtml-headings-done-right-how-to-organize-content-with-h1-to-h6%3Futm_medium%3Dsocial%26utm_source%3Dfacebook) [![Share on linkedin](https://7528302.fs1.hubspotusercontent-na1.net/hub/7528302/hubfs/raw_assets/public/mV0_d-web-default-modules_hubspot/img/linkedin-color.png?width=24&name=linkedin-color.png)](https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fblog.rheinwerk-computing.com%2Fhtml-headings-done-right-how-to-organize-content-with-h1-to-h6%3Futm_medium%3Dsocial%26utm_source%3Dlinkedin) [![Share on twitter](https://7528304.fs1.hubspotusercontent-na1.net/hub/7528304/hubfs/raw_assets/public/mV0_d-web-default-modules_hubspot/img/twitter-color.png?width=24&name=twitter-color.png)](https://twitter.com/intent/tweet?original_referer=https%3A%2F%2Fblog.rheinwerk-computing.com%2Fhtml-headings-done-right-how-to-organize-content-with-h1-to-h6%3Futm_medium%3Dsocial%26utm_source%3Dtwitter&url=https%3A%2F%2Fblog.rheinwerk-computing.com%2Fhtml-headings-done-right-how-to-organize-content-with-h1-to-h6%3Futm_medium%3Dsocial%26utm_source%3Dtwitter&source=tweetbutton&text=) [![Share on email](https://7528311.fs1.hubspotusercontent-na1.net/hub/7528311/hubfs/raw_assets/public/mV0_d-web-default-modules_hubspot/img/email-color.png?width=24&name=email-color.png)](mailto:?subject=Check+out+https%3A%2F%2Fblog.rheinwerk-computing.com%2Fhtml-headings-done-right-how-to-organize-content-with-h1-to-h6%3Futm_medium%3Dsocial%26utm_source%3Demail&body=Check+out+https%3A%2F%2Fblog.rheinwerk-computing.com%2Fhtml-headings-done-right-how-to-organize-content-with-h1-to-h6%3Futm_medium%3Dsocial%26utm_source%3Demail)

### Comments

### Latest Blog Posts

[![Understanding HTML Character Encoding: Why UTF-8 Matters](https://blog.rheinwerk-computing.com/hs-fs/hubfs/Understanding%20HTML%20Character%20Encoding_%20Why%20UTF-8%20Matters.jpg?height=600&name=Understanding%20HTML%20Character%20Encoding_%20Why%20UTF-8%20Matters.jpg)](https://blog.rheinwerk-computing.com/understanding-html-character-encoding-why-utf-8-matters)

[HTML & CSS](https://blog.rheinwerk-computing.com/tag/html-css)

## [Understanding HTML Character Encoding: Why UTF-8 Matters](https://blog.rheinwerk-computing.com/understanding-html-character-encoding-why-utf-8-matters)

[Read More](https://blog.rheinwerk-computing.com/understanding-html-character-encoding-why-utf-8-matters)

[![The Basic Principle of Using CSS](https://blog.rheinwerk-computing.com/hs-fs/hubfs/The%20Basic%20Principle%20of%20Using%20CSS.png?height=600&name=The%20Basic%20Principle%20of%20Using%20CSS.png)](https://blog.rheinwerk-computing.com/the-basic-principle-of-using-css)

[HTML & CSS](https://blog.rheinwerk-computing.com/tag/html-css)

## [The Basic Principle of Using CSS](https://blog.rheinwerk-computing.com/the-basic-principle-of-using-css)

[Read More](https://blog.rheinwerk-computing.com/the-basic-principle-of-using-css)

**Subscribe to our blog!**Get notified about future blog updates.

- <https://www.linkedin.com/showcase/rheinwerk-computing/>
- <https://www.youtube.com/channel/UChj-U-uWGM7qRlHXSFU93ew>
- <https://blog.rheinwerk-computing.com/rss.xml>

### The official Rheinwerk Computing Blog

Rheinwerk Computing is an imprint of Rheinwerk Publishing and publishes resources that will help you accelerate your computing journey. The Rheinwerk Computing Blog is designed to provide helpful, actionable information on a variety of topics, including programming, administration, security, and analytics!

### Blog Topics

- [All Topics](https://blog.rheinwerk-computing.com)
- [Programming Languages](https://blog.rheinwerk-computing.com/tag/programming-languages)
- [How To](https://blog.rheinwerk-computing.com/tag/how-to)
- [JavaScript](https://blog.rheinwerk-computing.com/tag/javascript)
- [DevOps](https://blog.rheinwerk-computing.com/tag/devops)
- [Web Development](https://blog.rheinwerk-computing.com/tag/web-development)
- [Python](https://blog.rheinwerk-computing.com/tag/python)
- [What Is?](https://blog.rheinwerk-computing.com/tag/what-is)
- [Cybersecurity](https://blog.rheinwerk-computing.com/tag/cybersecurity)
- [Software Development](https://blog.rheinwerk-computing.com/tag/software-development)
- [Java](https://blog.rheinwerk-computing.com/tag/java)

### Blog curated by

[![Rheinwerk Computing Logo](https://blog.rheinwerk-computing.com/hubfs/computing_logo-header.svg)](https://www.sap-press.com/rheinwerk-computing/) [Visit Rheinwerk Computing Store](https://www.sap-press.com/rheinwerk-computing/)

### About

- [Home](https://sap-press.com/)
- [About Us](https://sap-press.com/the-publisher/)
- [Contact](mailto:info@rheinwerk-publishing.com)
- [Legal Notes](https://sap-press.com/legal-notes/)
- [Privacy Policy](https://sap-press.com/privacy/)
- [Terms of Use](https://sap-press.com/terms/)

© 2026 Rheinwerk Publishing, Inc. | Change Privacy Options

```json
{
  "@context" : "https://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "Rheinwerk Computing",
    "url" : "https://blog.rheinwerk-computing.com/author/rheinwerk-computing"
  },
  "dateModified" : "2026-03-05T16:37:52.988Z",
  "datePublished" : "2025-02-21T14:00:00.000Z",
  "headline" : "HTML Headings Done Right: How to Organize Content with h1 to h6",
  "image" : [ "https://blog.rheinwerk-computing.com/hubfs/HTML%20Headings%20Done%20Right_%20How%20to%20Organize%20Content%20with%20_h1_%20to%20_h6_.png" ],
  "mainEntityOfPage" : {
    "@id" : "https://blog.rheinwerk-computing.com/html-headings-done-right-how-to-organize-content-with-h1-to-h6",
    "@type" : "WebPage"
  },
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "url" : "https://blog.rheinwerk-computing.com/hubfs/Logo-1.jpg"
    },
    "name" : "Rheinwerk Publishing, Inc."
  }
}
```