🌱BeginnerText Content
Headings
Use h1 through h6 to create a logical content hierarchy for users and search engines.
Overview
HTML provides six levels of headings: <h1> through <h6>. Headings create a hierarchical outline of your content like chapters and sub-chapters in a book which helps both users and machines (search engines, screen readers) understand the structure of your page.
<h1> is the most important heading and should describe the main topic of the page. Each subsequent level (<h2>, <h3>, etc.) represents a sub-section of the level above it. <h6> is the least prominent heading.
By default, browsers render headings in progressively smaller, bolder text. But the true purpose of headings is semantic conveying structure and hierarchy not visual size. CSS is used to control appearance separately.
Key Points
- •There are 6 heading levels: <h1> (most important) to <h6> (least important)
- •Use only one <h1> per page it describes the page's primary topic
- •Do not skip heading levels (e.g., jumping from <h2> to <h4>) it breaks document outline
- •Headings are block elements each starts on a new line
- •Use headings for structure, not to make text bigger use CSS for visual size
- •Screen readers let users jump between headings, so a good heading structure aids navigation
Examples
Heading levels h1 through h6
<h1>Main Page Title</h1>
<h2>Chapter 1</h2>
<h3>Section 1.1</h3>
<h4>Subsection 1.1.1</h4>
<h5>Detail</h5>
<h6>Fine print</h6>Browsers render each level progressively smaller and less bold.
Realistic heading structure for an article
<h1>Beginner's Guide to Cooking</h1>
<h2>Essential Equipment</h2>
<h3>Knives</h3>
<h3>Pots and Pans</h3>
<h2>Basic Techniques</h2>
<h3>Chopping</h3>
<h3>Sautéing</h3>This creates a clear outline: one h1, multiple h2 sections, h3 subtopics.
Wrong: skipping heading levels
<!-- BAD skips from h1 to h3 -->
<h1>My Blog</h1>
<h3>Latest Post</h3> <!-- should be h2 -->
<!-- GOOD sequential levels -->
<h1>My Blog</h1>
<h2>Latest Post</h2>Skipping levels confuses screen readers and degrades SEO.
Common Mistakes
- Using multiple <h1> elements on a single page weakens SEO and confuses screen reader users
- Choosing a heading level based on font size you want instead of content hierarchy
- Skipping heading levels (e.g., h1 → h3) the document outline will have gaps
Note
Think of headings like a book's table of contents. The h1 is the book title, h2 are chapters, h3 are sections within chapters. Build the outline first, then style with CSS.
Exercises
Write HTML to solve each exercise. Use Preview to see it render in a live iframe, then mark as done.
Loading editor…
Completed: 0 / 5 exercises
Knowledge Check
Question 1 of 4