A quick reference for the most commonly used HTML elements, attributes, and patterns. Bookmark this page for fast lookups.

Document structure

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Title</title>
  <meta name="description" content="Page description">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <!-- content -->
  <script src="app.js" defer></script>
</body>
</html>

Text elements

<h1> to <h6>   Headings (h1 = most important)
<p>            Paragraph
<strong>       Bold + semantic importance
<em>           Italic + semantic emphasis
<br>           Line break (use sparingly)
<hr>           Horizontal rule / thematic break
<blockquote>   Quoted text from another source
<code>         Inline code
<pre>          Preformatted / block code
<abbr>         Abbreviation with tooltip
<mark>         Highlighted text
<del>          Deleted text (strikethrough)
<ins>          Inserted text (underline)
<sup> <sub>   Superscript / subscript
<!-- Link -->
<a href="https://example.com" target="_blank" rel="noopener">Link text</a>

<!-- Image -->
<img src="photo.webp" alt="Description" width="800" height="600" loading="lazy">

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

Lists

<!-- Unordered -->
<ul>
  <li>Item one</li>
  <li>Item two</li>
</ul>

<!-- Ordered -->
<ol>
  <li>First step</li>
  <li>Second step</li>
</ol>

<!-- Definition -->
<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
</dl>

Tables

<table>
  <thead>
    <tr><th scope="col">Name</th><th scope="col">Role</th></tr>
  </thead>
  <tbody>
    <tr><td>Alice</td><td>Developer</td></tr>
  </tbody>
</table>

Forms

<form action="/submit" method="POST">
  <label for="name">Name</label>
  <input type="text" id="name" name="name" required placeholder="Your name">

  <label for="email">Email</label>
  <input type="email" id="email" name="email" required>

  <label for="msg">Message</label>
  <textarea id="msg" name="msg" rows="5"></textarea>

  <select name="role">
    <option value="">Choose role</option>
    <option value="dev">Developer</option>
  </select>

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

Semantic layout

<header>     Site header, logo, top nav
<nav>        Navigation links
<main>       Primary page content (one per page)
<article>    Self-contained content (blog post, card)
<section>    Thematic content group (needs heading)
<aside>      Sidebar / supplementary content
<footer>     Site footer
<figure>     Media with caption
<figcaption> Caption for figure
<time>       Machine-readable date/time
<address>    Contact information

Meta tags quick reference

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="150–160 char description">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://example.com/page">
<meta property="og:title" content="Title">
<meta property="og:description" content="Description">
<meta property="og:image" content="https://example.com/og.jpg">
<meta name="twitter:card" content="summary_large_image">