Chapter 12 of 17 · HTML for Beginners — Complete Free Tutorial
Multimedia: Audio & Video
HTML5 brought native <audio> and <video> — no plugins, no Flash, no third-party players required. This chapter shows how to embed media that is fast, accessible, and robust across devices.
Embedding video
<video
controls
width="800"
height="450"
poster="lesson-thumbnail.jpg"
preload="metadata"
>
<source src="kneading-basics.mp4" type="video/mp4">
<source src="kneading-basics.webm" type="video/webm">
<p>Your browser cannot play this video.
<a href="kneading-basics.mp4">Download the file instead.</a></p>
</video>Expected output: a 16:9 player showing the poster image until you press play, with native controls (play/pause, timeline, volume, fullscreen, captions toggle).
Attribute guide
| Attribute | Effect |
|---|---|
controls | Shows the player UI — omit it and users see nothing unless you build custom controls with JavaScript. |
poster | Cover image before playback — your most important LCP asset for video sections. |
preload="metadata" | Loads duration/size only — balances fast UX with bandwidth. Use none for long playlists. |
autoplay | Starts automatically — only works with muted in all modern browsers; always add playsinline on iOS. |
loop / muted | Repeat forever / no sound — perfect for background hero videos. |
width/height | Reserves space — prevents layout shift. |
Multiple sources: the fallback pattern
Browsers support different formats. Provide sources in preference order — MP4 (H.264) for near-universal support, WebM for smaller files in Chrome/Firefox/Edge:
<video controls>
<source src="clip.webm" type="video/webm">
<source src="clip.mp4" type="video/mp4">
<track kind="captions" src="clip-en.vtt" srclang="en" label="English" default>
<track kind="captions" src="clip-hi.vtt" srclang="hi" label="Hindi">
</video>Captions and transcripts (<track>)
Closed captions (.vtt files) benefit everyone: deaf and hard-of-hearing viewers, people watching without sound on public transport, and Google — which cannot hear your video but can read captions.
<!-- A minimal WebVTT file (captions/en.vtt) -->
WEBVTT
00:00:01.000 --> 00:00:04.000
First, mix the flour and water.kind can be captions, subtitles, descriptions (audio description of visuals), or chapters (skip navigation).
Embedding audio
<audio controls preload="none">
<source src="episode-12.mp3" type="audio/mpeg">
<source src="episode-12.ogg" type="audio/ogg">
<p>Audio playback is not supported by your browser.
<a href="episode-12.mp3">Download the episode</a>.</p>
</audio>Third-party embeds: iframes
For YouTube/Vimeo hosts, an iframe saves you bandwidth and their player handles transcoding:
<iframe
src="https://www.youtube-nocookie.com/embed/VIDEO_ID"
title="Kneading basics — video tutorial"
width="800" height="450"
loading="lazy"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; picture-in-picture"
allowfullscreen>
</iframe>- Always give the iframe a
title— screen readers announce it. - Use
youtube-nocookie.comfor privacy-enhanced mode. - Read more about embeds in iframes & Embedding.
Real-life use case
An online course lesson page: a poster-optimised <video> with preload="metadata" (so 20 lessons don't all preload), English + Hindi caption tracks, a <track> transcript below for SEO, and a downloadable audio-only version for commuters.
Performance notes (Core Web Vitals)
- Never
autoplayheavy video above the fold withoutposter+muted; it destroys LCP. - Lazy-load iframes with
loading="lazy"— embedded players are render-blocking heavyweights. - Compress video (H.265/AV1 for modern devices) and provide multiple resolutions when possible.
- Preload only metadata; let the user decide to download megabytes.
Common mistakes
- No
controls— visitors cannot play the media at all. - Missing
titleon iframes — accessibility failure. - Autoplay with sound — blocked by every major browser and universally disliked.
- No captions — inaccessible to a large audience and invisible to search.
- Fixed-size players without responsive CSS — use
max-width:100%;height:autoon the wrapper.
Best practices
- Ship captions for every video; transcripts double as indexable text content.
- Host large media on a CDN or a platform (YouTube/Vimeo) — don't stream GBs from your app server.
- Always include a fallback link for downloads.
What's next?
Master special characters with HTML Entities, then embed external apps safely in iframes & Embedding.
Frequently Asked Questions
HTML (HyperText Markup Language) is the standard markup language that defines the structure and meaning of every web page. Learning HTML is the fastest way into web development: it is the foundation that CSS, JavaScript, and every framework build upon, and it directly affects SEO and accessibility.
Most beginners can build their first complete page in a day and become comfortable with the core tags within 1–2 weeks of daily practice. This 17-chapter series is designed to be completed in about 2–3 weeks at a relaxed pace, faster if you type out every example.
Only a plain text editor (VS Code is free and popular) and a web browser. No installation, no setup, no account — create a file called index.html, double-click it, and it opens in your browser.
HTML5 is the current generation of the HTML standard (published as the living standard by WHATWG). When people say "HTML5" they usually mean modern HTML: semantic elements like header, nav and article, native audio/video, canvas, and improved form input types — all covered in this tutorial.
No. HTML is a markup language — it describes content and structure but has no variables, loops, or conditionals. Those come with programming languages like JavaScript, which you would learn after HTML and CSS.
Right here: every chapter includes examples you can retype in your own index.html file, plus practice challenges. After this series, build small projects — a portfolio page, a recipe page, or a landing page for a local business — they exercise the same tags in real contexts.
Search engines crawl HTML first. Unique titles, a single clear h1, a logical heading hierarchy, descriptive alt text, valid markup, fast-loading responsive images, and a proper internal linking structure all come straight from HTML — see the HTML & SEO chapter for the full checklist.
Accessible HTML makes your site usable by everyone, including people who rely on screen readers or keyboards, and it is a legal requirement in many countries. The good news: proper labels, semantic elements, alt text, and keyboard-operable controls are mostly free HTML habits.
No — there are roughly 100 meaningful tags and you will naturally use about 30 of them regularly. Focus on understanding purpose and structure; editors and references (like MDN) handle the rest. This tutorial covers every tag beginners actually need.
CSS for visual design and layout, then JavaScript for interactivity, then a version control system (Git). With those three you can build complete websites; frameworks like React or Laravel Blade come after the fundamentals feel natural.