HTML Text, Links, Images and Media: Build a Content Page

Q: What is the difference between strong and b in HTML?

Both look bold by default. strong says the content is important or urgent, and assistive technology may treat it accordingly. b only draws attention without extra importance, for example a keyword in a review. If the meaning is "this matters", use strong.

Q: Should I always write alt text for images?

Always include the alt attribute. If the image carries information, describe what it conveys. If it is decorative, use an empty alt="" so screen readers skip it. If the image is the only content of a link, describe where the link goes.

Web DevelopmentLesson 2 of 45 min read

What you'll learn

Mark up text with the right element: strong, em, lists, blockquote, time and abbr
Write absolute, relative, fragment, mailto and tel links with descriptive link text
Embed responsive images with width, height, alt, srcset and figure
Add video and audio with controls, captions and a poster image

On this page

Text that means something
Links: four destinations, one rule
Images: sizes, alt text and responsive sources
Common mistakes
How this shows up in real projects and interviews

The Ridgeback Trail Runners need a race report. The text is written, the photographs are ready, and someone has uploaded a video of the finish line. Where do people go wrong? They make the first sentence bold to make it "stand out", link the words "click here", leave off image sizes so the page jumps while loading, and autoplay a video with sound. Each of these has a better, simpler markup answer, and we will build the page piece by piece.

Text that means something

Browsers draw strong and b the same way, and em and i the same way, but they are not interchangeable. strong marks importance (a screen reader may change its tone), b is for text drawn attention to without added importance, such as a product name in a review. em is stress emphasis, like the word you would lean on when speaking. i is for text in an alternate voice, such as a foreign term or a vessel name.

Need	Element	Why not the lookalike
Warning that must not be missed	`strong`	`b` carries no importance
Stress a word in a sentence	`em`	`i` means alternate voice
A date or time a machine can read	`time datetime="..."`	Plain text cannot be parsed reliably
Explain an acronym	`abbr title="..."`	Without it, readers must guess
Long quotation from a source	`blockquote` plus `cite`	Indenting a `p` says nothing about quoting
Steps in a fixed order	`ol`	`ul` loses the sequence

Lists deserve special attention because navigation menus, product grids and breadcrumbs are all lists in disguise. Use ul when order is irrelevant, ol when it matters, and dl with dt and dd for term and description pairs such as a race fact sheet.

Links: four destinations, one rule

