HTML Headings: The "Who's Important?" Hierarchy

If your webpage were a newspaper, Headings would be the giant bold text that shouts "Extra! Extra! Read All About It!" or "Local Man Forgets Closing Tag, Chaos Ensues."

Part 1

Headings: Size Matters (But Semantics Matter More)

Imagine reading a book where every single word was the exact same size. No chapters, no titles—just a wall of text. You'd lose your mind in five minutes.

Headings (<h1> through <h6>) tell the browser (and Google) what the big ideas are. Browsers treat them like an outline for your brain.

The H1: The One True King

The <h1> is the "Main Title." You should only have one per page. It’s the name of the movie, the title of the book, the "You Are Here" sign.

H2 - H3: The Supporting Cast

<h2> are your major sections. <h3> are sub-sections inside those. They keep your content from looking like a rambling grocery list.

H4 - H6: The Fine Print

These are rarely used, like the "Terms and Conditions" or that one side character in a sitcom who only has three lines. But they're there if you need deep organization.

SEO Gold

Google scans your headings to figure out what your site is about. Use keywords in headings to make the algorithm happy.

Natural Flow

Don't jump from an <h1> straight to an <h4>. It’s like skipping the first three steps of a ladder—awkward and potentially painful.

Accessibility Hero

Visually impaired users use screen readers to "jump" between headings. Good structure helps everyone navigate.

The "Big Text" Trap

DO NOT use headings just because you want text to be bold or large. That is what CSS is for. Use headings because the text IS a heading. Respect the semantics!

HTML - Heading Levels

<h1>The Ultimate Guide to Pizza</h1>

<h2>Famous Pizza Styles</h2>
    <h3>New York Thin Crust</h3>
    <h3>Chicago Deep Dish</h3>

<h2>Topping Controversies</h2>
    <h3>Does Pineapple Belong?</h3>
        <h4>Arguments for "Yes"</h4>
        <h4>Arguments for "Absolutely Not"</h4>

Part 2

Heading Etiquette: Being a Good Dev

Browsers are pretty forgiving, but other developers (and Google) are not. Follow these rules to avoid getting "The Look" at code reviews.

The One-H1 Rule

Think of <h1> as the name of your specific page. If you have five H1s, the browser thinks your page is having an identity crisis. Keep it unique!

Visuals vs. Structure

If you love the size of an <h3> but the text is actually the main title, use an <h1> and change the size with CSS. Structure is for the robots; Style is for the humans.

Heading Takeaways (TL;DR)

<h1> to <h6> define importance, not just "big-ness."
Only one H1 per page. No exceptions. No negotiations.
Follow the ladder: H1 → H2 → H3. Don't skip rungs like a maniac.
Headings help SEO and Screen Readers understand your page's vibe.
Emmet shortcut: Just type h1 and hit Tab.

Part 3

Headings & Emmet: Speed-Running Structure

Why type eight characters when you can type two? Emmet makes building document outlines faster than you can say "semantic markup."

Emmet Magic for Headings

/* Type this → Get this after pressing Tab */

h1 → <h1></h1>
h2{Section} → <h2>Section</h2>
h3*3 → Generates three <h3> tags
h1+h2+p → A Title, Subtitle, and Paragraph combo!

Curly Bracket Text

h1{Hello World}
= <h1>Hello World</h1>
Inserts the text inside the brackets instantly.

Numbered Headings

h2{Chapter $}*3
Generates Chapter 1, Chapter 2, and Chapter 3 in one go!

Sibling Shortcuts

h1+h2 puts them side-by-side.
Perfect for those "Title & Tagline" layouts.

The "Insta-Article" Combo

Try this in VS Code:
h1{Blog}+h2{Intro}+p+h2{Content}+h3*2{Detail}+p
You just built a professional blog post structure in 3 seconds.

Emmet Game: Practice Round

Open your editor and try these. If you feel like a wizard, that's normal.

h1{The Legend of Coding}
h2{Boss Level $}*5
header>h1{Site Title}+nav>ul>li*3

The power is in your fingertips. Use it wisely.

"If your H1 is 'Welcome to my site,' you've wasted your most powerful SEO tool. Make it count."

— A Developer who actually gets traffic