HTML Part 2: Headings, text and lists

Most of a web page is text, and a handful of tags give it its shape.

Headings

HTML has six levels of heading, <h1> to <h6>. They work like the headings in a textbook:

<h1>Learn to cook</h1><h2>Breakfast</h2><h3>Poha</h3><h3>Upma</h3><h2>Lunch</h2>

Use one <h1> per page, for its main title. Sections get <h2>, and parts inside a section get <h3>. Don't skip levels, and don't pick a heading for its size. Size is something CSS decides.

This matters more than it looks. People using screen readers often move through a page by jumping from heading to heading, and search engines read headings to work out what a page is about.

Paragraphs and spaces

Each paragraph goes in its own <p>. The browser doesn't keep the spacing of your code, though: every run of spaces and line breaks turns into a single space.

<p>This     sentence   shows up on one line.</p>

So pressing Enter in your code doesn't start a new line on the page. For a new paragraph, use a new <p>. For a line break inside one, like in an address or a poem, use <br>:

<p>12 MG Road<br>Pune 411001</p>

Don't stack <br> tags to make gaps between things. Spacing is CSS's job too.

Bold and italic, with meaning

<p><strong>Switch off the gas</strong> before you leave.</p><p>I said the <em>blue</em> folder, not the red one.</p>

<strong> marks something important, and <em> marks stress: the word you'd lean on if you said the sentence out loud. Browsers show them as bold and italic.

There's also <b> and <i>. They make text bold or italic without calling it important, which suits things like a product name or a word from another language. When you mean "this matters", use <strong>.

Lists

Use <ul> when the order doesn't matter and <ol> when it does. Each item goes in an <li>.

<ul>  <li>Milk</li>  <li>Bread</li></ul>
<ol>  <li>Boil the water</li>  <li>Add the tea</li>  <li>Add milk and sugar</li></ol>

For a list inside a list, put the inner list inside an <li>, never straight inside the <ul>.

Comments

<!-- Remember to add the dinner section -->

Comments are notes to yourself, and the browser skips them. Anyone can still read them with View Source, though, so never leave a password in one.

A common mistake

Close tags in the reverse order you opened them, like boxes inside boxes:

• Wrong: <p><strong>Hello</p></strong>
• Right: <p><strong>Hello</strong></p>

Try it

Make a page about your favourite dish: an <h1> with its name, an <h2> for the ingredients with a <ul>, and an <h2> for the steps with an <ol>.

Next: HTML Part 3: Links and images