Featured

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

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

 

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

 

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

 

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 h5o, mentioned in the previous section, at https://h5o.github.io. Alternatively, you can find an online service at http://gsnedders.html5.org/outliner/. Meanwhile, the validation checker at 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 by Jürgen Wolf. 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.

Recommendation

HTML and CSS
HTML and CSS

Web developers—this is your all-in-one guide to HTML and CSS! Learn to use HTML to format text and structure web pages. Understand the HTML document skeleton before creating forms, referencing hyperlinks, embedding active content, and more. Then style your pages with CSS: Create consistent designs with selectors, the box model, the cascade algorithm, and inheritance. Round out your client-side development experience by getting to know JavaScript. With detailed code examples, you’ll master HTML and CSS in no time!

Learn More
Rheinwerk Computing
by 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.

Comments