742 commands · 48 cheat sheets · 6 subcategories
HTML master quick reference — Page 2
Browse 171 commands from 12 focused cheat sheets on page 2 of 4. Each example opens its matching detailed section.
Forms and Interaction · 13 commands
HTML contenteditable and Editing Events Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| Create a rich-text host | <div contenteditable="true" aria-label="Post body">
</div> | View examples |
| Create a plain-text host | <div
contenteditable="plaintext-only"
aria-label="Summary">
</div> | View examples |
| Opt out inside a host | <span contenteditable="false">Locked token</span> | View examples |
| Inspect effective state | editor.isContentEditable | View examples |
| Observe editing intent | editor.addEventListener('beforeinput', handleBeforeInput) | View examples |
| Read operation type | event.inputType === 'insertText' | View examples |
| React after mutation | editor.addEventListener('input', saveDraft) | View examples |
| Read plain text | const value = editor.textContent | View examples |
| Set trusted plain text | editor.replaceChildren(document.createTextNode(value)) | View examples |
| Focus a nested host | <div contenteditable="true" tabindex="0"></div> | View examples |
| Suggest a keyboard | <div
contenteditable="plaintext-only"
inputmode="numeric">
</div> | View examples |
| Request spellchecking | <div contenteditable="true" spellcheck="true"></div> | View examples |
| Render saved text safely | preview.textContent = savedValue | View examples |
Forms and Interaction · 15 commands
HTML Disclosures, Dialogs, and Popovers Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| Create a disclosure | <details>
<summary>More options</summary>
<p>Details</p>
</details> | View examples |
| Open initially | <details open>
<summary>Status</summary>
<p>Ready</p>
</details> | View examples |
| Group disclosures | <details name="faq">
<summary>Question</summary>
<p>Answer</p>
</details> | View examples |
| Declare a dialog | <dialog id="settings"><p>Settings</p></dialog> | View examples |
| Open modally | document.querySelector('#settings').showModal() | View examples |
| Open non-modally | document.querySelector('#settings').show() | View examples |
| Close with a result | document.querySelector('#settings').close('saved') | View examples |
| Submit and close | <form method="dialog">
<button value="cancel">Cancel</button>
</form> | View examples |
| Style the modal backdrop | dialog::backdrop { background: rgb(0 0 0 / 55%); } | View examples |
| Declare an auto popover | <div id="help" popover>Helpful text</div> | View examples |
| Toggle declaratively | <button popovertarget="help">Help</button> | View examples |
| Choose an action | <button popovertarget="help" popovertargetaction="show">
Show help
</button> | View examples |
| Keep a popover open | <div id="status" popover="manual">Saved</div> | View examples |
| Show with JavaScript | document.querySelector('#status').showPopover() | View examples |
| Style an open popover | [popover]:popover-open { opacity: 1; } | View examples |
Forms and Interaction · 13 commands
HTML Drag and Drop and DataTransfer Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| Make a source draggable | <li draggable="true" data-item-id="task-42">
Review draft
</li> | View examples |
| Write a typed payload | event.dataTransfer.setData('application/x-task-id', taskId) | View examples |
| Limit source operations | event.dataTransfer.effectAllowed = 'move' | View examples |
| Set drag feedback | event.dataTransfer.setDragImage(preview, 16, 16) | View examples |
| Accept drag entry | zone.addEventListener('dragenter', event => event.preventDefault()) | View examples |
| Enable dropping | zone.addEventListener('dragover', event => event.preventDefault()) | View examples |
| Show copy feedback | event.dataTransfer.dropEffect = 'copy' | View examples |
| Inspect offered formats | event.dataTransfer.types.includes('text/plain') | View examples |
| Inspect transfer items | [...event.dataTransfer.items].some(item => item.kind === 'file') | View examples |
| Read dropped text | const id = event.dataTransfer.getData('application/x-task-id') | View examples |
| Complete a custom drop | event.preventDefault() | View examples |
| Clean up after dragging | source.addEventListener('dragend', () => source.classList.remove('dragging')) | View examples |
| Offer a button alternative | <button type="button" data-action="move">
Move to Done
</button> | View examples |
Forms and Interaction · 15 commands
HTML Forms Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| Submit with POST | <form action="/submit" method="post"></form> | View examples |
| Submit with GET | <form action="/search" method="get"></form> | View examples |
| Label a control | <label for="email">Email</label> | View examples |
| Describe a control | <input aria-describedby="email-help"> | View examples |
| Collect an email | <input type="email" name="email"> | View examples |
| Collect a phone number | <input type="tel" name="phone"> | View examples |
| Enable autofill | <input name="email" autocomplete="email"> | View examples |
| Create a choice list | <select name="role"></select> | View examples |
| Add a select option | <option value="developer">Developer</option> | View examples |
| Require a value | <input name="email" required> | View examples |
| Limit text length | <input name="username" minlength="3" maxlength="20"> | View examples |
| Require a pattern | <input name="username" pattern="[A-Za-z0-9_]+"> | View examples |
| Submit the form | <button type="submit">Save profile</button> | View examples |
| Run a custom action | <button type="button">Preview</button> | View examples |
| Reset form fields | <button type="reset">Reset fields</button> | View examples |
Forms and Interaction · 14 commands
Pointer Events and Gesture Handling Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| Start pointer input | surface.addEventListener('pointerdown', beginGesture) | View examples |
| Check the primary pointer | if (!event.isPrimary) return | View examples |
| Adapt to pointer type | const kind = event.pointerType | View examples |
| Declare handled gestures | touch-action: pan-y pinch-zoom; | View examples |
| Cancel a supported default | if (event.cancelable) event.preventDefault() | View examples |
| Capture an active pointer | surface.setPointerCapture(event.pointerId) | View examples |
| Release pointer capture | surface.releasePointerCapture(pointerId) | View examples |
| Handle lost capture | surface.addEventListener('lostpointercapture', cancelGesture) | View examples |
| Track active contacts | activePointers.set(event.pointerId, { x: event.clientX, y: event.clientY }) | View examples |
| Read normalized pressure | const pressure = event.pressure | View examples |
| Read coalesced samples | const samples = event.getCoalescedEvents?.() ?? [event] | View examples |
| Handle raw updates conditionally | surface.addEventListener('pointerrawupdate', drawSamples) | View examples |
| Handle gesture cancellation | surface.addEventListener('pointercancel', cancelGesture) | View examples |
| Remove gesture listeners | controller.abort() | View examples |
Media and Embedding · 15 commands
Fullscreen and Picture-in-Picture API Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| Enter fullscreen | await panel.requestFullscreen() | View examples |
| Prefer hidden browser UI | await panel.requestFullscreen({ navigationUI: 'hide' }) | View examples |
| Exit fullscreen | await document.exitFullscreen() | View examples |
| Read active element | const active = document.fullscreenElement | View examples |
| Check availability | if (document.fullscreenEnabled) enableButton() | View examples |
| Observe state change | document.addEventListener('fullscreenchange', syncFullscreenUI) | View examples |
| Observe request errors | panel.addEventListener('fullscreenerror', reportFailure) | View examples |
| Style the fullscreen element | .viewer:fullscreen { inline-size: 100%; block-size: 100%; } | View examples |
| Style fullscreen backdrop | .viewer::backdrop { background: #000; } | View examples |
| Delegate both features | <iframe
src="/player"
allow="fullscreen; picture-in-picture">
</iframe> | View examples |
| Enter video PiP | const pipWindow = await video.requestPictureInPicture() | View examples |
| Exit video PiP | await document.exitPictureInPicture() | View examples |
| Read active PiP video | const active = document.pictureInPictureElement | View examples |
| Observe PiP entry | video.addEventListener('enterpictureinpicture', syncPipUI) | View examples |
| Discourage video PiP | <video controls disablepictureinpicture></video> | View examples |
Media and Embedding · 17 commands
HTML Audio and Video Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| Embed controlled video | <video controls width="960" height="540" src="demo.mp4">
</video> | View examples |
| Embed controlled audio | <audio controls src="episode.mp3"></audio> | View examples |
| Show a poster image | <video controls poster="poster.jpg" src="demo.mp4">
</video> | View examples |
| Offer alternate formats | <source src="demo.webm" type="video/webm"> | View examples |
| Provide legacy fallback content | <video controls>
<a href="demo.mp4">Download the video</a>
</video> | View examples |
| Add captions | <track
kind="captions"
src="captions-en.vtt"
srclang="en"
label="English"
default> | View examples |
| Add translated subtitles | <track
kind="subtitles"
src="subtitles-pt.vtt"
srclang="pt-BR"
label="Português"> | View examples |
| Link a transcript | <a href="transcript.html">Read the transcript</a> | View examples |
| Hint metadata loading | <video controls preload="metadata" src="demo.mp4">
</video> | View examples |
| Defer media loading | <audio controls preload="none" src="episode.mp3">
</audio> | View examples |
| Request inline playback | <video controls playsinline src="demo.mp4"></video> | View examples |
| Request muted autoplay | <video autoplay muted playsinline src="ambient.mp4">
</video> | View examples |
| Size video responsively | video { max-inline-size: 100%; block-size: auto; } | View examples |
| Reserve media space | video { aspect-ratio: 16 / 9; inline-size: 100%; } | View examples |
| Pause with JavaScript | document.querySelector('video').pause(); | View examples |
| Request playback | await video.play(); | View examples |
| Seek to a time | video.currentTime = 30; | View examples |
Media and Embedding · 11 commands
HTML Canvas and Inline SVG Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| Declare a canvas | <canvas id="chart" width="640" height="360">
Chart data is listed below.
</canvas> | View examples |
| Get a 2D context | const context = canvas.getContext('2d') | View examples |
| Clear the bitmap | context.clearRect(0, 0, canvas.width, canvas.height) | View examples |
| Draw a filled rectangle | context.fillRect(20, 20, 120, 60) | View examples |
| Scale for device pixels | canvas.width = Math.round(cssWidth * devicePixelRatio) | View examples |
| Declare responsive SVG | <svg
viewBox="0 0 100 100"
role="img"
aria-labelledby="title">
<title id="title">Chart</title>
</svg> | View examples |
| Draw a circle | <circle cx="50" cy="50" r="40" fill="steelblue" /> | View examples |
| Draw an SVG path | <path d="M10 90 L50 10 L90 90 Z" /> | View examples |
| Hide decorative SVG | <svg aria-hidden="true" focusable="false">...</svg> | View examples |
| Caption a graphic | <figure>
<svg role="img">...</svg>
<figcaption>Quarterly revenue.</figcaption>
</figure> | View examples |
| Inherit text color | <path fill="currentColor" d="..." /> | View examples |
Media and Embedding · 15 commands
HTML iframes Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| Embed a page | <iframe src="/preview" title="Document preview">
</iframe> | View examples |
| Reserve space | <iframe
src="/chart"
title="Sales chart"
width="800"
height="450">
</iframe> | View examples |
| Fit the container | iframe { inline-size: 100%; block-size: auto; aspect-ratio: 16 / 9; } | View examples |
| Defer off-screen loading | <iframe loading="lazy" src="/map" title="Office map">
</iframe> | View examples |
| Limit referrer data | <iframe
referrerpolicy="strict-origin"
src="https://example.com"
title="Example">
</iframe> | View examples |
| Apply all sandbox restrictions | <iframe
sandbox
src="/untrusted"
title="Untrusted preview">
</iframe> | View examples |
| Allow scripts only | <iframe
sandbox="allow-scripts"
src="https://widgets.example"
title="Widget">
</iframe> | View examples |
| Allow form submission | <iframe
sandbox="allow-forms"
src="/survey"
title="Survey">
</iframe> | View examples |
| Allow fullscreen | <iframe
allow="fullscreen"
src="/player"
title="Video player">
</iframe> | View examples |
| Deny camera and microphone | <iframe
allow="camera 'none'; microphone 'none'"
src="/widget"
title="Widget">
</iframe> | View examples |
| Embed inline HTML | <iframe srcdoc="<p>Preview</p>" title="Inline preview">
</iframe> | View examples |
| Name a navigation target | <iframe name="report" title="Generated report"></iframe> | View examples |
| Open a link in a frame | <a href="/report" target="report">Load report</a> | View examples |
| Send a cross-window message | frame.contentWindow.postMessage({ type: 'ready' }, 'https://widget.example') | View examples |
| Validate a received message | if (event.origin !== 'https://widget.example') return | View examples |
Media and Embedding · 15 commands
HTML Responsive Images Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| Embed an image | <img
src="team.jpg"
alt="The product team in the studio"> | View examples |
| Hide a decorative image | <img src="divider.svg" alt=""> | View examples |
| Reserve image space | <img
src="portrait.jpg"
alt="Ada Lovelace"
width="800"
height="1000"> | View examples |
| Lazy-load an image | <img
src="gallery-4.jpg"
alt="Mountain lake at sunrise"
loading="lazy"
width="1200"
height="800"> | View examples |
| Request async decoding | <img
src="chart.png"
alt="Quarterly revenue increased each month"
decoding="async"
width="960"
height="540"> | View examples |
| Prioritize a key image | <img
src="hero.jpg"
alt="Developer workspace"
fetchpriority="high"
width="1600"
height="900"> | View examples |
| Offer density variants | <img
src="logo.png"
srcset="logo.png 1x, logo@2x.png 2x"
alt="Northwind"
width="240"
height="80"> | View examples |
| Offer width variants | <img
src="trail-800.jpg"
srcset="trail-480.jpg 480w, trail-800.jpg 800w, trail-1280.jpg 1280w"
alt="Forest trail"> | View examples |
| Describe the image slot | <img
src="trail-800.jpg"
srcset="trail-480.jpg 480w, trail-800.jpg 800w, trail-1280.jpg 1280w"
sizes="(max-width: 600px) 100vw, 50vw"
alt="Forest trail"> | View examples |
| Offer a modern format | <picture>
<source srcset="portrait.avif" type="image/avif">
<img src="portrait.jpg" alt="Ada at her desk">
</picture> | View examples |
| Offer several formats | <picture>
<source srcset="hero.avif" type="image/avif">
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="City skyline">
</picture> | View examples |
| Change the crop | <picture>
<source
media="(max-width: 600px)"
srcset="speaker-close.jpg">
<img
src="speaker-wide.jpg"
alt="Speaker presenting on stage">
</picture> | View examples |
| Combine media and widths | <picture>
<source
media="(min-width: 900px)"
srcset="banner-1200.jpg 1200w, banner-1800.jpg 1800w"
sizes="80vw">
<img src="banner-720.jpg" alt="Conference attendees">
</picture> | View examples |
| Caption an image | <figure>
<img
src="diagram.svg"
alt="Request flow from browser to server">
<figcaption>Figure 1: Request lifecycle</figcaption>
</figure> | View examples |
| Label an image link | <a href="/reports/">
<img
src="report-cover.jpg"
alt="Open the annual report">
</a> | View examples |
Media and Embedding · 14 commands
Media Capture and Screen Sharing Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| Request camera and microphone | const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true }) | View examples |
| Prefer a video size | video: { width: { ideal: 1280 }, height: { ideal: 720 } } | View examples |
| Require a facing mode | await track.applyConstraints({ facingMode: { exact: 'environment' } }) | View examples |
| Inspect active settings | const settings = track.getSettings() | View examples |
| Detect constraint names | const supported = navigator.mediaDevices.getSupportedConstraints() | View examples |
| List media devices | const devices = await navigator.mediaDevices.enumerateDevices() | View examples |
| Watch device changes | navigator.mediaDevices.addEventListener('devicechange', refreshDevices) | View examples |
| Prompt for a display surface | const display = await navigator.mediaDevices.getDisplayMedia({ video: true, audio: true }) | View examples |
| Delegate display capture | <iframe
src="https://tools.example"
allow="display-capture">
</iframe> | View examples |
| Mute outgoing media | track.enabled = false | View examples |
| Release a source | stream.getTracks().forEach(track => track.stop()) | View examples |
| Handle external termination | track.addEventListener('ended', handleShareEnded, { once: true }) | View examples |
| Record supported media | const recorder = new MediaRecorder(stream, { mimeType }) | View examples |
| Preview captured media | video.srcObject = stream; await video.play() | View examples |
Media and Embedding · 14 commands
Web Audio API Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| Create an audio context | const context = new AudioContext({ latencyHint: 'interactive' }) | View examples |
| Resume after user activation | await context.resume() | View examples |
| Release the context | await context.close() | View examples |
| Connect a media element | const source = context.createMediaElementSource(audioElement) | View examples |
| Play an AudioBuffer | const source = new AudioBufferSourceNode(context, { buffer }); source.start() | View examples |
| Decode fetched audio | const buffer = await context.decodeAudioData(await response.arrayBuffer()) | View examples |
| Control level | const gain = new GainNode(context, { gain: 0.5 }) | View examples |
| Connect graph nodes | source.connect(gain).connect(context.destination) | View examples |
| Remove graph routing | source.disconnect() | View examples |
| Schedule a gain ramp | gain.gain.linearRampToValueAtTime(1, context.currentTime + 0.2) | View examples |
| Replace future automation | gain.gain.cancelAndHoldAtTime(context.currentTime) | View examples |
| Read waveform samples | analyser.getFloatTimeDomainData(samples) | View examples |
| Load an audio worklet module | await context.audioWorklet.addModule('/audio/meter-processor.js') | View examples |
| Message a processor | node.port.postMessage({ type: 'reset' }) | View examples |