HTML5 Reference

HTML5 Cheat Sheet

Essential tags, attributes, and semantic elements.

All Topics

Document & Metadata

<!DOCTYPE html>

Document type declaration — must be the very first line. Triggers standards mode in browsers.

Example: <!DOCTYPE html><html lang="en">

<html lang="en">

Root element. lang attribute helps screen readers and search engines identify language.

Example: <html lang="hi"> for Hindi

<meta charset="UTF-8">

Character encoding declaration. UTF-8 supports all languages. Must be within first 1024 bytes.

Example: <meta charset="UTF-8">

<meta name="viewport">

Controls layout on mobile browsers. width=device-width sets viewport to device width.

Example: <meta name="viewport" content="width=device-width, initial-scale=1">

<meta name="description">

SEO description shown in search engine results. Keep between 120-160 characters.

Example: <meta name="description" content="Learn coding at EzyCoders">

<meta property="og:...">

Open Graph tags for social media sharing previews (Facebook, LinkedIn, WhatsApp).

Example: <meta property="og:title" content="My Page">

<link rel="canonical">

Prevents duplicate content SEO penalty by pointing to the preferred URL version.

Example: <link rel="canonical" href="https://example.com/page">

<base href="...">

Sets the base URL for all relative links and form actions in the document.

Example: <base href="https://example.com/">

Semantic Sectioning

<header>

Introductory content or navigational aids. Can be used multiple times per page (e.g., in articles).

Example: <header><h1>Site Logo</h1><nav>...</nav></header>

<nav>

Major navigation block. Screen readers use this to provide page navigation shortcuts.

Example: <nav aria-label="Main"><ul><li><a href="/">Home</a></li></ul></nav>

<main>

The dominant unique content of the page. Only ONE <main> per page. Skip links target this.

Example: <main id="content">...unique content...</main>

<article>

Self-contained, independently distributable content (blog post, news article, comment).

Example: <article><h2>Post Title</h2><p>Content...</p></article>

<section>

Thematic grouping of content — should always have a heading. Not a generic container (use div).

Example: <section><h2>Contact</h2>...</section>

<aside>

Tangentially related content — sidebars, pull quotes, ad spaces, related links.

Example: <aside><h3>Related Posts</h3><ul>...</ul></aside>

<footer>

Footer for nearest sectioning ancestor. Can contain copyright, authorship, related links.

<address>

Contact information for the nearest article or body. Not for postal addresses in general.

Example: <address><a href="mailto:hi@site.com">hi@site.com</a></address>

Text & Inline Elements

<h1>–<h6>

Six heading levels. Only ONE <h1> per page for SEO. Don't skip levels (e.g., h2 then h4).

Example: <h1>Page Title</h1><h2>Section</h2>

<p>

Block-level paragraph. Browsers add default margin. Cannot contain block-level elements.

Example: <p>This is a paragraph of text.</p>

<strong> / <b>

<strong> = important text (semantic). <b> = stylistically bold with no extra importance.

Example: <strong>Warning:</strong> This will delete data.

<em> / <i>

<em> = stress emphasis (semantic). <i> = alternate voice (technical terms, foreign words).

Example: The word <i lang="la">et cetera</i> means "and so on".

<mark>

Highlighted/relevant text — search results highlight, document annotations.

Example: Search found <mark>JavaScript</mark> in 5 results.

<time datetime="...">

Machine-readable dates/times. Improves SEO and browser features like "add to calendar".

Example: <time datetime="2024-01-15T09:00">Jan 15th</time>

<abbr title="...">

Abbreviation or acronym. The title attribute provides the expansion on hover.

Example: <abbr title="HyperText Markup Language">HTML</abbr>

<sup> / <sub>

Superscript (footnotes, exponents) / Subscript (chemical formulas, math notation).

Example: E=mc<sup>2</sup>, H<sub>2</sub>O

Lists & Tables

<ul> / <ol> / <li>

Unordered (bullets) / Ordered (numbers) / List item. ol supports type and start attributes.

Example: <ol start="5" type="A"><li>Item F</li></ol>

<dl>, <dt>, <dd>

Description list — term/definition pairs. Great for glossaries, FAQs, metadata display.

Example: <dl><dt>API</dt><dd>Application Programming Interface</dd></dl>

<table>, <thead>, <tbody>

Structured data table. thead/tbody/tfoot provide semantic grouping and separate scroll.

Example: <table><thead><tr><th scope="col">Name</th></tr></thead></table>

<th scope="col|row">

Table header cell. scope attribute tells screen readers whether header applies to column or row.

Example: <th scope="colgroup" colspan="2">Q1 Results</th>

colspan / rowspan

Merge cells horizontally (colspan) or vertically (rowspan) across a specified number of cells.

Example: <td colspan="3">Spans 3 columns</td>

<caption>

Provides a title for the table. Helps screen reader users understand table purpose before reading.

Example: <caption>Monthly Revenue by Region</caption>

<colgroup> / <col>

Apply styling to entire columns without repeating classes on every <td>.

Example: <colgroup><col style="width:30%"><col span="2"></colgroup>

Forms & Inputs

<form action method>

Form container. action = submit URL, method = GET (query string) or POST (body). novalidate disables HTML5 validation.

Example: <form action="/submit" method="POST" novalidate>

<input type="...">

