Mr. Penney / TAS1O / HTML · CSS · JS

HTML Reference

Your map of the tags. The top half is what we cover in class. The bottom half — the Explorer Zone — is Level 4 territory: tags nobody will teach you, because finding them yourself is the skill.

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

Tag What it is Example
<h1> … <h6> Headings, biggest to smallest <h1>My Site</h1>
<p> Paragraph <p>Words go here.</p>
<ul> / <ol> / <li> Bullet list / numbered list / one item <ul><li>First</li></ul>
<a> A link — href is the destination <a href="https://example.com">Go</a>
<a href="#id"> A link that jumps to an element on THIS page <a href="#games">Games</a>
<img> An image — src points at the file, alt describes it <img src="images/cat.png" alt="A cat mid-yawn">
<section> One chunk of your page, usually with an id <section id="games">…</section>
<header> / <nav> / <main> / <footer> The anatomy of a real page (Major 1's lesson) —
<button> A clickable button (comes alive on Day 14) <button id="go-button">Go</button>
<input> A box users type into (Day 15) <input id="user-input" type="text">
<div> / <span> Plain boxes with no meaning — for styling <div class="card">…</div>

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">Why Pixels Win</a>
        <a href="#hard">Hall of Pain</a>
      </nav>
    </header>

    <main>
      <section id="pixels">
        <h2>Why Pixels Win</h2>
        <p>Pixel art never ages. A <strong>perfect</strong> sprite still looks perfect.</p>
        <img src="images/sprite.png" alt="A 16-bit hero sprite with sword raised">
      </section>

      <section id="hard">
        <h2>Hall of Pain</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: skeleton → header with a nav → main with two sections → footer. Every tag in the table above appears somewhere in there.

🔭 Explorer Zone

Nobody teaches you these. That's the point.

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-looking text

Structure

Tag Does
<hr> A horizontal line across the page. No closing tag! <hr> and done.
<blockquote> A quotation, set apart from the text
<table> / <tr> / <th> / <td> A real table: table → rows → header cells / data cells
<figure> + <figcaption> An image with a caption attached
<details> + <summary> A click-to-expand section — no JavaScript needed!

Table starter (because tables are fiddly)

<table>
  <tr><th>Game</th><th>Rating</th></tr>
  <tr><td>Battletoads</td><td>Pain/10</td></tr>
</table>

Deep cuts (show-off tier)

<audio controls src="..."> plays sound. <video controls src="..."> plays video. <kbd> shows keyboard keys like Ctrl. <abbr title="..."> explains abbreviations on hover.