The href of an a element can be an absolute URL (https://example.org/results), a path relative to the current page (photos/finish.jpg), a fragment that jumps within the page (#results), or a scheme that launches another application (mailto: or tel:). The rule that matters most is the visible text: it must make sense when read alone, because screen reader users often pull up a list of all links on a page.

race-report.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Ridgeback 12K Race Report</title>
</head>
<body>
  <h1>Ridgeback 12K: Race Report</h1>
  <p>Run on <time datetime="2026-04-18">18 April 2026</time>.
     Conditions were <em>much</em> wetter than forecast.</p>

  <p><strong>Note for volunteers:</strong> the water station moves to the
     north car park next year.</p>

  <h2>Fact sheet</h2>
  <dl>
    <dt>Distance</dt>
    <dd>12 km, two loops</dd>
    <dt>Climb</dt>
    <dd>340 m in total</dd>
    <dt>Timing</dt>
    <dd>Chip timing by the <abbr title="Ridgeback Trail Runners">RTR</abbr> crew</dd>
  </dl>

  <h2>Quick links</h2>
  <ul>
    <li><a href="#results">Jump to the results</a></li>
    <li><a href="routes/12k-loop.html">Read the route description</a></li>
    <li><a href="docs/entry-rules.pdf" download>Download the entry rules (PDF)</a></li>
    <li><a href="mailto:timing@example.org">Email the timing team</a></li>
    <li><a href="tel:+441632960000">Call the race office</a></li>
    <li><a href="https://example.org/map" target="_blank" rel="noopener">Open the course map (new tab)</a></li>
  </ul>

  <h2 id="results">Results</h2>
  <ol>
    <li>Priya Nair, 48:12</li>
    <li>Tomas Weber, 49:03</li>
    <li>Imogen Hart, 49:40</li>
  </ol>

  <blockquote cite="https://example.org/club-newsletter">
    <p>Mud is only a problem if you are trying to stay clean.</p>
  </blockquote>
  <p>Say &lt;b&gt; aloud and the browser still shows the literal text.</p>
</body>
</html>

On screen you see a heading, a paragraph where "much" is slanted, a paragraph beginning with bold "Note for volunteers:", a fact sheet where each description is indented under its term, a bulleted list of six links in the default blue underline, a numbered podium list, and an indented quotation. The final line prints the characters <b> literally, because < and > are entity references: you must escape <, > and & whenever you want them as visible text.

Images: sizes, alt text and responsive sources

An img needs four things from you: src, alt, and width and height. The last two are the image's intrinsic pixel dimensions. Browsers use them to reserve space before the file arrives, so text below does not jump downward when the image loads (a layout shift). CSS can still make the image fluid afterwards.

race-gallery.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Ridgeback 12K Gallery</title>
</head>
<body>
  <h1>Finish line gallery</h1>

  <figure>
    <img
      src="img/finish-800.jpg"
      srcset="img/finish-400.jpg 400w, img/finish-800.jpg 800w, img/finish-1600.jpg 1600w"
      sizes="(min-width: 700px) 700px, 100vw"
      width="800" height="533"
      alt="Three runners in muddy shoes crossing the finish arch with arms raised"
      loading="lazy">
    <figcaption>The first three finishers, 18 April.</figcaption>
  </figure>

  <picture>
    <source srcset="img/medal.avif" type="image/avif">
    <source srcset="img/medal.webp" type="image/webp">
    <img src="img/medal.jpg" width="300" height="300" alt="Bronze finisher medal on a green ribbon">
  </picture>

  <h2>Watch the final sprint</h2>
  <video controls preload="metadata" width="640" height="360" poster="img/sprint-poster.jpg">
    <source src="video/sprint.webm" type="video/webm">
    <source src="video/sprint.mp4" type="video/mp4">
    <track kind="captions" src="video/sprint.en.vtt" srclang="en" label="English" default>
    Your browser cannot play this video. <a href="video/sprint.mp4">Download it instead</a>.
  </video>

  <h2>Winner interview</h2>
  <audio controls src="audio/winner.mp3">
    Audio is not supported. <a href="audio/winner.mp3">Download the interview</a>.
  </audio>
</body>
</html>

The browser draws the photograph at up to 800 CSS pixels wide with the caption directly under it, indented by the default figure margins. srcset and sizes let a phone on a narrow screen fetch the 400-pixel file instead of the 1600-pixel one. picture offers modern formats first and falls back to the JPEG. The video shows the poster frame with a control bar and nothing downloads except metadata until someone presses play. The track element supplies captions, and the text inside video is shown only by browsers that cannot play it.

Common mistakes

Leaving out `alt`. Screen readers read the file name aloud, and validators report An img element must have an alt attribute. If the image is purely decorative, write alt="" deliberately.
Wrong path or capitalisation. img/Finish.JPG works on a Windows laptop and returns 404 on a Linux server that is case-sensitive. Check the Network tab for red entries.
No `width` and `height`. Text jumps when the image arrives; Lighthouse reports a cumulative layout shift problem.
Autoplaying video with sound. Browsers usually block it. Autoplay generally only works when the video is muted, and even then it annoys readers; prefer controls.
`click here` link text. A list of links reads "click here, click here, read more". Write what the destination is.
Typing `&` or `<` raw in text. Text such as R&D <10 staff> makes the parser treat <10 staff> as a broken tag and your sentence loses words.

How this shows up in real projects and interviews

Content pages are where marketing and engineering meet, and image performance is a standing topic: expect questions about srcset, lazy loading and layout shift. A realistic review comment is "add alt text and dimensions to every image in this PR". In frameworks, the img element is often wrapped by a component (Next.js ships one), but the attributes you set are the same. See CSS Fundamentals for making galleries fluid.

Try it yourself

Create a one-page report for a made-up neighbourhood cleanup day. It must contain a time element, a dl fact sheet, an ol of three tasks, one fragment link that jumps to a heading further down, one mailto link, a figure with a captioned image, and a video with a poster. Open the Network tab and confirm no request returns 404.

Show a hint

Use any small images you have. For a missing video, point the source at a placeholder file, then check that the fallback text appears when the file is absent.

Key takeaways

Choose text elements by meaning: strong and em for importance and stress, time, abbr, ol, dl and blockquote where they fit.
Link text must make sense out of context; use href forms (absolute, relative, fragment, mailto:, tel:) appropriately.
Every img needs alt, width and height; use srcset, sizes and picture to serve smaller files to smaller screens.
Use controls, a poster and a captions track for video, and avoid autoplay with sound.

Test yourself

A trick from this lesson's ride: Choose tags by meaning, not looks: strong warns, em stresses, b and i just set apart. Four more tricks like it wait along the route, each followed by a question.

Ride this lesson

Frequently asked questions

What is the difference between strong and b in HTML?

Both look bold by default. strong says the content is important or urgent, and assistive technology may treat it accordingly. b only draws attention without extra importance, for example a keyword in a review. If the meaning is "this matters", use strong.

Should I always write alt text for images?

Always include the alt attribute. If the image carries information, describe what it conveys. If it is decorative, use an empty alt="" so screen readers skip it. If the image is the only content of a link, describe where the link goes.

Why does my image not show in HTML?

Almost always the path is wrong. Check the spelling, folder and capitalisation of the file, then look at the Network tab for a 404. Paths are relative to the HTML file, so moving the page without moving the images breaks them. A missing file shows the alt text instead.