HTMLBEGINNER

HTML

HTML5 cheat sheet covering semantic elements, form controls, media tags, accessibility attributes, and modern markup best practices.

10 min read

html5semanticformsmediaaccessibilitycanvassvg

Loading your progress

Document Structure & Metadata

Essential HTML document structure and metadata tags

Basic HTML5 Document

Standard HTML5 document structure

css

<!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>
  <h1>Hello World</h1>
  <script src="script.js"></script>
</body>
</html>

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Page</title>
</head>
<body>
  <h1>Content</h1>
</body>
</html>

🟢 Essential - Every HTML page needs this structure

💡 DOCTYPE tells browser to use HTML5

📌 lang attribute helps screen readers

⚡ Put CSS in head, JS before </body>

⚠️ Always include viewport meta for mobile

structuredocumentessential

Meta Tags

Important metadata for SEO and browser behavior

html

<!-- Character encoding (required) -->
<meta charset="UTF-8">

<!-- Viewport (required for responsive) -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- SEO meta tags -->
<meta name="description" content="Page description (150-160 chars)">
<meta name="keywords" content="keyword1, keyword2">
<meta name="robots" content="index, follow">

<!-- Refresh/Redirect -->
<meta http-equiv="refresh" content="5;url=https://example.com">

<!-- Theme color (mobile browsers) -->
<meta name="theme-color" content="#4285f4">

🟢 Essential - Meta tags control how page appears

💡 Description shows in search results

📌 Open Graph controls social media previews

⚡ Theme color affects mobile browser UI

🔗 Related: schema.org for structured data

metaseometadata

Link Tags

Link external resources and define relationships

html

<!-- Stylesheets -->
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="print.css" media="print">

<!-- Favicon -->
<link rel="icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<!-- Preloading resources -->
<link rel="preload" href="font.woff2" as="font" crossorigin>
<link rel="prefetch" href="next-page.html">
<link rel="dns-prefetch" href="https://api.example.com">

💡 preload for critical resources needed soon

📌 prefetch for resources needed later

⚡ preconnect speeds up external connections

🟢 Essential for performance optimization

⚠️ Too many preloads can hurt performance

linkresourcesperformance

Semantic HTML5 Elements

Meaningful HTML5 elements for better structure and accessibility

Page Structure Elements

Main structural elements for page layout

css

<header>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
    </ul>
  </nav>
</header>

<main>
  <article>
    <h1>Article Title</h1>
    <p>Content...</p>
  </article>
  
  <aside>
    <h2>Related Links</h2>
    <ul>...</ul>
  </aside>
</main>

<footer>
  <p>&copy; 2024 Company Name</p>
</footer>

html

<body>
  <header>Site Header</header>
  <nav>Navigation</nav>
  <main>
    <article>Main Content</article>
    <aside>Sidebar</aside>
  </main>
  <footer>Site Footer</footer>
</body>

🟢 Essential - Semantic HTML improves SEO and accessibility

💡 main element should be unique per page

📌 header/footer can be used in articles too

⚡ Screen readers use these for navigation

🔗 Related: ARIA roles for enhanced accessibility

semanticstructureaccessibility

Content Sections

Organize content with semantic section elements

css

<!-- Article - independent content -->
<article>
  <h2>Blog Post Title</h2>
  <p>This is a complete, independent piece of content...</p>
</article>

<!-- Section - thematic grouping -->
<section>
  <h2>Chapter 1</h2>
  <p>Section content...</p>
</section>

<!-- Figure with caption -->
<figure>
  <img src="chart.png" alt="Sales chart">
  <figcaption>Q4 2024 Sales Results</figcaption>
</figure>

<!-- Details/Summary (collapsible) -->
<details>
  <summary>Click to expand</summary>
  <p>Hidden content here...</p>
</details>

html

<article>
  <h2>Article</h2>
  <section>
    <h3>Section 1</h3>
    <figure>
      <img src="img.jpg" alt="Description">
      <figcaption>Image caption</figcaption>
    </figure>
  </section>
  <section>
    <h3>Section 2</h3>
    <details>
      <summary>More info</summary>
      <p>Expandable content</p>
    </details>
  </section>
</article>

💡 article = standalone content (blog post, news)

📌 section = thematic grouping of content

🟢 Essential - Use figure for images with captions

⚡ details/summary creates native accordion

⚠️ Don't use section just for styling

