Text and Links

Good markup turns a wall of words into a navigable outline. Readers skim headings, assistive technology lists them, and search engines use them to understand the page.

Build a heading outline

Use one descriptive h1 for the main page topic, then nest sections without skipping levels for visual reasons.

01<article>
02  <h1>Learning the web</h1>
03  <p>A practical path through the platform.</p>
04
05  <h2>Start with structure</h2>
06  <p>HTML gives content meaning.</p>
07
08  <h2>Add presentation</h2>
09  <h3>Choose a type scale</h3>
10  <p>CSS controls how the hierarchy looks.</p>
11</article>

Express meaning inside text

Use strong when text has strong importance and em when emphasis changes the sense of a sentence. Use code for identifiers or short code fragments.

01<p><strong>Save your work</strong> before closing the editor.</p>
02<p>Use <code>const</code> unless a binding must change.</p>
03<p>I said <em>readable</em>, not merely valid.</p>

Write useful links

A link's text should make sense out of context. Use relative URLs for pages in the same site and absolute URLs for external destinations.

01<a href="/courses/html">Explore the HTML course</a>
02<a href="https://html.spec.whatwg.org/">Read the HTML standard</a>
03<a href="mailto:hello@example.com">Email the editor</a>

Keep this

Create a logical heading outline, mark emphasis by meaning, and make every link describe its destination.