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. Get the structure wrong and the page still looks fine — but navigation and ranking quietly break.

HTML has six heading levels, from h1 (most important) to h6 (least):

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

Two rules that matter more than they look:

• One h1 per page. It is the page's main title.
• Never skip levels (h1 straight to h3). Headings form the page's outline, and screen reader users jump through that outline to navigate.

Pick headings by meaning, never by size. Wanting smaller text is a CSS job (unit 4). h4 means a sub-sub-section, 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.