Text and Lists

Headings, paragraphs, and the two kinds of list.

Most of the web is text. HTML gives that text a shape: headings announce sections, paragraphs hold prose, and lists group related items so a browser — or a screen reader — can tell where a set begins and ends.

<h1>Baking bread</h1>
<p>Four ingredients, one long wait.</p>

Headings run from <h1> down to <h6>. The number is a level, not a size: an <h2> is a subsection of the <h1> above it, and skipping straight from <h1> to <h4> leaves a gap that assistive tech reads as a missing section.

Note

Use one <h1> per page — the page's title. Everything else nests beneath it.

Choosing a list

  1. Unordered lists for sets

    <ul> is for items with no meaningful sequence — ingredients, tags, features. The browser marks each one with a bullet.

  2. Ordered lists for sequences

    <ol> is for steps that must happen in order. The browser numbers them for you, so inserting a step never means renumbering by hand.

  3. List items go inside

    Either way, every direct child is an <li>. A list can nest another full list inside an <li> to build sublevels.

Tip

Pick the list type by meaning, not by looks. If the order carries information, it is an <ol> — even if you later style away the numbers.

Question 1 of 2

You are writing installation steps that must happen in sequence. Which element?

  • <ul>Unordered list
  • <ol>Ordered list
  • <p>A single paragraph

Question 2 of 2

Which statements about headings are true? Select all that apply.

  • The number is a levelNot a font size
  • A page should have one <h1>The page title
  • Skipping levels is recommendedh1 straight to h4
  • Headings stop at <h3>No deeper levels exist

Try it yourself

Swap the <ul> for an <ol> and watch the bullets become numbers.

Playground

Files

Press Escape, then Tab, to move on from the editor.

Preview

Preview stopped.

Press Run to preview your code.

Console

No output yet.

Challenge

Build an ordered list with the id steps containing exactly three items.

Challenge

Files

Press Escape, then Tab, to move on from the editor.

Preview

Preview stopped.

Press Run to preview your code.

Console

No output yet.