HTML media elements play video and audio natively; picture and srcset serve responsive images; canvas is a drawing surface controlled by JavaScript. Prefer semantic media tags with captions before you reach for a heavy player library.
This HTML cheat sheet is written for people searching for a fast, accurate reference: students, junior developers, and teams shipping production software. Pin it, copy the snippets, and come back when syntax slips.
Quick reference
- video:
<video controls src="file.mp4">plus<track>for captions. - audio: Same pattern as video. Include a transcript nearby for accessibility.
- picture: Art direction: different crops per breakpoint via
<source media>. - srcset: Density or width candidates on
<img>for the same crop. - lazy:
loading="lazy"on below-the-fold images. Not on the LCP hero. - canvas:
getContext("2d")for charts/games you draw yourself. Not a replacement for HTML text. - svg: Use SVG markup for icons and diagrams you need to style or a11y-label.
- autoplay: Muted autoplay may work; sound autoplay is usually blocked. Respect the user.
Copy-paste examples
Captioned video and responsive image
Always ship a text track for spoken video. picture changes crop; srcset changes resolution.
<video controls poster="poster.jpg">
<source src="talk.mp4" type="video/mp4">
<track kind="captions" src="talk.vtt" srclang="en" label="English" default>
</video>
<picture>
<source media="(min-width: 720px)" srcset="hero-wide.jpg">
<img src="hero-narrow.jpg" alt="Team at a whiteboard" width="720" height="400">
</picture>Minimal 2D canvas
Canvas has no DOM text. Keep real captions in HTML next to the canvas.
const canvas = document.querySelector('#chart');
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#2563eb';
ctx.fillRect(10, 10, 120, 80);
ctx.fillStyle = '#0f172a';
ctx.font = '16px sans-serif';
ctx.fillText('Sales', 20, 50);Common mistakes
- Autoplaying unmuted video in the hero — blocked or hostile.
- Drawing essential text only on canvas so it cannot be selected or read by AT.
- Using giant GIFs instead of
videofor short motion. - Omitting
widthandheighton images so the page jumps as they load.
FAQ
- Canvas or SVG? SVG for icons, logos, and accessible diagrams. Canvas for pixel pushing, games, and high-frequency charts.
- Do I need both BLOGPH0 and BLOGPH1 ?
srcset/sizesfor resolution switching.picturewhen the image content itself should change at a breakpoint.
- Is Flash still required for video? No. Use
video/audiowith modern formats (MP4/WebM, MP3/AAC).
Related HTML cheat sheets
Build with this stack
When a cheat sheet is not enough — you need a production app, a student FYP, or a custom dashboard — ArpaNeuro builds custom web development and also sells ready-made source code. Request a quote and tell us the stack.
Browse software development services or the source code marketplace if you want a working codebase instead of starting from a blank file.