HTML5 Cheat Sheet

2 min readAug 12, 2023

Document Declaration and Basic Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title of the document</title>
</head>
<body>
    Content of the document
</body>
</html>

Headings

<h1> to <h6> - Define headings (h1 is the largest)

Paragraphs and Text Formatting

<p>Paragraph</p>
<strong>Bold text</strong>
<em>Italic text</em>
<sub>Subscript</sub>
<sup>Superscript</sup>

Links and Images

<a href="url">Link text</a>
<img src="image.jpg" alt="Description">

Lists

<!-- Unordered List -->
<ul>
    <li>Item</li>
</ul>

<!-- Ordered List -->
<ol>
    <li>Item</li>
</ol>

<!-- Description List -->
<dl>
    <dt>Term</dt>
    <dd>Definition</dd>
</dl>

Tables

<table>
    <thead>
        <tr>
            <th>Header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Data</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Footer</td>
        </tr>
    </tfoot>
</table>

Forms

<form action="/submit" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    <input type="submit" value="Submit">
</form>

New Semantic Elements

<article>, <aside>, <details>, <figcaption>, <figure>, <footer>, <header>, <main>, <mark>, <nav>, <section>, <summary>, <time>

Multimedia

<!-- Video -->
<video src="video.mp4" controls></video>

<!-- Audio -->
<audio src="audio.mp3" controls></audio>

Canvas and SVG

<canvas id="myCanvas" width="200" height="100"></canvas>
<svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

Global Attributes

class, id, style, title, data-*, etc.

This cheat sheet covers a wide range of HTML5 elements and attributes, including document structure, text formatting, links, images, lists, tables, forms, new semantic elements, multimedia, and more. It can be a handy reference for both beginners and experienced developers. If you need further details or specific examples, please let me know!