HTML Reference & Editable Examples

Document structure

The doctype selects standards mode. lang identifies the language; the viewport meta tag lets mobile browsers use the device width.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My typography page</title>
</head>
<body>
  <h1>Alice in Wonderland</h1>
  <p>A page begins with structure.</p>
</body>
</html>

Edit HTML

Try this → Change the page heading and the document title.

Headings H1–H6

Heading levels describe a hierarchy. Choose a level for its meaning, then use CSS for its size.

HTML

<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>

Edit HTML

Try this → Create a book title, chapter title and subsection using h1, h2 and h3.

Paragraphs

A p element groups a paragraph. Use separate paragraphs rather than repeated line breaks.

HTML

<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do.</p>
<p>So she was considering in her own mind.</p>

Edit HTML

Try this → Add a third paragraph.

Links

href gives the destination. Descriptive link text tells readers where a link leads. This preview demonstrates an in-page link.

HTML

<a href="#chapter">Read the chapter</a>
<h2 id="chapter">Down the Rabbit-Hole</h2>

Edit HTML

Try this → Change the ID and update the matching href.

Images

src points to an image; alt describes its purpose. Use alt="" for purely decorative images. This sample uses an embedded SVG so it works offline.

HTML

<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='120'%3E%3Crect width='300' height='120' fill='%23ff1493'/%3E%3Ctext x='20' y='80' font-size='64'%3EAa%3C/text%3E%3C/svg%3E" alt="Large black Aa letterforms on a pink background" width="300" height="120">

Edit HTML

Try this → Write a shorter alternative description that preserves the meaning.

Lists

ul groups unordered items; ol gives a numbered sequence. Each item belongs in li.

HTML

<ul>
  <li>HTML: structure</li>
  <li>CSS: appearance</li>
</ul>
<ol>
  <li>Write the markup</li>
  <li>Style the text</li>
</ol>

Edit HTML

Try this → Change the ordered list into your own three-step workflow.

Divs

A div is a neutral grouping element. Use it when there is no more meaningful HTML element.

HTML

<div class="book">
  <h2>Alice in Wonderland</h2>
  <p>Lewis Carroll</p>
</div>

Edit HTML

Try this → Add a second book group.

Sections

A section groups related content and should usually have a heading.

HTML

<section>
  <h2>Chapter one</h2>
  <p>Down the Rabbit-Hole</p>
</section>

Edit HTML

Try this → Add another section with its own heading.

Semantic elements

header, nav, main, article and footer describe their roles. Use one visible main landmark per page.

HTML

<header><p>Web for Type</p></header>
<nav aria-label="Contents"><a href="#story">Story</a></nav>
<main id="story">
  <article><h1>Alice</h1><p>A curious beginning.</p></article>
</main>
<footer>Lewis Carroll</footer>

Edit HTML

Try this → Add an aside with related reading.

Classes and IDs

Classes can repeat. An ID must be unique in the document and can be a link destination.

HTML

<h1 id="title" class="display">Alice</h1>
<p class="display">Down the Rabbit-Hole</p>

Edit HTML

Try this → Add a CSS editor rule in your own file that targets .display.

Linking CSS

Put link in the document head. href is relative to the HTML file. The preview uses an inline equivalent; create css/style.css when copying this into a project.

HTML

<!-- In the head of your own file: -->
<!-- <link rel="stylesheet" href="css/style.css"> -->
<h1>Alice</h1>

Edit HTML

Try this → Uncomment the link in your project and create the matching stylesheet.

Linking JavaScript

A script with defer waits for the document to be parsed before running. Keep the external path relative to your HTML file.

HTML

<!-- In your own document head: -->
<!-- <script src="js/script.js" defer></script> -->
<button type="button">Follow the rabbit</button>

Edit HTML

Try this → Create js/script.js and select the button with querySelector.

Basic accessibility

Use real buttons for actions, labels for inputs and meaningful headings. Keyboard focus must remain visible.

HTML

<label for="name">Your display text</label>
<input id="name" type="text" value="Alice">
<button type="button">Try tabbing to me</button>

Edit HTML

Try this → Navigate the preview using Tab and Shift+Tab.