Text, Links & Images
Headings, paragraphs, links, images, and lists — the building blocks of every web page
Knowledge Debt detected
You can study this freely — but your score may plateau if these foundations have gaps. The Mastery badge requires them to be solid.
Explanation
The most common elements on any page are text, links, and images. Getting them right matters for accessibility and SEO.
Headings — hierarchy matters:
html <h1>Page Title</h1> <!-- One per page — the main topic --> <h2>Section</h2> <!-- Major sections --> <h3>Subsection</h3> <!-- Sub-topics within a section --> <!-- h4, h5, h6 exist but h4+ is rare in practice --> `` Never skip heading levels (h1 → h3) — screen readers navigate by headings and expect a logical hierarchy.
Paragraph and inline text:
html <p>This is a paragraph. HTML collapses whitespace — line breaks in code don't appear on screen.</p> <p>Use <strong>strong</strong> for important text (bold, semantic weight).</p> <p>Use <em>em</em> for emphasis (italic, semantic stress).</p> <p>Use <span class="highlight">span</span> for styling without meaning.</p>
Links:
html <!-- External link — open in new tab, include rel for security --> <a href="https://example.com" target="_blank" rel="noopener noreferrer">External Site</a> <!-- Internal link — no target needed --> <a href="/about">About Us</a> <!-- Anchor link — jump to element with id="section-two" --> <a href="#section-two">Jump to Section 2</a> <!-- Email link --> <a href="mailto:hello@example.com">Email us</a>
Images:
html <!-- alt="" is required. For informational images: describe the content. For decorative images: alt="" (empty string, not missing) --> <img src="profile.jpg" alt="Jane Doe smiling in front of a laptop" width="300" height="300" /> Always set width and height` to prevent layout shift (CLS) during load.
Lists:
html <!-- Unordered list (bullets) --> <ul> <li>Apples</li> <li>Bananas</li> </ul> <!-- Ordered list (numbers) --> <ol> <li>Boil water</li> <li>Add pasta</li> </ol> <!-- Description list (term + definition) --> <dl> <dt>HTML</dt> <dd>HyperText Markup Language</dd> </dl>
Examples
Navigation with links and a heading
Nav links in a `<ul>` is standard practice — the list communicates that these items are a group
<header>
<h1>AtomLearn</h1>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/curriculum">Curriculum</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
</header>
<main>
<h2>Featured Skills</h2>
<p>Start with <strong>Python Fundamentals</strong> — the most common entry point for new developers.</p>
<p>Learn more at <a href="https://docs.python.org" target="_blank" rel="noopener noreferrer">Python Docs</a>.</p>
</main>Images with meaningful alt text
Alt text rules: informational → describe the image; decorative → empty string; linked → describe the destination
<!-- Informational image — describe what the image shows -->
<img
src="atom-diagram.png"
alt="Diagram showing how atoms link to prerequisites in a chain"
width="600"
height="400"
/>
<!-- Decorative image — empty alt so screen readers skip it -->
<img src="decorative-wave.svg" alt="" role="presentation" />
<!-- Image inside a link — alt describes the destination, not the image -->
<a href="/python">
<img src="python-logo.png" alt="Go to Python track" />
</a>How well did you understand this?
Next in HTML
HTML Forms