A photo, chart, or recording can explain an idea faster than a paragraph, but only if people can actually use it.
What You Need to Know
A good video article does not depend entirely on playback. Give it a clear heading, captions for the recording, and written steps that still make sense when the media is unavailable.
Try the Example
Take a look at the example. We’ll explain the important lines right below it.
<article>
<h1>How to make a paper airplane</h1>
<video controls width="640" poster="images/airplane-fold.jpg">
<source src="media/paper-airplane.mp4" type="video/mp4">
<track src="media/airplane-captions.vtt" kind="captions" srclang="en" label="English">
</video>
<h2>Written steps</h2>
<ol><li>Fold the paper in half.</li><li>Make two wings.</li><li>Test your plane.</li></ol>
</article>Let’s Read the Code
- <h1>: A top-level heading explains what the page is about.
- <video>: The video element creates a video player and can include alternative formats.
- controls: Controls asks the browser to provide its native audio or video player controls.
- width: Width gives a preferred or intrinsic media width, depending on the element.
What the example shows: The article offers both a captioned video and written instructions, so a reader can follow without relying on video alone.
What Happens in the Browser?
The paths shown here refer to files in your own example project. Put real images and recordings in those locations before expecting them to load.
What if the resource is missing? Test the page with the media path temporarily broken. The surrounding text should still explain the important idea, and controls should remain understandable. This is especially important for slow connections and accessibility.
Your Turn
Replace the media filename with your own local recording and check playback, controls, and fallback content.
Common Beginner Mistakes
- Forgetting that captions are stored in a separate timed-text file, not generated by the video tag.
- The video and captions files must actually be present in your project.
Key Takeaways
- A good video article does not depend entirely on playback.
- <h1>: A top-level heading explains what the page is about.
- A meaningful HTML element is usually a stronger starting point than adding an ARIA role to a generic div. Also check what happens using only the keyboard.