semanticcontentsections

Text & Content Elements

Headings, paragraphs, and text formatting elements

Headings & Text

Basic text elements and hierarchy

css

<!-- Headings (h1-h6) -->
<h1>Main Page Title</h1>
<h2>Section Heading</h2>
<h3>Subsection</h3>
<h4>Sub-subsection</h4>
<h5>Minor Heading</h5>
<h6>Smallest Heading</h6>

<!-- Paragraphs and line breaks -->
<p>This is a paragraph of text.</p>
<p>Another paragraph with a<br>line break.</p>

<!-- Text formatting -->
<strong>Bold/Important text</strong>
<em>Italic/Emphasized text</em>
<mark>Highlighted text</mark>
<small>Small print</small>
<del>Deleted text</del>
<ins>Inserted text</ins>
<sub>Subscript</sub>
<sup>Superscript</sup>

html

<h1>Main Title</h1>
<p>This is <strong>bold</strong> and <em>italic</em> text.</p>
<p>H<sub>2</sub>O and x<sup>2</sup></p>
<p><mark>Highlighted</mark> and <del>deleted</del> text.</p>

🟢 Essential - Use semantic text elements

💡 Only one h1 per page for SEO

📌 strong vs b: semantic importance vs visual

⚡ Use code for inline code, pre for blocks

⚠️ Don't skip heading levels (h1→h3)

textheadingsformatting

Lists

Ordered, unordered, and description lists

css

<!-- Unordered list -->
<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

<!-- Ordered list -->
<ol>
  <li>Step one</li>
  <li>Step two</li>
  <li>Step three</li>
</ol>

<!-- Description list -->
<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>

html

<ul>
  <li>Unordered item</li>
</ul>
<ol>
  <li>Ordered item</li>
</ol>
<dl>
  <dt>Term</dt>
  <dd>Definition</dd>
</dl>

🟢 Essential - Lists organize related items

💡 ul for unordered, ol for ordered sequences

📌 dl for term-definition pairs (glossaries)

⚡ Lists can be nested multiple levels

🔗 Related: CSS list-style for custom bullets

listsuloldl

Links & Navigation

Hyperlinks and navigation elements

css

<!-- Basic links -->
<a href="https://example.com">External link</a>
<a href="/about">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>

<!-- Link attributes -->
<a href="https://example.com" target="_blank" rel="noopener">Open in new tab</a>
<a href="document.pdf" download>Download PDF</a>

<!-- Navigation -->
<nav aria-label="Main navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/products">Products</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

html

<nav>
  <a href="/">Home</a> |
  <a href="/about">About</a> |
  <a href="/contact">Contact</a>
</nav>

🟢 Essential - Links are the foundation of the web

💡 Use rel="noopener" for target="_blank" (security)

📌 aria-current="page" shows current location

⚡ Skip links improve keyboard navigation

⚠️ Make link text descriptive, not "click here"

linksnavigationanchor

Figure, Blockquote & Semantic Text

Semantic wrappers for images, quotes, and meaningful inline text

html

<!-- Figure with caption -->
<figure>
  <img src="chart.png" alt="Sales chart">
  <figcaption>Q4 2024 sales performance</figcaption>
</figure>

<!-- Blockquote -->
<blockquote cite="https://example.com">
  <p>The only way to do great work is to love what you do.</p>
  <cite>Steve Jobs</cite>
</blockquote>

💡 <figure> is not just for images — use it for code blocks, videos, diagrams, anything with a caption

⚡ <time datetime="..."> gives machines a parseable date — great for SEO and accessibility

📌 <dl> description lists are perfect for glossaries, FAQs, and key-value pairs

🟢 <mark> highlights text, <kbd> shows keyboard keys, <code> shows inline code — all semantic

figureblockquotesemantictext

Forms & Input Elements

Form controls and input types for user interaction

Basic Form Elements

Essential form controls and structure

css

<!-- Basic form structure -->
<form action="/submit" method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>
  
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  
  <label for="message">Message:</label>
  <textarea id="message" name="message" rows="4"></textarea>
  
  <button type="submit">Submit</button>
</form>

<!-- Input types -->
<input type="text" placeholder="Enter text">
<input type="password" placeholder="Password">
<input type="email" placeholder="email@example.com">
<input type="number" min="0" max="100">
<input type="checkbox" id="agree"> <label for="agree">I agree</label>
<input type="radio" name="choice" value="yes"> Yes
<input type="radio" name="choice" value="no"> No

