HTML Β· Chapter 6 of 45
HTML Headings
HTML provides six levels of headings, <h1> through <h6>, with <h1> being the most important and largest by default, and <h6> the least.
Headings are not just for visual size β they define the document's outline, which is important for accessibility and search engines. Each page should typically have exactly one <h1>.
Syntax
<h1>Heading</h1>
<h2>Heading</h2>Heading hierarchy
Use headings in order of importance, not for making text bigger. Skipping levels (like going from <h1> to <h4>) can confuse screen readers.
SEO and accessibility
Search engines use headings to understand page structure. Screen reader users often navigate a page by jumping between headings.
Example 1 (html)
<h1>Main Title</h1>
<h2>Section</h2>
<h3>Subsection</h3>Output
Main Title
Section
SubsectionHeadings decrease in size and importance from h1 to h6.
Example 2 (html)
<h1>Blog</h1>
<h2>Post Title</h2>
<p>Content...</p>Output
Blog
Post Title
Content...A typical structure using one h1 and nested h2 for a post.
Key points
- There are six heading levels: h1 to h6.
- Use only one h1 per page as the main title.
- Headings define document structure, not just size.
- Never skip heading levels for styling reasons.
π‘ Note: Use CSS, not a smaller heading tag, if you just want smaller text visually.