HTML5 Cheat Sheet

HTML5 Cheat Sheet

Core HTML5 elements grouped by purpose โ€” quick reference for printing or PDF.
Structure Icon
๐Ÿ“„ Document Structure
<!DOCTYPE html> <html> <head> <title> <meta> <link> <style> <script> <body>
Defines the overall HTML document, metadata, page title, styles, and scripts.
<!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <title>My Page</title> <link rel=”stylesheet” href=”style.css”> </head> <body> Content hereโ€ฆ </body> </html>
Layout Icon
๐Ÿ“ Layout & Page Sections
<header> <footer> <main> <section> <article> <aside> <nav> <h1>โ€“<h6> <address> <div>
Semantic blocks that structure a page into meaningful sections and layout areas.
<header> <h1>My Website</h1> <nav> <a href=”#”>Home</a> <a href=”#”>Contact</a> </nav> </header> <main> <article> <h2>Blog Post</h2> <p>Post content…</p> </article> </main> <footer>ยฉ 2025 My Website</footer>
Text Icon
โœ๏ธ Text & Content
<p> <hr> <pre> <blockquote> <ol> <ul> <li> <figure> <figcaption>
Basic building blocks for paragraphs, lists, quotations, and labelled figures.
<section> <h2>Ingredients</h2> <ul> <li>Flour</li> <li>Sugar</li> <li>Butter</li> </ul> <figure> <img src=”cake.jpg” alt=”Chocolate cake”> <figcaption>Finished chocolate cake.</figcaption> </figure> </section>
Inline Icon
๐Ÿ”ค Inline Text & Formatting
<a> <em> <strong> <span> <mark> <code> <sub> <sup> <br> <small> <abbr> <time>
Inline elements that style or annotate text without breaking the flow.
<p> Visit <a href=”https://example.com”>our site</a> for <strong>important</strong> updates released on <time datetime=”2025-01-01″>Jan 1, 2025</time>. </p> <p>Formula: H<sub>2</sub>O, E = mc<sup>2</sup></p>
Media Icon
๐ŸŽง Media & Embedded Content
<img> <audio> <video> <source> <track> <canvas> <svg> <iframe> <embed> <object> <picture>
Display images, audio, video, vector graphics, and other embedded content.
<picture> <source srcset=”photo-large.jpg” media=”(min-width: 800px)”> <img src=”photo-small.jpg” alt=”Landscape”> </picture> <video controls width=”320″> <source src=”movie.mp4″ type=”video/mp4″> Your browser does not support the video tag. </video>
Forms Icon
๐Ÿ“ฎ Forms & User Input
<form> <label> <input> <textarea> <select> <option> <fieldset> <legend> <button> <datalist> <progress> <meter>
Collect data from users through text fields, checkboxes, selects, and more.
<form action=”/submit” method=”post”> <fieldset> <legend>Contact</legend> <label for=”name”>Name:</label> <input id=”name” name=”name” type=”text” required> <label for=”msg”>Message:</label> <textarea id=”msg” name=”message”></textarea> <button type=”submit”>Send</button> </fieldset> </form>
Interactive Icon
โš™๏ธ Interactive & Scripting
<details> <summary> <dialog> <template> <slot> <script> <noscript>
Elements that support interactivity, modals, collapsible sections, and web components.
<details> <summary>Show advanced options</summary> <p>Extra settings go here…</p> </details> <dialog open> <p>This is a dialog box.</p> <button>OK</button> </dialog>
Tip: Print this page or export as PDF from your browser for a handy HTML5 reference sheet.