Add some headings

01 / 05

Writing comes with headings

Books have them, newspapers have them — headings. The short line that says what the next bit is about.

HTML has tags just for headings, and together with paragraphs they give your writing its shape.

02 / 05

h1, the biggest heading

The h in <h1> is the h of heading. Use it for the title that carries the page.

It shows up bigger and bolder than a paragraph. It gets bigger without any CSS because the browser has already decided that a heading should be shown large.

<h1>Willow Store</h1><p>We sell fruit</p>

03 / 05

Six levels of heading

Heading tags run from <h1> to <h6>. The bigger the number, the smaller the heading.

<h1> … the title of the page
<h2> … the heading of a big section
<h3> … a smaller heading inside that

<h1>Willow Store</h1><h2>Fruit</h2><h3>Apples</h3>

04 / 05

Choose by meaning, not by size

Do not pick <h3> because you want something a bit smaller. The right way to choose is by where it sits in the structure of what you are saying.

Size is something you can change freely with CSS later. What the tag carries is the meaning.

<h1>The name of the shop</h1><h2>Menu</h2><p>Here are our picks</p><h2>Finding us</h2><p>Five minutes from the station</p>

05 / 05

Try putting them together

Headings and paragraphs — only two kinds of tag, and your writing already looks far better.

See if you can get a rhythm going: heading, paragraph, heading, paragraph.