Hack University - Headings, paragraphs, and lists

Headings and paragraphs

Most of any page is text, and three consumers read its structure rather than its look: browsers building the outline, screen reader users jumping heading to heading, and search engines deciding what the page is about.

Getting the structure wrong leaves the page looking fine while navigation and ranking quietly break.

HTML has six heading levels, from h1 as the most important down to h6:

<h1>Web Development</h1>
<h2>Unit 2: HTML</h2>
<h3>Lesson 2-2</h3>
<p>Body text lives in paragraphs.</p>

Rule	Reason
one `h1` per page	it is the page's main title
never skip levels	headings form a navigable outline
choose by meaning, not size	size belongs to CSS

Screen reader users jump through that outline to navigate, which is why an h1 followed directly by an h3 is a real accessibility defect rather than a style quibble.

Wanting smaller text is a CSS job, covered in unit 4. An h4 means a sub-sub-section and nothing else.

Lists

Two list elements, one item element:

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

<ol>
  <li>Lookup</li>
  <li>Request</li>
  <li>Response</li>
</ol>

ul is an unordered list (bullets). Use it when order does not matter.
ol is an ordered list (numbers). Use it when order is the point, like the request steps from lesson 1-2.
li is a list item, the only element allowed directly inside either list.

Lists nest: put a whole ul inside an li to make a sub-list.

Nesting means boxes in boxes: every element sits completely inside its parent.

Marking up recipe steps

Recipe steps belong in an ordered list, the ol element.

Recipe steps must happen in order, so ol is the right meaning, and the browser numbers the items automatically.

Element	Use when
`ol`	the order carries meaning
`ul`	the order is irrelevant

ul is for collections where order does not matter, such as a list of hobbies or tags. Choosing between them is a content decision, and typing numbers by hand inside a ul loses the meaning that assistive technology relies on.

A list of hobbies

A list marked up the way lists are meant to be, with ul wrapping the group and each item in its own li.

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hobbies</title>
  </head>
  <body>
    <h1>My hobbies</h1>
    <ul>
      <li>Climbing</li>
      <li>Chess</li>
      <li>Cooking</li>
    </ul>
  </body>
</html>

Element	Role
`ul`	the group, unordered
`li`	one item

Hobbies have no natural order, so ul is correct here rather than ol. The wrapper matters as much as the items, because it is what tells the browser these three lines belong together and lets a screen reader announce a list of three.

Shrinking a heading without breaking the outline

The language to change is CSS.

Heading levels are chosen by meaning, meaning the document outline, never by size. A heading that looks wrong is an appearance problem, and appearance is CSS's job through font-size, covered in unit 4.

Fix	Outline effect
CSS `font-size` on the `h2`	none, the outline stays correct
swapping the `h2` for an `h3`	the outline now claims a nesting level that is not there

The second fix is the tempting one and it trades a visual problem for a structural one. Heading levels are meaning, and size is appearance, which is the whole reason the two languages are separate.