Pictures and structure: media plus semantic layout

<img> is a void element (no content, no closing tag - Session 1) that is all attributes: src says which file, alt says what it shows, width and height declare its natural size in pixels so the browser reserves the space before the file arrives. Skip the size and the page jumps around while loading - the layout shift you feel on janky news sites.

<p>A photo, politely announced:</p>
<img src="https://picsum.photos/300/200"
     alt="Placeholder landscape photo from the picsum service"
     width="300" height="200">

• The demo URL is a placeholder service - picsum.photos returns a random photo at the size you ask for. Handy for layouts; your real page uses your real files.
• Width and height set the real ratio; making images respond to screen size is a CSS job (Session 5), and serving different files to different screens (srcset) is a deep dive for 6.3.

The alt attribute is what a screen reader speaks, what renders if the file fails, and what search engines index. The test: if the image vanished, what words would do its job? Describe what it means in context, never what the file is called.

• Decorative images get alt="" - empty, but present. That tells screen readers "skip me, I am decoration". Omitting alt entirely makes them read the filename aloud instead.
• Never start with "image of" - the screen reader already announces it is an image.

When an image needs a visible caption, wrap both in <figure> and put the caption in <figcaption>. The browser now knows the caption belongs to the image - they travel together, and assistive tech announces them as one unit. Note the two are different jobs: alt describes the image, the caption comments on it.

<figure>
  <img src="https://picsum.photos/400/220"
       alt="Placeholder photo standing in for a project screenshot"
       width="400" height="220">
  <figcaption>Fig 1 - the caption travels with the image.</figcaption>
</figure>

Figure is not only for images: a code block, a chart, or a table with a caption are all figures. If it could move to an appendix and still make sense with its caption, it is a figure.

Three housekeeping habits that separate tidy sites from junk drawers:

• An images/ subfolder. Inside my-site, next to index.html, make a folder called images and keep every picture there. The src is then a relative path, exactly like the link paths from Session 2: src="images/me.jpg".
• Lowercase, no spaces in filenames: phoebe-portrait.jpg, never My Photo (1).JPG. Servers are case-sensitive and spaces break URLs.

The pattern: a <video> element with controls (never autoplay a visitor's speakers), a poster image to show before play, one or more <source> children listing formats from best to safest, and plain fallback content at the bottom. The browser plays the first source it supports and shows the fallback only if it supports none.

<video controls width="320" height="180"
       poster="images/intro-poster.jpg">
  <source src="images/intro.webm" type="video/webm">
  <source src="images/intro.mp4" type="video/mp4">
  Your browser does not play video.
  <a href="images/intro.mp4">Download the file instead.</a>
</video>

• controls is a boolean attribute - present means on, no value needed. It gives you play, pause, volume, and fullscreen for free.
• poster is the cover image before play - without it, visitors stare at a black rectangle.
• Captions: real published video should carry a <track> element pointing at a captions file. We mark it honest-incomplete today (◐) - the pattern is one line, writing good captions is the real work.

<audio> works exactly like video without width, height, or poster. Same controls attribute, same source-and-fallback pattern.

<p>Episode 1 of my someday-podcast:</p>
<audio controls src="audio/episode-1.mp3">
  Your browser does not play audio.
</audio>

• <header> - the introduction strip: your name (the h1) and the nav. Not to be confused with the invisible <head> from Session 1 - header is visible content.
• <nav> - wraps your list of links from Session 2. The wrapper is what lets assistive tech announce "navigation" and offer to skip it.
• <main> - the unique content of this page. The one hard rule of the day: exactly one main per page, and it never holds the header or footer.
• <footer> - the sign-off: copyright line, contact, small print.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Phoebe Fu</title>
  </head>
  <body>
    <header>
      <h1>Phoebe Fu</h1>
      <nav>
        <ul>
          <li><a href="#about">About</a></li>
          <li><a href="#projects">Projects</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <section id="about">
        <h2>About</h2>
        <p>Data and AI person, building a corner of the internet.</p>
      </section>
      <section id="projects">
        <h2>Projects</h2>
        <p>Things shipped and things brewing.</p>
      </section>
      <section id="contact">
        <h2>Contact</h2>
        <p>Say hello.</p>
      </section>
    </main>
    <footer>
      <p>Built by hand, one session at a time.</p>
    </footer>
  </body>
</html>

Three wrappers, three questions, asked in order:

• Would it make sense on its own, somewhere else? A blog post, a product card, a project entry that could appear in a feed - that is an <article>. Self-contained is the test.
• Is it a themed chunk of this page, deserving its own heading? About, Projects, Contact - that is a <section>. A section without a heading is usually a section that should not exist.
• Neither - you just need a box to style or group? That is a <div>. No meaning, no shame; it is the honest choice when no semantic element fits.

And <aside> is for content related to, but separable from, the main flow: a "currently reading" box, a related-links list. Nesting is normal: articles inside sections, sections inside articles - the questions above decide each layer.

<div> is the meaningless block, <span> its inline sibling - a way to grab a few words inside a sentence, which becomes gold in Session 5 when classes and CSS arrive. Reach for them last, not first.

One nuance from web.dev's "Headings and sections" worth knowing: browsers do not build a real document outline from nested sections - your h1-h6 ladder from Session 1 is still what defines the outline. So keep the ladder honest inside your regions: one h1 in the header, h2 per section. Regions are the map, headings are the index.