HTML reference

Short entries with an example for each. When you need every detail, each entry links to the official documentation.

Filter the reference

HTML

<h1> to <h6>

Headings, from the most important (h1) to the least (h6). Use one h1 per page.

<h1>Recipes</h1>
<h2>Breakfast</h2>
<h3>Pancakes</h3>

Official docs

<p>

A paragraph of text.

<p>Fresh bread every morning.</p>

Official docs

<strong> and <em>

strong marks important words (bold); em adds spoken emphasis (italic).

<p>This is <strong>important</strong>, <em>really</em>.</p>

Official docs

<a>

A link. href says where it goes.

<a href="https://example.org">Visit</a>

Official docs

<img>

An image. Always add alt text that describes it.

<img src="cat.jpg" alt="A cat asleep on a chair">

Official docs

<ul>, <ol>, <li>

Bulleted and numbered lists. Each item is an li.

<ul>
  <li>Milk</li>
  <li>Eggs</li>
</ul>

Official docs

<table>, <tr>, <th>, <td>

A table of data: rows (tr) made of header (th) and data (td) cells.

<table>
  <tr><th>Day</th><th>Class</th></tr>
  <tr><td>Mon</td><td>Maths</td></tr>
</table>

Official docs

<div> and <span>

Plain containers: div for blocks, span for words inside a line.

<div class="card">Tea <span class="price">$3</span></div>

Official docs

<label> and <input>

An input box and the label that names it. Match for and id.

<label for="name">Name</label>
<input id="name">

Official docs

<select> and <option>

A dropdown list of choices.

<select>
  <option>Small</option>
  <option>Large</option>
</select>

Official docs

<button>

A clickable button. Inside a form it submits the form.

<button>Save</button>

Official docs

<header>, <nav>, <main>, <footer>

Page regions that say what each part is for, which helps screen readers and search engines.

<header><h1>Shop</h1></header>
<nav><a href="#">Home</a></nav>
<main><p>Welcome!</p></main>
<footer><p>Open daily</p></footer>

Official docs

<title> and <meta>

Page information in the head: the tab title, a search description and the phone viewport.

<head>
  <title>Sunny Bakes</title>
  <meta name="description" content="Fresh bread daily.">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

Official docs