Text, Headings and Lists

Text is the overwhelming majority of what's on any real page — this lesson covers the elements that carry it: headings that give a page its outline, paragraphs, ways to mark emphasis and importance, and the list elements you will use constantly.

Headings: <h1> through <h6>

<h1>Page Title</h1>
<h2>A Major Section</h2>
<h3>A Subsection</h3>

Six levels exist, from <h1> (most important) to <h6> (least). They aren't just about size — by default browsers render <h1> bigger than <h2>, but that's a default style, not the point of headings. Their real job is to describe the outline of the document, the same way chapter and section headings do in a book.

Convention: one <h1> per page, used for the page's main title. After that, nest sensibly — an <h2> for each major section, <h3> for subsections within those, and so on, without skipping levels just to get a smaller default size (use CSS for that instead, once you get to it).

Screen reader users frequently navigate a page by pulling up a list of its headings and jumping straight to the section they want, the way you might skim a table of contents. A page with a clean, correctly nested heading structure is directly more usable for them. A page that uses <h3> for everything because it "looked right" removes that navigation entirely.

Paragraphs

<p>This is a paragraph. It can contain as much text as you like.</p>

<p> is the basic container for a block of text. Browsers add space above and below each paragraph by default.

<strong> vs <b>, <em> vs <i>

These look identical by default — bold and italic respectively — which is exactly why the difference between them is easy to miss and worth being explicit about.

• <strong> marks content as important. A screen reader may change its tone or emphasis when it hits <strong> text, because it's being told this matters.
• <b> just makes text bold, with no meaning attached. Use it for things like a keyword being bolded purely for visual scanning, where there's genuinely no "importance" being communicated.
• <em> marks stress emphasis — the way you'd naturally emphasise a word if you were saying the sentence out loud. A screen reader can alter its inflection here too.
• <i> is italics with no semantic meaning — a technical term, a ship's name, a foreign phrase you're setting apart visually but not "emphasising."

<p><strong>Warning:</strong> this action cannot be undone.</p>
<p>I <em>really</em> think we should ship this.</p>
<p>The <i>Titanic</i> sank in 1912.</p>

If you're unsure which to reach for, ask: "am I saying this matters / should be stressed" (→ strong / em), or "am I just styling this visually for a convention, with no importance implied" (→ b / i). Both pairs are valid, current HTML — <b> and <i> are not deprecated, they're just for a different purpose than they're often used for.

<br> — used sparingly

<p>123 Main Street<br />Springfield</p>

<br> forces a line break inside a block of text, useful for genuinely line-based content like a postal address. It's a void element (no closing tag, as covered last lesson). Don't reach for <br> to create spacing between separate ideas — that's what paragraphs and, later, CSS spacing are for. A page full of <br><br> where separate <p> elements belong is a sign the structure is being faked with line breaks instead of expressed properly.

<hr> — a thematic break

<p>End of one topic.</p>
<hr />
<p>Start of an unrelated topic.</p>

<hr> renders as a horizontal line by default, and semantically marks a shift in topic — not just a visual divider, but a real break in the content's train of thought. It's also a void element.

Lists

Unordered lists

Use <ul> when you have a set of items where order isn't meaningful:

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Renders with bullet points by default.

Ordered lists

Use <ol> when position genuinely carries meaning — steps, rankings, a sequence:

<ol>
  <li>Preheat the oven</li>
  <li>Mix the ingredients</li>
  <li>Bake for 20 minutes</li>
</ol>

Renders with numbers by default. Swapping steps 1 and 2 here would actually change the meaning, which is exactly the signal that <ol> is the right choice over <ul>.

Nested lists

A list item can contain another whole list:

<ul>
  <li>
    Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </li>
  <li>Backend</li>
</ul>

The nested <ul> goes inside the <li> it belongs under, not alongside it.

Description lists

<dl> (description list) pairs terms with their descriptions — think of a glossary or a key-value listing, rather than a bulleted or numbered sequence:

<dl>
  <dt>HTML</dt>
  <dd>Describes the structure and meaning of content.</dd>
  <dt>CSS</dt>
  <dd>Describes how that content looks.</dd>
</dl>

<dt> is the term being defined, <dd> is its description. You can have multiple <dd> elements for one <dt> if a term has more than one description. It's a less common element than <ul> or <ol>, but it's the correct, semantic choice specifically for term/definition pairs — a lot of FAQ pages and glossaries reach for divs and CSS when <dl> was actually the right native fit.

Try it yourself

What to remember

• Use one <h1> per page, and nest <h2>–<h6> to reflect real document structure, not just to get a certain size.
• <strong> and <em> carry meaning that screen readers act on; <b> and <i> are purely visual.
• <br> is for genuinely line-based content, not for faking paragraph spacing.
• <ul> for unordered collections, <ol> when position is meaningful, <dl> for term/description pairs.
• Lists nest by putting a new <ul>/<ol> inside the <li> it belongs to.