← All cheat sheets

HTML5

Plain-text reference · 10 KB. Read it, search it (Ctrl-F) or print it.

DOCUMENT STRUCTURE#

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

SEMANTIC ELEMENTS#

<header>         Header section
<nav>            Navigation links
<main>           Main content (one per page)
<article>        Self-contained content
<section>        Thematic grouping
<aside>          Sidebar content
<footer>         Footer section
<figure>         Self-contained figure
<figcaption>     Figure caption
<mark>           Highlighted text
<time>           Date/time
<details>        Collapsible content
<summary>        Summary for details

HEADINGS & TEXT#

<h1> to <h6>     Headings
<p>              Paragraph
<br>             Line break
<hr>             Horizontal rule
<pre>            Preformatted text
<blockquote>     Block quotation
<q>              Inline quotation
<cite>           Citation
<abbr>           Abbreviation
<code>           Code snippet
<kbd>            Keyboard input
<samp>           Sample output
<var>            Variable
<small>          Small text
<strong>         Strong importance (bold)
<em>             Emphasis (italic)
<del>            Deleted text
<ins>            Inserted text
<sub>            Subscript
<sup>            Superscript

LISTS#

<!-- Unordered list -->
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

<!-- Ordered list -->
<ol start="1" type="1">  <!-- type: 1, A, a, I, i -->
    <li>First</li>
    <li>Second</li>
</ol>

<!-- Description list -->
<dl>
    <dt>Term</dt>
    <dd>Definition</dd>
</dl>
<a href="https://example.com">External link</a>
<a href="/page.html">Internal link</a>
<a href="#section">Anchor link</a>
<a href="mailto:email@example.com">Email link</a>
<a href="tel:+1234567890">Phone link</a>
<a href="file.pdf" download>Download link</a>
<a href="url" target="_blank" rel="noopener">New tab</a>

IMAGES#

<img src="image.jpg" alt="Description">
<img src="image.jpg" alt="Description" width="300" height="200">
<img src="image.jpg" alt="Description" loading="lazy">

<!-- Responsive images -->
<picture>
    <source media="(min-width: 800px)" srcset="large.jpg">
    <source media="(min-width: 400px)" srcset="medium.jpg">
    <img src="small.jpg" alt="Description">
</picture>

<img srcset="small.jpg 300w,
             medium.jpg 600w,
             large.jpg 900w"
     sizes="(max-width: 300px) 300px,
            (max-width: 600px) 600px,
            900px"
     src="medium.jpg"
     alt="Description">

TABLES#

<table>
    <caption>Table Caption</caption>
    <thead>
        <tr>
            <th scope="col">Header 1</th>
            <th scope="col">Header 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="2">Footer</td>
        </tr>
    </tfoot>
</table>

FORMS#

<form action="/submit" method="POST" enctype="multipart/form-data">
    <!-- Text inputs -->
    <input type="text" name="username" placeholder="Username" required>
    <input type="password" name="password" minlength="8">
    <input type="email" name="email" placeholder="email@example.com">
    <input type="tel" name="phone" pattern="[0-9]{10}">
    <input type="url" name="website">
    <input type="number" name="age" min="0" max="120" step="1">
    <input type="range" name="volume" min="0" max="100">
    <input type="date" name="date">
    <input type="time" name="time">
    <input type="datetime-local" name="datetime">
    <input type="month" name="month">
    <input type="week" name="week">
    <input type="color" name="color">
    <input type="search" name="search">
    <input type="hidden" name="token" value="abc123">
    <input type="file" name="file" accept=".pdf,.doc">
    <input type="file" name="files" multiple>

    <!-- Textarea -->
    <textarea name="message" rows="4" cols="50"></textarea>

    <!-- Select dropdown -->
    <select name="country">
        <optgroup label="Europe">
            <option value="de">Germany</option>
            <option value="fr" selected>France</option>
        </optgroup>
    </select>

    <!-- Checkboxes -->
    <input type="checkbox" id="agree" name="agree" value="yes">
    <label for="agree">I agree</label>

    <!-- Radio buttons -->
    <input type="radio" id="male" name="gender" value="male">
    <label for="male">Male</label>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">Female</label>

    <!-- Datalist -->
    <input list="browsers" name="browser">
    <datalist id="browsers">
        <option value="Chrome">
        <option value="Firefox">
        <option value="Safari">
    </datalist>

    <!-- Buttons -->
    <button type="submit">Submit</button>
    <button type="reset">Reset</button>
    <button type="button">Button</button>
    <input type="submit" value="Submit">