html

<form>
  <input type="text" placeholder="Name">
  <input type="email" placeholder="Email">
  <select>
    <option>Option 1</option>
    <option>Option 2</option>
  </select>
  <textarea placeholder="Message"></textarea>
  <button type="submit">Submit</button>
</form>

🟢 Essential - Forms collect user input

💡 Always use labels for accessibility

📌 fieldset groups related inputs

⚠️ required attribute for client-side validation

⚡ novalidate disables browser validation

formsinputessential

HTML5 Input Types

Modern input types with built-in validation

css

<!-- Date and time inputs -->
<input type="date" name="birthday">
<input type="time" name="appointment">
<input type="datetime-local" name="meeting">
<input type="month" name="expiry">
<input type="week" name="week">

<!-- Numeric inputs -->
<input type="number" min="0" max="100" step="5">
<input type="range" min="0" max="100" value="50">

<!-- Contact inputs -->
<input type="email" multiple>
<input type="tel" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">
<input type="url" placeholder="https://example.com">

<!-- Other inputs -->
<input type="search" placeholder="Search...">
<input type="color" value="#ff0000">
<input type="file" accept="image/*" multiple>

html

<form>
  <input type="date" value="2024-01-01">
  <input type="time" value="14:30">
  <input type="color" value="#4285f4">
  <input type="range" min="0" max="100">
  <input type="file" accept=".pdf,.doc">
</form>

🟢 Essential - HTML5 inputs provide native validation

💡 date/time inputs have native pickers

📌 Use datalist for autocomplete suggestions

⚡ type="search" adds clear button

⚠️ Browser support varies for some types

html5inputforms

Form Grouping & Advanced Controls

Group form fields, add autocomplete suggestions, and show progress indicators

html

<!-- Fieldset groups related controls -->
<fieldset>
  <legend>Shipping Address</legend>
  <label>Street: <input type="text" name="street"></label>
  <label>City: <input type="text" name="city"></label>
</fieldset>

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

💡 <fieldset> + <legend> groups related inputs with a label — essential for form accessibility

⚡ <datalist> gives native autocomplete for free — no JavaScript library needed

📌 A disabled <fieldset> disables ALL controls inside it — great for locked sections

🟢 <progress> shows completion; <meter> shows a measurement with colored thresholds

fieldsetdatalistprogressmeter

Form Attributes

Important attributes for form controls

html

<!-- Input attributes: required (must fill), disabled (cannot edit), readonly (select not edit), autofocus (focus on load), autocomplete, pattern (regex validation) -->
<input type="text"
  required
  disabled
  readonly
  autofocus
  autocomplete="on"
  placeholder="Hint text"
  pattern="[A-Z]{3}"
  title="Three uppercase letters">

<!-- Form attributes: action (where to send), method (GET/POST), enctype (multipart for file uploads), autocomplete, novalidate (skip HTML5 validation) -->
<form
  action="/submit"
  method="POST"
  enctype="multipart/form-data"
  autocomplete="off"
  novalidate>

<!-- Button types -->
<button type="submit">Submit Form</button>
<button type="reset">Clear Form</button>
<button type="button">Just a Button</button>

💡 required, pattern, min/max for validation

📌 autocomplete helps users fill forms faster

⚠️ disabled fields don't submit with form

⚡ form attribute links inputs outside <form>

🟢 Essential for user experience and validation

attributesvalidationforms

Media & Graphics

Images, video, audio, and graphics elements

Images

Responsive and accessible image elements

css

<!-- Basic image -->
<img src="photo.jpg" alt="Description of image">

<!-- Responsive image -->
<img src="photo.jpg" 
     alt="Description"
     width="800" 
     height="600"
     loading="lazy">

<!-- Picture element for art direction -->
<picture>
  <source media="(min-width: 768px)" srcset="large.jpg">
  <source media="(min-width: 480px)" srcset="medium.jpg">
  <img src="small.jpg" alt="Responsive image">
</picture>

<!-- Responsive images with srcset -->
<img srcset="small.jpg 480w,
            medium.jpg 768w,
            large.jpg 1200w"
     sizes="(max-width: 480px) 100vw,
            (max-width: 768px) 50vw,
            33vw"
     src="medium.jpg"
     alt="Responsive image">

