Headings

HTML Headings Summary

Headings give a page a clear structure, so readers, browsers, and search engines can understand what each section is about.

A heading is an HTML element used for a title or section label. Headings run from <h1> to <h6>, with <h1> usually used for the main page title and lower levels used for smaller sections.

Headings are one kind of block element, which means each heading starts on its own line and helps break the page into larger pieces.

<h1>How Websites Work</h1>
    <h2>HTML Structure</h2>
        <h3>Elements</h3>
        <h3>Attributes</h3>
    <h2>CSS Design</h2>
        <h3>Color</h3>
        <h3>Layout</h3>

This example shows a page title, two main sections, and smaller topics inside each section. The heading numbers describe the structure of the content, not just the size of the text.

Heading Sections

Good headings make a page easier to scan before someone reads every word. They also help screen reader users move through the page and help search engines understand how the content is organized.

Use heading levels in order. A subsection under an <h2> should usually use an <h3>, not jump straight to an <h5>. If the page needs normal body text under a heading, use a paragraph.

Heading Design

Browsers make higher-level headings larger by default, so an <h1> usually appears larger than an <h2>. CSS can change the visual size, but the HTML heading level should still match the page structure.

Heading SEO

Heading text can help with search engine optimization because it names the important topics on the page. Write headings that describe the section clearly instead of stuffing them with repeated keywords.