HTML Headings.

Headings are the backbone of your document's outline. They communicate the importance and hierarchy of your content to both users and search engines.

The Essentials

<h1> is the most important; <h6> is the least important.

Search engines use headings to index the structure and content of your web pages.

Users often skim a page by its headings; use them to tell a story.

Headings should be used for main topics, not just to make text BIG or BOLD.

The <h1> through <h6> tags are block-level elements, meaning they start on a new line.

Screen readers use heading levels to build a 'Table of Contents' for visually impaired users.

Professional Insights

The Golden Rule of H1

✔ Use: → Exactly one <h1> per page. It should match the main topic of the document. ❌ Avoid: → Using multiple <h1> tags, which confuses search engines and weakens your SEO. 💡 Tip: → Think of the <h1> as the title of a book; there's only one, and it defines the entire work.

Maintaining Heading Hierarchy

✔ Use: → Headings in descending order (H1 -> H2 -> H3). Jump back up levels only for new sections. ❌ Avoid: → Skipping levels (e.g., going from H2 straight to H4) just because you like the font size. 💡 Tip: → If you need a smaller heading but the next logical level is too large, use CSS to style it—never break the semantic structure.

Headings for Accessibility

✔ Use: → Headings as signposts. Screen reader users can 'jump' between headings using keyboard shortcuts. ❌ Avoid: → Using <div> tags styled to look like headings. Screen readers will ignore them as navigation points. 💡 Tip: → Test your page with a 'Headings Map' extension to see if your outline makes logical sense.

Critical Pitfalls

Using headings to resize text instead of using CSS font-size.

Starting a page with an <h3> instead of an <h1>.

Keyword stuffing in headings to try and 'trick' Google (this often results in penalties).

Wrapping an entire paragraph inside a heading tag.

Interactive Lab

Sprint Tasks

Create a main title using <h1> with the text 'My Travel Blog'

Create a sub-section using <h2> with the text 'Recent Trips'

Create a specific trip title using <h3> with the text 'A Week in Tokyo'

Loading editor...

Production Preview