html

<figure>
  <img src="photo.jpg" alt="A beautiful sunset">
  <figcaption>Sunset over the mountains</figcaption>
</figure>

🟢 Essential - Always include alt text

💡 loading="lazy" defers offscreen images

📌 picture element for art direction

⚡ srcset for resolution switching

⚠️ Specify width/height to prevent layout shift

imagesmediaresponsive

Video & Audio

Multimedia elements with controls

css

<!-- Video element -->
<video controls width="640" height="360" poster="thumbnail.jpg">
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
  <p>Your browser doesn't support HTML5 video.</p>
</video>

<!-- Audio element -->
<audio controls>
  <source src="audio.ogg" type="audio/ogg">
  <source src="audio.mp3" type="audio/mpeg">
  <p>Your browser doesn't support HTML5 audio.</p>
</audio>

<!-- Video with attributes: controls, autoplay, muted (required for autoplay), loop, preload=none|metadata|auto -->
<video controls autoplay muted loop preload="metadata">
  <source src="video.mp4" type="video/mp4">
</video>

html

<video controls width="320" height="240">
  <source src="movie.mp4" type="video/mp4">
  <track kind="subtitles" src="subs.vtt" srclang="en" label="English">
  Your browser doesn't support video.
</video>

🟢 Essential - Provide multiple formats for compatibility

💡 Use poster for video thumbnail

📌 Track elements for subtitles/captions

⚠️ Autoplay requires muted attribute

⚡ preload="metadata" loads video info only

videoaudiomedia

Responsive Images

Serve optimized images for different screen sizes with picture, source, and srcset

html

<!-- srcset for different resolutions -->
<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
  sizes="(max-width: 600px) 400px, 800px"
  alt="Product photo"
  loading="lazy"
>

<!-- Picture for art direction -->
<picture>
  <source media="(max-width: 600px)" srcset="mobile.jpg">
  <source media="(max-width: 1200px)" srcset="tablet.jpg">
  <img src="desktop.jpg" alt="Hero image">
</picture>

💡 Use <picture> for art direction (different crops per breakpoint) and srcset for resolution switching

⚡ loading="lazy" defers offscreen images — massive performance win with zero JavaScript

📌 Set width and height attributes to prevent Cumulative Layout Shift (CLS)

🟢 Always provide a title attribute on iframes for accessibility — screen readers use it

picturesrcsetresponsiveiframelazy

Canvas & SVG

Graphics and drawing elements

css

<!-- Canvas for JavaScript drawing -->
<canvas id="myCanvas" width="400" height="300">
  Your browser doesn't support canvas.
</canvas>

<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = 'blue';
  ctx.fillRect(10, 10, 100, 100);
</script>

<!-- Inline SVG -->
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="80" fill="green" />
  <text x="100" y="100" text-anchor="middle" fill="white">SVG</text>
</svg>

<!-- SVG as image -->
<img src="graphic.svg" alt="SVG graphic">

html

<canvas id="canvas" width="200" height="100"></canvas>
<svg width="100" height="100">
  <rect x="10" y="10" width="80" height="80" fill="red"/>
</svg>

💡 Canvas for dynamic/interactive graphics

📌 SVG for scalable vector graphics

⚡ SVG better for icons, Canvas for games

🟢 Essential for data visualization

🔗 Related: WebGL for 3D graphics

canvassvggraphics

Tables

Structured tabular data presentation

Table Structure

Complete table with semantic elements

css

<!-- Basic table -->
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>30</td>
      <td>New York</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>25</td>
      <td>London</td>
    </tr>
  </tbody>
</table>

html

<table border="1">
  <caption>User Data</caption>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Footer</td>
    </tr>
  </tfoot>
</table>

🟢 Essential - Use semantic table elements

💡 scope attribute helps screen readers

📌 caption describes table purpose

⚡ colgroup for column styling

⚠️ Only use tables for tabular data, not layout

tablesdatastructure

Interactive & Web Components

Modern interactive HTML elements

Interactive Elements

Dialog, details, and other interactive elements

css

<!-- Details/Summary (accordion) -->
<details>
  <summary>Click to expand</summary>
  <p>This content is hidden by default and revealed when clicked.</p>
</details>

<!-- Dialog (modal) -->
<dialog id="myDialog">
  <h2>Dialog Title</h2>
  <p>Dialog content goes here.</p>
  <button onclick="this.closest('dialog').close()">Close</button>
