Headings: Giving Your Page an Outline

Two lessons in, your page has a name and an introduction: one heading, one story. This lesson gives it named sections: About, Skills, Contact. Three headings, and for the first time, a page that reads like an outline.

The concept

Here is your page as it stands. Run it:

The "where you left off" demos show the placeholder version of the page. Your own page, with your real content, is safe in the exercise below.

Now say you want to add a new part to the page, a list of your skills. The obvious move is to type another paragraph.

Run it, and look closely. The skills line is there, but it reads as one more sentence in the same flow as your introduction. Nothing tells a visitor that this is a new part of the page. It blends in.

Add one line above it, and run again:

"Skills" now sits apart: larger, bolder, with space around it. You did not add a paragraph. You added a heading: an element that marks the start of a new section and names it. The browser draws it differently on purpose, so a visitor's eye catches it while scanning.

You already met one heading, in the opening lesson: <h1>, wrapped around your name. That was your page's only heading, because a page has one main topic. <h2> is one level below it, a heading for a named part within that topic. Your page is about you. "Skills" is a section of that story, not a second, competing topic. That difference is the subject of this lesson: one main heading, several section headings beneath it.

The syntax

Headings come in six levels, <h1> through <h6>, each one step further inside the last:

<h1>The page's one topic</h1>
<h2>A major section of it</h2>
<h3>A subsection within that section</h3>

Read that as nesting, not as a size chart. <h1> is the page's single main topic, your name on your profile page. <h2> marks a major section within that topic: About, Skills, Contact. <h3> would mark a subsection inside one of those. It is useful later, if a section like Skills ever splits into "Languages" and "Tools". Your page does not need <h3> yet. It should not gain one until there is a real subsection to name. <h4>, <h5> and <h6> nest deeper still. You will rarely reach for them, because a real page rarely nests that far.

The rule this track follows, and the one nearly every style guide recommends: one <h1> per page. A page has one main topic. Every other heading nests below it as an <h2> or deeper.

Font size is the least important thing about a heading, even though it is the first thing you notice. What actually matters is the outline it builds. A screen reader is software that reads a page's text aloud, used by visitors who are blind or have low vision. It can jump from section to section by reading only the headings aloud, in order. A search engine builds its sense of your page the same way. Both read the levels, not the size. That is why a heading chosen for its size instead of its meaning causes a problem you cannot see on screen. You see it only in the outline underneath.

A minimal working example

<h1>Grandma's Fried Rice</h1>
<p>A weeknight recipe that survives substitutions.</p>
 
<h2>Ingredients</h2>
<p>Rice, eggs, whatever vegetables you have.</p>
 
<h3>Optional substitutions</h3>
<p>No eggs? Extra vegetables work fine.</p>
 
<h2>Instructions</h2>
<p>Cook the rice a day ahead if you can.</p>

Read as an outline rather than a page, this is: Grandma's Fried Rice, then Ingredients, then Instructions. That structure exists whether or not anyone sees the page rendered. It is what a screen reader hears, and what a search engine indexes. Notice that "Optional substitutions" nests under Ingredients as an <h3>. It is a smaller idea inside that one section, not a major part of the recipe on its own.

Common mistakes

A second <h1>. You reach the Contact section, want it to feel important, and wrap it in another <h1>. Nothing about this looks wrong. Both headings render exactly as big and bold as each other. That is the danger: the mistake is invisible to the eye. A screen reader or search engine now has two candidates for the page's topic. Neither one knows you meant it as a section. If a heading feels like it deserves top billing, ask whether it is the page's topic or a part of it. Contact is a part.

Skipping a level. You go straight from <h1> to <h3>, because <h2> felt too big for what you had in mind. The page still renders. Smaller text under a large heading looks fine at a glance. But the outline now has a hole in it: a subsection with no section to belong to. Choose a level by what nests inside what, not by how large you want the text.

Reaching for a heading to make text stand out. A sentence in your bio feels important, so you wrap it in <h2> to make it bold. It works, visually, and that is exactly the trap. That sentence is not a new section, but the page's outline now claims it is one. You have a real need here: making text stand out without claiming it is a section. CSS answers it properly in Act II. For now, resist the shortcut.

Try it yourself

Your page has one heading and two paragraphs. Give it three named sections:

1. Run the starting code below. This is your page exactly as the document skeleton left it.
2. Add <h2>About</h2> above your existing paragraphs, so your introduction has a name.
3. Add a <h2>Skills</h2> section, with one new paragraph listing two or three things you know or are learning.
4. Add a <h2>Contact</h2> section, with one new paragraph. Even a placeholder like "Reach me by email" is fine. A real link comes in a later lesson.
5. Run it. Your page should now read, top to bottom: your name, About, Skills, Contact. Four headings, in one hierarchy.
6. Break it on purpose: change one of your <h2> sections to <h1>. Run it. The heading gets a little bigger. That can look like a harmless style choice, not a mistake. Here is how you catch the real problem. Ignore the page and read only your headings, top to bottom. That list is your outline, the same one a screen reader announces and a search engine indexes. You now have two top-level headings, so the outline claims your page has two titles. Find the second title in your heading list, then change it back.

Your page now has a shape a stranger could follow without reading a word of the content: a name, then three distinct, named parts. The next lesson fills in what About actually says.