20+ input types: text, email, password, number, date, time, range, color, file, checkbox, radio, hidden.

Example: <input type="email" required autocomplete="email">

<label for="id">

Associates label with input — clicking label focuses input. Critical for accessibility.

Example: <label for="email">Email</label><input id="email" type="email">

<fieldset> / <legend>

Groups related form fields with a border. Legend provides the group's caption for screen readers.

Example: <fieldset><legend>Delivery Address</legend>...</fieldset>

<datalist id="...">

Provides autocomplete suggestions for a text input — browser shows dropdown of options.

Example: <input list="langs"><datalist id="langs"><option value="Python"></datalist>

required / pattern / minlength

Built-in HTML5 validation attributes — browser validates before form submission without JavaScript.

Example: <input pattern="[A-Z]{3}" minlength="3" maxlength="3" required>

autocomplete="..."

Hints browser autofill — values like "name", "email", "new-password", "current-password".

Example: <input type="password" autocomplete="new-password">

<output>

Represents the result of a calculation or user action — live result region for forms.

Example: <output for="a b" name="result">0</output>

Media & Embeds

<img src alt loading>

Always include alt (even empty for decorative). loading="lazy" defers off-screen images.

Example: <img src="hero.webp" alt="Team photo" loading="lazy" decoding="async">

<picture> / <source>

Art direction — serve different images for different screen sizes or format support.

Example: <picture><source type="image/avif" srcset="img.avif"><img src="img.jpg" alt="..."></picture>

srcset + sizes

Responsive images — browser selects best resolution based on screen DPR and viewport width.

Example: <img srcset="s.jpg 480w, l.jpg 1024w" sizes="(max-width:600px) 480px, 1024px" src="l.jpg" alt="">

<video controls preload>

Native video player. preload="none" saves bandwidth. Always add <track> for captions.

Example: <video controls muted loop preload="none"><source src="v.mp4" type="video/mp4"></video>

<audio controls>

Native audio player. Provide multiple source formats for browser compatibility.

Example: <audio controls><source src="bg.ogg" type="audio/ogg"><source src="bg.mp3"></audio>

<track kind="captions">

WebVTT subtitle/caption track for video. Required for accessibility compliance (WCAG).

Example: <track src="captions.vtt" kind="captions" srclang="en" label="English" default>

<iframe sandbox allow>

Embeds external page in sandbox. Restrict capabilities with sandbox attribute for security.

Example: <iframe src="..." sandbox="allow-scripts" loading="lazy"></iframe>

<canvas>

Scriptable bitmap canvas for 2D/WebGL graphics. Must set width/height as attributes, not CSS.

Example: <canvas id="c" width="800" height="400">Fallback text</canvas>

Accessibility (ARIA)

role="..."

Overrides or supplements native element semantics for screen readers. Use sparingly — prefer semantic HTML.

Example: <div role="alert" aria-live="assertive">Error!</div>

aria-label / aria-labelledby

Provide accessible name for elements. labelledby references another element's ID as the label.

Example: <button aria-label="Close modal">×</button>

aria-hidden="true"

Hides decorative elements (icons, separators) from the accessibility tree entirely.

Example: <i class="fas fa-star" aria-hidden="true"></i> 4.5 stars

aria-expanded / aria-controls

Indicate state of expandable elements (menus, accordions) and what element they control.

Example: <button aria-expanded="false" aria-controls="menu">Toggle</button>

aria-live="polite|assertive"

Announce dynamic content changes to screen readers. polite waits; assertive interrupts.

Example: <div aria-live="polite" id="status"></div> // update via JS

tabindex="0|-1"

0 = add to natural tab order. -1 = remove from tab order (focus via JS only). Avoid positive values.

Example: <div role="button" tabindex="0" onkeydown="...">Custom Button</div>

Skip navigation link

Visually hidden link to skip nav and jump to main content — critical for keyboard-only users.

Example: <a href="#main" class="skip-link">Skip to main content</a>

Advanced Elements & APIs

<details> / <summary>

Native disclosure widget — no JavaScript needed for show/hide toggle. Natively accessible.

Example: <details><summary>Show more</summary><p>Hidden content</p></details>

<dialog>

Native modal/non-modal dialog. Use .showModal() for modal. Built-in focus trap and backdrop.

Example: document.querySelector('dialog').showModal();

<template>

Inert HTML fragment — not rendered until cloned and inserted via JavaScript. Web Components base.

Example: const t = document.getElementById('tpl'); document.body.appendChild(t.content.cloneNode(true));

<slot>

Web Components slot — insertion point for custom element light DOM content.

Example: <my-card><span slot="title">Hello</span></my-card>

<script type="module">

ES modules in browsers — deferred by default, scoped, and CORS-strict. Enables import/export.

Example: <script type="module" src="app.js"></script>

<link rel="preload">

Instruct browser to fetch critical resources early — fonts, hero images, key scripts.

Example: <link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

<meta http-equiv="CSP">

Content Security Policy via meta tag — controls allowed resource origins to prevent XSS.

Example: <meta http-equiv="Content-Security-Policy" content="default-src 'self'">

data-* attributes

Custom data attributes for storing extra info on elements — accessible via dataset in JS.

Example: <button data-user-id="42" data-action="delete"> → el.dataset.userId

Quick Access