HTML Basics
HTML Headings
Headings organise a page into a clear, scannable hierarchy from the most important title down to minor sub-points. HTML gives you six levels, from <h1> to <h6>.
What are HTML Headings?
HTML headings are titles that label the sections of your content. There are six levels: <h1> is the largest and most important, and <h6> is the smallest. Browsers render higher-level headings in larger, bolder text by default.
Headings are not just about size — they define the document's outline. Search engines and screen readers use this outline to understand and navigate your page, so the order matters more than the appearance.
Basic Usage
<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>Example: A Well-Structured Article
<!DOCTYPE html>
<html>
<body>
<h1>Learning Web Development</h1>
<h2>Front-End Skills</h2>
<h3>HTML</h3>
<p>The structure of a page.</p>
<h3>CSS</h3>
<p>The look and feel of a page.</p>
<h2>Back-End Skills</h2>
<p>Servers, databases, and APIs.</p>
</body>
</html>More Examples
<h1 style="color:#0d6efd; text-align:center;">Centred blue title</h1>
<h2 style="border-bottom:2px solid #ccc; padding-bottom:6px;">Underlined section</h2>Heading Levels and Their Roles
| Tag | Typical use |
|---|---|
| <h1> | The single main title of the page. |
| <h2> | Major section headings. |
| <h3> | Sub-sections within an <h2> section. |
| <h4>-<h6> | Deeper, less common sub-points. |
Use only one <h1> per page for the main title, and do not skip levels — go from <h2> to <h3>, not <h2> straight to <h4>. This keeps the outline logical.
Do not choose a heading level just because you want bigger or smaller text. Pick the correct level for meaning, then resize it with CSS if needed.
Key Takeaways
- There are six heading levels, <h1> to <h6>.
- <h1> is the most important; <h6> the least.
- Headings build the page outline used by SEO and screen readers.
- Use one <h1> per page and never skip levels.