</form>

FORM ATTRIBUTES#

required                            # Field is required
disabled                            # Field is disabled
readonly                            # Field is read-only
autofocus                           # Focus on load
autocomplete="off"                  # Disable autocomplete
pattern="[A-Za-z]{3}"               # Regex pattern
minlength="5"                       # Minimum length
maxlength="100"                     # Maximum length
min="0"                             # Minimum value
max="100"                           # Maximum value
step="5"                            # Value increment
placeholder="Enter text"            # Placeholder text
multiple                            # Allow multiple values
accept=".jpg,.png"                  # Accepted file types

MEDIA ELEMENTS#

<!-- Audio -->
<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    Your browser does not support audio.
</audio>

<!-- Video -->
<video controls width="640" height="360" poster="thumbnail.jpg">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    <track src="subtitles.vtt" kind="subtitles" srclang="en" label="English">
    Your browser does not support video.
</video>

<!-- Media attributes -->
controls                            # Show controls
autoplay                            # Auto-play (muted required)
muted                               # Muted
loop                                # Loop playback
preload="auto|metadata|none"        # Preload behavior

EMBEDDED CONTENT#

<!-- iframe -->
<iframe src="page.html" width="600" height="400"
        sandbox="allow-scripts allow-same-origin"
        loading="lazy">
</iframe>

<!-- Canvas -->
<canvas id="myCanvas" width="400" height="300"></canvas>

<!-- SVG -->
<svg width="100" height="100">
    <circle cx="50" cy="50" r="40" fill="blue"/>
</svg>

<!-- Object -->
<object data="file.pdf" type="application/pdf" width="600" height="400">
    <p>PDF not supported</p>
</object>

<!-- Embed -->
<embed src="file.swf" type="application/x-shockwave-flash">

META TAGS#

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Page description">
<meta name="keywords" content="keyword1, keyword2">
<meta name="author" content="Author Name">
<meta name="robots" content="index, follow">
<meta http-equiv="refresh" content="30">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- Open Graph (Social Media) -->
<meta property="og:title" content="Title">
<meta property="og:description" content="Description">
<meta property="og:image" content="image.jpg">
<meta property="og:url" content="https://example.com">
<meta property="og:type" content="website">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Title">
<meta name="twitter:description" content="Description">
<meta name="twitter:image" content="image.jpg">

GLOBAL ATTRIBUTES#

id="unique-id"                      # Unique identifier
class="class1 class2"               # CSS classes
style="color: red;"                 # Inline styles
title="Tooltip text"                # Tooltip
data-*="value"                      # Custom data attributes
hidden                              # Hidden element
tabindex="0"                        # Tab order
contenteditable="true"              # Editable content
draggable="true"                    # Draggable element
lang="en"                           # Language
dir="ltr|rtl"                       # Text direction
spellcheck="true"                   # Spell checking

ACCESSIBILITY (ARIA)#

role="button"                       # Role
aria-label="Description"            # Accessible label
aria-labelledby="id"                # Label reference
aria-describedby="id"               # Description reference
aria-hidden="true"                  # Hidden from screen readers
aria-expanded="false"               # Expanded state
aria-pressed="false"                # Pressed state
aria-disabled="true"                # Disabled state
aria-live="polite"                  # Live region

SPECIAL CHARACTERS#

&nbsp;     Non-breaking space
&lt;       <
&gt;       >
&amp;      &
&quot;     "
&apos;     '
&copy;     (C)
&reg;      (R)
&trade;    TM
&euro;     Euro
&pound;    Pound
&yen;      Yen

TEMPLATE#

<template id="myTemplate">
    <div class="card">
        <h2></h2>
        <p></p>
    </div>
</template>

DIALOG#

<dialog id="myDialog">
    <h2>Dialog Title</h2>
    <p>Dialog content</p>
    <button onclick="this.closest('dialog').close()">Close</button>
</dialog>

PROGRESS & METER#

<progress value="70" max="100">70%</progress>
<meter value="0.7" min="0" max="1" low="0.3" high="0.7" optimum="0.8">70%</meter>

DETAILS & SUMMARY#

<details>
    <summary>Click to expand</summary>
    <p>Hidden content revealed on click.</p>
</details>

Defensive reference on CyberRamen. Offensive / red-team sheets live on OffensiveRamen.com.