HTML for Absolute Beginners

Images, Video and Embedding

2 min read Last updated 46 minutes ago

Media makes your pages engaging. HTML provides native elements for images, audio and video.

Images

html

<img src="images/puppy.jpg" alt="A golden retriever puppy" width="640" height="480" loading="lazy">

The alt attribute is mandatory in spirit — it describes the image for screen readers and shows when the image fails to load.

✓

Loading performance

Use loading="lazy" for images below the fold so the browser downloads them only when they're about to enter the viewport.

Responsive images with srcset

Serve different image sizes for different screens:

html

<img src="photo-800.jpg"
     srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
     sizes="(max-width: 600px) 400px, 800px"
     alt="City skyline at dusk">

Video

html

<video controls width="640">
    <source src="movie.mp4" type="video/mp4">
    <p>Your browser does not support video. <a href="movie.mp4">Download it instead</a>.</p>
</video>

Always provide a fallback message for browsers that can't play the media.

Embedding with iframe

Embed YouTube videos, maps and other third-party content:

html

<iframe width="560" height="315"
        src="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ"
        title="Example video"
        loading="lazy"
        allowfullscreen></iframe>

iframe a11y

Always give iframes a meaningful title attribute so screen reader users know what the embedded content is.

Previous Text and Headings Next Forms and Inputs