HTML Images & Media — img tag, alt text, video embed

The img Tag

Images use the self-closing <img> tag with two required attributes:

<img src="burger.jpg" alt="A delicious burger with fries">

src — path to the image (local file or URL)
alt — text description read by screen readers and shown if the image fails to load

Always write meaningful alt text. It is required for accessibility (blind users use screen readers) and Google uses it for image SEO. Write what is IN the image, not "image1" or "photo".

Local vs URL Sources

<!-- Same folder -->
<img src="logo.png" alt="Sharma's Dhaba logo">

<!-- Subfolder -->
<img src="images/dal-makhani.jpg" alt="Dal Makhani bowl">

<!-- Image from the internet -->
<img src="https://picsum.photos/400/300" alt="Random photo">

Controlling Size

<!-- Fixed size -->
<img src="logo.png" alt="Logo" width="200" height="80">

<!-- Responsive (CSS approach — better) -->
<img src="banner.jpg" alt="Banner" style="width:100%; height:auto;">

Clickable Images

<a href="/menu.html">
  <img src="menu-preview.jpg" alt="Click to see our full menu">
</a>

Figure and Caption

Use <figure> and <figcaption> when an image needs a caption:

<figure>
  <img src="dal-makhani.jpg" alt="Dal Makhani with naan">
  <figcaption>Our signature Dal Makhani — slow-cooked for 12 hours.</figcaption>
</figure>

Embedding YouTube Videos

For YouTube, use the Share button to get the embed code. It creates an <iframe>:

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  title="Video title"
  allowfullscreen>
</iframe>

Native HTML5 Video

For self-hosted videos, use the <video> tag:

<video width="640" controls>
  <source src="intro.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>

Useful attributes: controls (play/pause UI), autoplay, muted, loop.

Try It Yourself

Add a profile photo to your about-me.html using a URL from the web
Make the photo a clickable link to your GitHub or LinkedIn
Wrap it in a <figure> with your name and role as the caption