HTML headings are the signposts of your web page. They tell both your users and search engines what your content is about and how it is organized.
In HTML, there are exactly six levels of headings, ranging from <h1> (the most important) down to <h6> (the least important).
The Six Heading Levels
When you use a heading tag, the browser automatically applies some default styling (making the text larger and bolder). However, their true purpose is structure, not style.
| Tag | Purpose | Typical Use Case |
|---|---|---|
<h1> | The Main Title | The title of the blog post or the name of the page. |
<h2> | Major Section Heading | Breaking the main topic into large, distinct sections. |
<h3> | Subsection Heading | Dividing an <h2> section into smaller, specific topics. |
<h4> | Minor Heading | Grouping granular details under an <h3>. |
<h5> | Sub-minor Heading | Very specific categorization (rarely used). |
<h6> | Lowest Level Heading | The absolute smallest division of content (very rarely used). |
Why Headings Matter
Headings do much more than just make text big and bold. They are critical for the underlying health of your website:
- Search Engine Optimization (SEO): Search engines like Google use your headings to understand the context and main keywords of your page. An accurate heading structure helps your page rank better.
-
Accessibility: Screen readers (used by visually impaired users) rely on heading tags to navigate a page. A user can tell their screen reader to "jump to the next
<h2>" to easily skim the content. - User Experience (UX): Large blocks of text are intimidating. Headings break your content into digestible chunks, making it easier for visitors to read.
Golden Rules of Headings (Best Practices)
To write clean, professional HTML, you should follow these rules:
-
Only One
<h1>Per Page: SThink of the<h1>as the title of a book. A book only has one title. Everything else on the page should fall under it. -
Never Skip Levels: Always move down the hierarchy logically. Do not jump from an
<h1>> directly to an<h3>. If you have an<h1>, your next heading must be an<h2> -
Do Not Use Headings Just for Sizing: If you just want standard text to look big or bold, use CSS (Cascading Style Sheets) or the
<strong>tag. Reserve<h1>through<h6>strictly for creating an outline of your document.
Example: Structuring a Page
Here is how a well-structured document outline looks in code:
<h1>A Guide to the Solar System</h1>
<p>The solar system consists of the Sun and the objects that orbit it.</p>
<h2>The Inner Planets</h2>
<p>These are the rocky planets closest to the sun.</p>
<h3>Mercury</h3>
<p>The smallest planet.</p>
<h3>Venus</h3>
<p>The hottest planet.</p>
<h2>The Outer Planets</h2>
<p>These are the gas and ice giants.</p>
<h3>Jupiter</h3>
<p>The largest planet.</p>