TopolearnHeadings and lists are how both readers and assistive technology skim a page.
Text needs structure, and HTML expresses it with a small set of elements.
Headings <h1> to <h6> form an outline. Use one <h1> for the page's main title, then <h2> for sections, <h3> for subsections, without skipping levels. Screen-reader users jump between headings to navigate, so pick the level by structure, never by the font size you want; size is CSS's job.
Paragraphs are <p>. Don't use empty paragraphs or <br><br> for spacing; use CSS margins. <br> is for line breaks that belong to the content, such as lines of an address or a poem.
Lists come in three kinds:
<ul>for unordered items,<ol>for ordered steps (withstartandreversedattributes), each item in an<li>.<dl>for name/value pairs, with<dt>terms and<dd>descriptions.- Lists can nest: put the inner
<ul>inside an<li>.
Inline elements mark up words inside a paragraph: <strong> for importance, <em> for stress emphasis, <code> for code, <kbd> for keys, <abbr title="..."> for abbreviations, <mark> for highlights. <b> and <i> still exist for styling-only offsets like product names or foreign words. For quotes there is <blockquote> (block) and <q> (inline), and <pre> preserves whitespace exactly.
Example
<h1>Brewing coffee</h1>
<p>Good coffee needs <strong>fresh beans</strong> and <em>patience</em>.</p>
<h2>Steps</h2>
<ol>
<li>Grind 15 g of beans.</li>
<li>Pour water at <abbr title="degrees Celsius">93 °C</abbr>.</li>
<li>Wait, then press <kbd>Start</kbd>.</li>
</ol>
<h2>Glossary</h2>
<dl>
<dt>Bloom</dt>
<dd>The first pour that releases gas from fresh grounds.</dd>
</dl>Remember
- One h1 per page, then h2, h3 without skipping levels
- Pick heading levels by structure, never by size
- ul for unordered, ol for sequences, dl for term/description pairs
Watch out for
- Using <br><br> or empty <p> elements for vertical spacing instead of CSS margins.