HTML Headings: How to Use h1-h6 for SEO & Structure

In the last chapter, we built the house. Now, it's time to add rooms. The most fundamental way to structure any document is by using headings. In HTML, we have six levels, from <h1> (the most important) to <h6> (the least important).

Analogy: Headings are your document's outline. Think of <h1> as the title of your book, <h2>s as your chapter titles, and <h3>s as the sub-sections within those chapters.

The Code

<h1>The Main Title of the Page</h1>
<h2>Section 1: The First Major Point</h2>
    <h3>Subsection A: A detail about the first point</h3>
    <h3>Subsection B: Another detail</h3>
<h2>Section 2: The Second Major Point</h2>
<p>A paragraph belonging to Section 2.</p>

Why Headings are Crucial

  • For SEO: Google uses your headings to create a map of your content. A clear outline helps it understand what your page is about, which is critical for ranking well in search results.

  • For Accessibility: Visually impaired users rely on screen readers that let them navigate a page by its headings. A logical structure is essential for them to use your site effectively.

The Golden Rules of Headings

  1. Use Only One <h1> Per Page. It's your main title.

  2. Never Skip Levels. Don't jump from an <h2> to an <h4>. Always follow the hierarchy.

Best Practice Tip: Before you even write your paragraphs, outline your entire post using only heading tags. This forces you to create a logical structure from the start.

What's Next: Now that you can create a clear structure, let's learn how to add the actual text content using paragraphs and other formatting tags.

Posted in 02 - Core Content & Text Formatting and tagged , , .

Leave a Reply