HTML 5 cheatsheet

HTML 5: Text, links and media

11 common HTML 5 tasks.

Write headings

Use one h1 per page, then h2 to h6 in order without skipping levels.

<h1>Page title</h1>
<h2>Section</h2>

Create a link

Link to a page. target="_blank" with rel="noopener" opens a new tab safely.

<a href="https://example.com" target="_blank" rel="noopener">Example</a>

Link to a section of the page

Give an element an id and link to it with a hash.

<h2 id="pricing">Pricing</h2>
<a href="#pricing">Jump to pricing</a>

Add an image

Always include alt text, and width and height to avoid layout shift. loading="lazy" defers off-screen images.

<img src="/photo.jpg" alt="A camel in the desert" width="800" height="600" loading="lazy">

Serve images for different screens

Let the browser choose the best size.

<img src="/photo-800.jpg" srcset="/photo-400.jpg 400w, /photo-800.jpg 800w, /photo-1600.jpg 1600w" sizes="(min-width: 800px) 800px, 100vw" alt="A camel">

Offer modern image formats

Use WebP or AVIF where supported, with a fallback.

<picture>
  <source srcset="/photo.avif" type="image/avif">
  <source srcset="/photo.webp" type="image/webp">
  <img src="/photo.jpg" alt="A camel">
</picture>

Make lists

Unordered, ordered and description lists.

<ul>
  <li>Apples</li>
  <li>Pears</li>
</ul>

<ol>
  <li>First</li>
  <li>Second</li>
</ol>

Embed a video

Play a video file with controls and a fallback message.

<video controls width="640" poster="/poster.jpg">
  <source src="/clip.mp4" type="video/mp4">
  Your browser does not support video.
</video>

Embed another page

Embed content lazily, and restrict what it can do with sandbox.

<iframe src="https://example.com/embed" title="Embedded content" loading="lazy" sandbox></iframe>

Add a collapsible section

Show and hide content with no JavaScript.

<details>
  <summary>More details</summary>
  <p>Hidden until opened.</p>
</details>

Create a modal dialog

Use the built-in dialog element. Call showModal() to open it and close() to close it.

<dialog id="confirm">
  <p>Are you sure?</p>
  <form method="dialog"><button>OK</button></form>
</dialog>