HTML Reference

This sheet lists the tags used in this course. The first section is taught in class. The second section is not taught — Level 4 tasks expect you to find what you need there and work out how to use it.

The skeleton (every page, every time)

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Shows in the browser tab</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    ...everything visible goes here...
  </body>
</html>

Taught in class

The rows are in the order the lessons teach them, so a tag you have not met yet is further down the table than the ones you have.

Tag	First taught	What it is	Example
`<h1>` … `<h6>`	Lesson 1	Headings, biggest to smallest	`<h1>My Site</h1>`
`<p>`	Lesson 1	Paragraph	`<p>Words go here.</p>`
`<section>`	Lesson 1	One chunk of your page, usually with an `id`	`<section id="games">…</section>`
`<ul>` / `<ol>` / `<li>`	Lesson 2	Bullet list / numbered list / one item	`<ul><li>First</li></ul>`
`<a>`	Lesson 3	A link — `href` is the destination	`<a href="https://example.com">Go</a>`
`<img>`	Lesson 3	An image — `src` points at the file, `alt` describes it	`<img src="images/cat.png" alt="A cat mid-yawn">`
`<a href="#id">`	Lesson 3	A link that jumps to an element on THIS page	`<a href="#games">Games</a>`
`<div>`	Lesson 6	A plain box with no meaning. Used to group things together so CSS can style the group.	`<div class="card">…</div>`
`<span>`	Reference only	The same idea, but for a few words inside a line of text rather than a whole block.	`<p>Cost: <span class="price">$4</span></p>`
`<nav>`	Lesson 6	The block that holds a page's row of links	—
`<header>` / `<main>` / `<footer>`	Major Project 1	The other main regions of a full page	—
`<button>`	Lesson 13	A clickable button. JavaScript finds it by its `id` and listens for the click.	`<button id="go-button">Go</button>`
`<input>`	Lesson 14	A box the user types into. JavaScript reads what they typed with `.value`.	`<input id="user-input" type="text">`
`<label>`	Major Project 2	The words that name an input box. The `for` must match that input's `id` exactly, or the label is attached to nothing.	`<label for="pack-price">Price ($)</label>`

<span> is the one row with no lesson beside it. It is on the sheet because it is the partner of <div>, and you may reach for it when you want to style a few words rather than a whole block.

<label> and <input> come as a pair. Written correctly, clicking the words also puts the cursor in the box:

<label for="pack-price">Price of one pack ($)</label>
<input id="pack-price" type="number">

for="pack-price" and id="pack-price" are the same word. If they differ by one letter, the label still shows on the page but does nothing.

All of it together

The table shows tags one at a time. Here is what they look like in a real page — save this as index.html and it works:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>All About Retro Games</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <header>
      <h1>Retro Video Games</h1>
      <nav>
        <a href="#pixels">Pixel Art</a>
        <a href="#hard">Hardest Games</a>
      </nav>
    </header>

    <main>
      <section id="pixels">
        <h2>Pixel Art</h2>
        <p>Pixel art never ages. A well-drawn sprite from 1994 still looks sharp today.</p>
        <img src="images/sprite.png" alt="A 16-bit hero sprite with sword raised">
      </section>

      <section id="hard">
        <h2>Hardest Games</h2>
        <ul>
          <li>Battletoads</li>
          <li>Ghosts 'n Goblins</li>
        </ul>
      </section>
    </main>

    <footer>
      <p>Built by me, 2026</p>
    </footer>
  </body>
</html>

Read it top to bottom: the skeleton, then a header containing a nav, then a main holding two sections, and finally a footer. Every tag in the table above appears somewhere in there.

Not taught in class — Level 4 material

Level 4 tasks expect you to find the tag you need here and work out how to use it.

Text effects (inside paragraphs)

Tag	Does
`<em>`	Emphasis (usually italics)
`<strong>`	Strong importance (usually bold)
`<mark>`	Highlighted like a highlighter pen
`<small>`	Fine print
`<code>`	Computer-style text
`<kbd>`	Keyboard keys, like `Ctrl`
`<abbr title="...">`	Shows the full form of an abbreviation on hover

"Not taught" means no mini-lesson stops to cover the tag — it does not mean the tag is off limits. <em> and <strong> in particular show up inside sample paragraphs from Lesson 1 on. Read the row, work out how the tag is written, and use it whenever it fits.

Structure

Tag	Does
`<hr>`	A horizontal line across the page. No closing tag.
`<blockquote>`	A quotation, set apart from the text
`<table>` / `<tr>` / `<th>` / `<td>`	A table, made of rows, which hold header cells and data cells
`<figure>` + `<figcaption>`	An image with a caption attached
`<details>` + `<summary>`	A click-to-expand section — opens and closes with no JavaScript

Table starter

<table>
  <tr><th>Game</th><th>Difficulty</th></tr>
  <tr><td>Battletoads</td><td>9/10</td></tr>
</table>

Sound and video

Tag	Does
`<audio controls src="sounds/hit.mp3">`	Plays a sound file, with play/pause controls
`<video controls src="videos/clip.mp4">`	Plays a video file, with playback controls