</dialog>
<button onclick="document.getElementById('myDialog').showModal()">
  Open Dialog
</button>

<!-- Progress and meter -->
<progress value="70" max="100">70%</progress>
<meter value="6" min="0" max="10" low="3" high="7" optimum="9">
  6 out of 10
</meter>

html

<details open>
  <summary>Expanded by default</summary>
  <p>Content visible on load</p>
</details>

<dialog open>
  <p>Visible dialog</p>
  <button>Close</button>
</dialog>

<progress value="50" max="100"></progress>
<meter value="0.6">60%</meter>

🟢 Essential - Native interactive elements

💡 dialog element for modals without JS libraries

📌 details/summary for native accordions

⚡ template for reusable HTML fragments

🔗 Related: Web Components for custom elements

interactivedialogdetails

Dialog (Native Modal)

Native modal and non-modal dialogs without JavaScript libraries

html

<!-- Modal dialog -->
<dialog id="confirm-dialog">
  <h2>Confirm Action</h2>
  <p>Are you sure you want to proceed?</p>
  <form method="dialog">
    <button value="cancel">Cancel</button>
    <button value="confirm">Confirm</button>
  </form>
</dialog>

<button onclick="document.getElementById('confirm-dialog').showModal()">
  Open Modal
</button>

💡 <dialog> with showModal() gives you backdrop, focus trapping, and Escape-to-close for free

⚡ form method="dialog" auto-closes the dialog on submit — no JavaScript close handler needed

📌 Style the backdrop with dialog::backdrop — supports background, blur, and animations

🟢 Replaces most uses of modal libraries — native, accessible, and lightweight

dialogmodalinteractive

Template & Web Components

Reusable HTML templates and Web Component building blocks

html

<!-- Template (not rendered until cloned) -->
<template id="card-template">
  <div class="card">
    <h2 class="card-title"></h2>
    <p class="card-body"></p>
  </div>
</template>

<script>
  const template = document.getElementById('card-template');
  const clone = template.content.cloneNode(true);
  clone.querySelector('.card-title').textContent = 'Hello';
  document.body.appendChild(clone);
</script>

💡 <template> content is parsed but NOT rendered — use cloneNode to stamp out copies

⚡ Templates are perfect for list items, table rows, and any repeated HTML structures

📌 <slot> lets consumers inject content into Web Components — named slots target specific areas

🟢 Web Components (custom elements + shadow DOM + templates) work in all modern browsers

templateslotweb-components

Accessibility

Make HTML accessible with ARIA attributes and semantic best practices

ARIA & Accessible HTML

Essential ARIA attributes and semantic patterns for accessible web pages

html

<!-- Label elements properly -->
<label for="email">Email:</label>
<input type="email" id="email" aria-required="true">

<!-- Describe with ARIA -->
<button aria-label="Close dialog">×</button>

<!-- Hide decorative content -->
<img src="divider.png" alt="" aria-hidden="true">

<!-- Live regions for dynamic updates -->
<div role="alert">Form submitted successfully!</div>

💡 The best ARIA is no ARIA — use semantic HTML elements first (button, nav, main, label)

⚡ aria-label is for elements with no visible text; aria-labelledby points to existing text

📌 Always use alt="" (empty) for decorative images — missing alt is an accessibility violation

🟢 aria-live="polite" announces changes without interrupting; "assertive" interrupts immediately

ariaaccessibilitya11y

Global HTML Attributes

Common attributes that work on any HTML element

html

<div id="unique-id">Unique identifier</div>
<div class="card highlighted">CSS classes</div>
<div data-user-id="123" data-role="admin">Custom data</div>
<div hidden>Not displayed</div>
<div contenteditable="true">Editable text</div>
<div draggable="true">Drag me</div>

💡 data-* attributes store custom data on elements — access via element.dataset in JavaScript

⚡ Use hidden instead of CSS display:none when you want to toggle visibility with JS

📌 tabindex="0" makes any element focusable; tabindex="-1" makes it programmatically focusable only

🟢 The lang attribute helps screen readers pronounce content correctly — set it on <html> at minimum

attributesdataglobal

HTML

Table of Contents

Document Structure & Metadata

Semantic HTML5 Elements

Text & Content Elements

Forms & Input Elements

Media & Graphics

Tables

Interactive & Web Components

Accessibility