Learn HTML · Lesson 2 of 8 · about 10 minutes

Headings, paragraphs and lists

A page is easier to read when its text has a shape: a title, sections, short paragraphs, lists. In this lesson you'll give your page that shape, and turn it into a home page about you.

Headings

HTML has six levels of heading, <h1> to <h6>. Use them like the headings in a report:

<h1> is the title of the page. Use one per page.
<h2> starts each main section.
<h3> starts a section inside an <h2> section, and so on. Most pages never need more than three levels.

Try it: change the code

<h1>Sam Rivera</h1>
<h2>About me</h2>
<p>I live in Toronto and I bake on weekends.</p>
<h2>Things I've made</h2>
<h3>Bread</h3>
<p>Sourdough, mostly.</p>
<h3>Cakes</h3>
<p>Birthday cakes for friends.</p>

What the browser shows

Choose a heading level for what the text is, not for how big you'd like it. If an <h2> looks too large, lesson 5 shows how to change its size with CSS. Search engines and screen readers use your headings to understand the page: a blind visitor can jump from heading to heading, the way you skim.

Paragraphs, spaces and line breaks

Each paragraph goes in its own <p>. Inside it, the browser treats any run of spaces and line breaks in your code as a single space, and wraps the text to fit the screen. So you can lay out your code however you like; it won't change the page.

Try it: change the code

<p>This     sentence has    lots of
spaces and
line breaks in the code.</p>

<p>Roses are red,<br>
violets are blue.</p>

What the browser shows

When you do want a line break inside a paragraph, as in a poem or an address, use <br>. Like <meta>, it has no closing tag. Don't use several <br> tags to make space between paragraphs: use separate paragraphs, and leave the spacing to CSS.

Lists

There are two kinds of list:

<ul>, an unordered list, shows bullets. Use it when the order doesn't matter.
<ol>, an ordered list, numbers the items for you. Use it for steps and rankings.

Either way, each item goes in an <li> (list item).

Try it: change the code

<h2>My favourite things</h2>
<ul>
  <li>Rainy Sundays</li>
  <li>Fresh bread</li>
  <li>Old maps</li>
</ul>

<h2>How to make toast</h2>
<ol>
  <li>Put bread in the toaster.</li>
  <li>Wait.</li>
  <li>Butter it while it's hot.</li>
</ol>

What the browser shows

Try adding a step in the middle of the numbered list: the numbers update by themselves. A list can also go inside a list item, for sub-items:

Try it: change the code

<ul>
  <li>Bread
    <ul>
      <li>Sourdough</li>
      <li>Rye</li>
    </ul>
  </li>
  <li>Cakes</li>
</ul>

What the browser shows

The inner list goes inside the <li>, before its closing tag. That's what the indenting in the code is there to show.

Bold and italics

<strong> marks words that are important. Browsers show them in bold.
<em> marks emphasis, the word you'd stress if you said it out loud. Browsers show it in italics.

Try it: change the code

<p>The oven must be <strong>completely cold</strong> before you clean it.</p>
<p>I said I'd bring <em>a</em> cake, not <em>the</em> cake.</p>

What the browser shows

You may also see <b> and <i>. They still work, but they only change the look, while <strong> and <em> also tell screen readers to stress the words.

Notes to yourself

Anything between  is a comment. The browser doesn't show it, so it's handy for reminders:

<!-- Add the summer recipes here in June -->

Comments aren't secret, though: anyone can see them with the browser's View page source.

Put it together

Now make your own home page. Open index.html from lesson 1 and replace it with something like this, using your own name and your own words:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Sam Rivera</title>
</head>
<body>
  <h1>Sam Rivera</h1>
  <p>Weekend baker in Toronto. This is my corner of the web.</p>

  <h2>About me</h2>
  <p>I started baking bread in 2020, like everyone else, and <strong>never stopped</strong>.
  These days I bake most Saturdays and give most of it away.</p>

  <h2>What I bake</h2>
  <ul>
    <li>Sourdough and rye bread</li>
    <li>Birthday cakes, for friends who ask nicely</li>
    <li>Cinnamon buns, <em>only</em> in winter</li>
  </ul>

  <h2>My Saturday</h2>
  <ol>
    <li>Feed the starter on Friday night.</li>
    <li>Mix the dough first thing in the morning.</li>
    <li>Bake in the afternoon, then share.</li>
  </ol>
</body>
</html>

Or try it here first, and copy it into your file when you like it. This is only the part inside <body>:

Try it: change the code

<h1>Sam Rivera</h1>
<p>Weekend baker in Toronto. This is my corner of the web.</p>

<h2>About me</h2>
<p>I started baking bread in 2020, like everyone else, and <strong>never stopped</strong>.
These days I bake most Saturdays and give most of it away.</p>

<h2>What I bake</h2>
<ul>
  <li>Sourdough and rye bread</li>
  <li>Birthday cakes, for friends who ask nicely</li>
  <li>Cinnamon buns, <em>only</em> in winter</li>
</ul>

<h2>My Saturday</h2>
<ol>
  <li>Feed the starter on Friday night.</li>
  <li>Mix the dough first thing in the morning.</li>
  <li>Bake in the afternoon, then share.</li>
</ol>

What the browser shows

Save the file and reload it in your browser. It'll look plain: black text, the browser's own fonts. That's expected. Getting the structure right first and styling it afterwards is how web pages are made, and it's why the page will work on any screen.

Check your work

Your page has one <h1>, with <h2> headings for its sections.
It has at least one list, bulleted or numbered.
Every opening tag has a closing tag, except <meta> and <br>. If a whole section turns bold or italic, look for a missing </strong> or </em>.
The <title> says what the page is, such as your name.

Next, you'll link to other sites and add a photo.