HTML Cheat Sheet

<!DOCTYPE html>

<html lang="en">

Use the language tag that matches the document content, such as en or es.

<head>

<body>

<div>

<span>

<link rel="stylesheet" href="style.css">

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

<template>

<h1> to <h6>

h1 is the highest level and h6 the lowest; use CSS for visual size.

<p>

<a href="url">

<a href="url" target="_blank" rel="noopener">

<strong> / <b>

strong marks importance; b draws attention without adding importance. Choose by meaning, not bold appearance.

<em> / <i>

em marks stress emphasis; i marks text set apart without that emphasis. Choose by meaning, not italic appearance.

<br>

<hr>

<ul>
  <li>Item</li>
</ul>

<ol>
  <li>Item</li>
</ol>

<blockquote>

<code> / <pre>

<mark>

<abbr title="Full Text">FT</abbr>

<form action="/submit" method="POST">

<input type="text" name="q" placeholder="Search">

<input type="email" required>

<input type="password">

<input type="number" min="0" max="100" step="1">

<input type="checkbox" checked>

<input type="radio" name="group" value="a">

<input type="file" accept="image/*" multiple>

accept is a file-picker hint, not validation. This control selects files; a form submission or JavaScript is needed to upload or process them.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contact</title>
</head>
<body>
  <main>
    <h1>Contact us</h1>
    <form action="/contact" method="post">
      <label for="email">Email</label>
      <input id="email" name="email" type="email" autocomplete="email" required>
      <button type="submit">Send</button>
    </form>
  </main>
</body>
</html>

Replace /contact with a real endpoint. This example does not receive or store submissions.

<input type="range" min="0" max="100">

<input type="date">

<input type="color">

<textarea rows="4" cols="50"></textarea>

<select>
  <option value="a">A</option>
</select>

<label for="email">Email</label>

<button type="submit">Send</button>

<fieldset>
  <legend>Title</legend>
</fieldset>

<datalist id="opts">
  <option value="A">
</datalist>

<img src="img.jpg" alt="Description" loading="lazy">

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

<video src="vid.mp4" controls autoplay muted></video>

<audio src="audio.mp3" controls></audio>

<iframe src="url" title="Embed"></iframe>

<canvas id="c" width="300" height="150"></canvas>

<svg viewBox="0 0 100 100">

<table>
  <thead>
    <tr><th>Name</th></tr>
  </thead>
  <tbody>
    <tr><td>John</td></tr>
  </tbody>
</table>

<th colspan="2">

<td rowspan="3">

<caption>Table Title</caption>

<header>

<nav>

<main>

<article>

<section>

<aside>

<footer>

<figure>
  <img src="" alt="">
  <figcaption>Caption</figcaption>
</figure>

<details>
  <summary>Click to expand</summary>
  Hidden content
</details>

<dialog open>Non-modal content</dialog>

The open attribute displays a non-modal dialog. Use showModal() in JavaScript when a modal dialog is intended.

<time datetime="2025-01-15">Jan 15</time>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta name="description" content="Page description">

<meta property="og:title" content="Title">

<meta name="robots" content="index, follow">

<link rel="icon" href="favicon.ico">

<link rel="canonical" href="url">

<title>Page Title</title>