HTML Headings
Structure your content with six levels of headings.
Syntax
<h1>Main title</h1> ... <h6>Smallest</h6>HTML provides six levels of headings, from <h1> (the most important) to <h6> (the least important).
Using headings well
- Use one
<h1>per page for the main title. - Use headings in order to show structure.
- Do not skip levels just for a bigger or smaller look.
Headings help both readers and search engines understand your page.
Example
Loading editor…
Press Run to see the result.
When to use it
- An SEO specialist ensures each page has exactly one <h1> matching the page title to signal the main topic to search engines.
- A developer uses <h2> for major sections and <h3> for subsections so screen readers can navigate by heading level.
- A content editor marks up a tutorial with <h2> chapter titles and <h3> step titles to create a scannable document outline.
More examples
Six heading levels in order
Heading levels h1-h6 create a document outline; each level denotes a nested sub-topic.
<h1>HTML Tutorial</h1>
<h2>Getting Started</h2>
<h3>Installing an Editor</h3>
<h4>VS Code Setup</h4>
<h5>Installing Extensions</h5>
<h6>Recommended Plugins</h6>Single h1 with section h2 headings
One h1 defines the page subject; h2 headings divide it into logical sections for readers and crawlers.
<h1>Web Development Course</h1>
<section>
<h2>Module 1: HTML Basics</h2>
<p>Learn the structure of web pages.</p>
</section>
<section>
<h2>Module 2: CSS Styling</h2>
<p>Style your HTML with CSS.</p>
</section>Heading hierarchy in a blog post
A proper heading hierarchy gives the article a logical outline that assistive technologies can navigate.
<article>
<h1>How to Build a Portfolio Site</h1>
<h2>Planning Your Content</h2>
<h3>Choosing Your Projects</h3>
<h2>Building the Layout</h2>
<h3>HTML Structure</h3>
<h3>CSS Grid Setup</h3>
</article>
Discussion