HTML 5 cheatsheet

HTML 5: Page structure

5 common HTML 5 tasks.

Basic page

A complete HTML5 document with a language, character set and responsive viewport.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Page title</title>
  </head>
  <body>
    <h1>Hello</h1>
  </body>
</html>

Link a stylesheet

Load a CSS file from the head.

<link rel="stylesheet" href="/styles.css">

Load a script without blocking

defer downloads the script in parallel and runs it after the HTML is parsed.

<script src="/app.js" defer></script>

Use semantic landmarks

Structure the page with elements that screen readers and search engines understand.

<header>...</header>
<nav aria-label="Main">...</nav>
<main>
  <article>...</article>
  <aside>...</aside>
</main>
<footer>...</footer>

Write a comment

Leave a note that browsers do not display.

<!-- This is a comment -->

Was this page helpful?