Words that link: text, lists, and the web's superpower

<em> marks stress emphasis - the word you would lean on out loud, which can flip a sentence's meaning. <strong> marks strong importance - warnings, the part that must not be missed. Yes, <b> and <i> exist and look the same, but they carry no meaning: bold and italic with nothing to say. Machines hear strong and em; they shrug at b and i.

<p>I <em>said</em> the model was ready.</p>
<p>I said the model was <em>ready</em>.</p>
<p><strong>Warning:</strong> retraining overwrites
the old weights.</p>

Two list flavors, one rule. <ul> when order doesn't matter (groceries, skills, links you love), <ol> when it does (steps, rankings). Both hold only <li> children. To nest, put the whole inner list INSIDE an <li> - a list item can contain its own sub-list.

<h3>Training a model, honestly</h3>
<ol>
  <li>Collect the data</li>
  <li>Clean it
    <ul>
      <li>drop duplicates</li>
      <li>fill missing values</li>
    </ul>
  </li>
  <li>Train, evaluate, repeat</li>
</ol>

One habit worth building now: navigation menus are lists of links. Session demos below use exactly that pattern, and Session 3 wraps it in a <nav>.

Term and definition, name and value, question and answer - paired content gets the description list: <dl> wraps the whole thing, <dt> holds each term, <dd> holds its description. Glossaries, FAQ pages, and metadata panels are all dl territory.

<dl>
  <dt>Model</dt>
  <dd>A program that learned patterns from data.</dd>
  <dt>Training</dt>
  <dd>Showing it examples until the patterns stick.</dd>
  <dt>Overfitting</dt>
  <dd>Memorizing the examples instead of the pattern.</dd>
</dl>

Borrowed words and computer words both get marked honestly:

• <blockquote> wraps a quoted block; its cite attribute holds the source URL (invisible, but machines can read it). The <cite> element, separately, marks the title of a work in your visible text.
• <q> is the inline version - the browser adds the quote marks for you.
• <code> marks inline computer text: index.html, href, a function name. Readers instantly see "this is literal, type it exactly".
• <pre> preserves whitespace - the one place Session 1's collapsing rule is switched off. Wrap <pre><code> together for multi-line code blocks, exactly like the orange panels on this page.

Five specialists you'll reach for occasionally, worth recognizing on sight:

• <small> - side comments and fine print: copyright lines, disclaimers.
• <sub> and <sup> - subscript and superscript: H₂O, x², footnote markers.
• <time> - a date or time with a machine-readable twin: <time datetime="2026-07-13">this Monday</time>. Humans read the words, calendars and search engines read the attribute.
• <address> - contact information for the page or article author. It lands in your project footer in Session 3.

An absolute URL is the full postal address - protocol, site, path - and works from anywhere: https://developer.mozilla.org. A relative URL is directions from where you're standing: about.html, images/cat.jpg, ../index.html. Use relative links between your own files (they keep working when the whole folder moves, including to GitHub Pages in Session 6) and absolute links for everyone else's sites.

<p>Absolute - the full address:</p>
<p><a href="https://developer.mozilla.org">MDN Web Docs</a></p>

<p>Relative - measured from this file:</p>
<ul>
  <li><a href="about.html">About me</a> (same folder)</li>
  <li><a href="images/cat.jpg">My cat</a> (subfolder)</li>
  <li><a href="../index.html">Home</a> (up one level)</li>
</ul>

Screen-reader users routinely pull up a list of every link on the page, out of context. A list that reads "click here, click here, here, this link" is useless; a list that reads "MDN's link guide, my projects, email Phoebe" is a table of contents. The link text itself must say where the link goes.

Give any element an id, and href="#that-id" jumps straight to it - same page, no reload. This is how tables of contents, "back to top" links, and your project page's nav all work. Two halves, one contract: the id on the target, the # in the link.

<p>
  <a href="#about">About</a> ·
  <a href="#projects">Projects</a> ·
  <a href="#contact">Contact</a>
</p>
<h2 id="about">About</h2>
<p>A paragraph tall enough to scroll past.</p>
<p>And another, for honest scrolling room.</p>
<h2 id="projects">Projects</h2>
<p>Things I have shipped.</p>
<p>More filler so the jump is visible.</p>
<h2 id="contact">Contact</h2>
<p>Say hi. <a href="#about">Back to top-ish</a></p>

• Email links: href="mailto:you@example.com" opens the visitor's mail app with the address filled in. Fair warning: any address published this way is harvestable by spam bots - many people prefer a spelled-out "phoebe at example dot com" or a contact form (Session 4).
• The download attribute: <a href="report.pdf" download> asks the browser to save the file instead of opening it. It only works for files on your own site.
• New tabs: target="_blank" opens the link in a new tab. Pair it with rel="noopener", which stops the new page from reaching back and controlling yours (modern browsers now do this by default, but writing it keeps you explicit and covers older ones). Honesty rule: users can open a new tab themselves whenever they want - force it only when losing the current page would hurt, like mid-form.

• title, revisited: it's also the bookmark name and the headline search results show. "Phoebe Fu - data and AI" beats "index".
• meta description: the grey sentence under your headline in search results. One honest sentence, roughly 150 characters - if you don't write it, the search engine improvises from your page.
• Favicon: <link rel="icon" href="favicon.ico"> points at a small icon file next to your page. No icon file yet? The emoji trick below inlines one as an SVG data URL - zero files, instant personality.
• The Session 5 teaser: <link rel="stylesheet" href="css/site.css"> is how a page puts on clothes. We add the line now; the wardrobe arrives in Session 5.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Phoebe Fu - data and AI</title>
    <meta name="description"
      content="Phoebe's corner of the internet: projects, notes, and experiments in data and AI.">
    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🌸</text></svg>">
    <link rel="stylesheet" href="css/site.css">
  </head>
  <body>
    <h1>Everything above renders nothing</h1>
    <p>Yet tabs, bookmarks, and search snippets all read it.</p>
  </body>
</html>

• lang on elements: the lang attribute from your html tag also works on any element. Quoting a French sentence on an English page? <q lang="fr"> tells screen readers to switch pronunciation mid-page.
• meta author: <meta name="author" content="Phoebe Fu"> - a polite credit some tools read. Harmless, occasionally useful.
• What does NOT belong in the head: anything visible. Headings, paragraphs, images placed in the head get silently relocated into the body by the browser - your structure rewritten without a warning. And no secrets anywhere in the file: the head is the first thing "View Source" shows.