HTML Reference Card

Page skeleton

01

Every HTML file starts with this shape. head holds page info the browser uses; body holds what people see.

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <!-- visible content goes here -->
  </body>
</html>

02

Headings show the page's outline — use them in order, not for making text big.

<h1>Page title</h1>
<h2>Section title</h2>
<p>A paragraph of text.</p>
<strong>bold</strong> <em>italic</em>

03

Unordered for no particular order, ordered when sequence matters.

<ul>
  <li>First item</li>
  <li>Second item</li>
</ul>

<ol>
  <li>Step one</li>
</ol>

04

Link text should describe the destination — never "click here."

<a href="page2.html">
  About us
</a>

<a href="https://example.com">
  External site
</a>

05

A relative path is directions from the file that contains the link — not from your project as a whole.

<!-- from pages/about.html -->
<a href="../index.html">Home</a
<a href="contact.html">Contact</a
<a href="about.html" aria-current="page">About</a

../ goes up one folder. Mark the current page with aria-current="page" plus a visible style — not one or the other.

06

alt is required — describe what the image shows, not just its filename.

<img
  src="cat.jpg"
  alt="Orange tabby cat">

07

div is a generic container for CSS & layout. Give it a class to style it.

<div class="card">
  <h2>Title</h2>
  <p>Text</p>
</div>

08

Same visual result as a div, but these names carry meaning — for assistive tech, search engines, and you.

<header>...</header>
<nav>...</nav>
<main>...</main>
<section>...</section>
<footer>...</footer>

One main per page. section needs its own heading. Use div only when nothing more specific fits.

09

Extra info inside the opening tag. class can repeat on many elements; id is unique to one.

<p class="warning">...

<div id="header">...

10

Notes for humans — the browser ignores them entirely.

<!-- TODO: add the nav bar -->
<p>Visible text</p>

11

Unclosed tagForgetting </li> pushes every item after it out of place.

Bad nesting<p><div></p></div> — tags must close in reverse order.

Missing quotessrc=cat.jpg breaks — attribute values need "quotes".