HTML Images and Media

ADVERTISEMENT

Text is great, but adding images, videos, or interactive content brings your website to life. In this tutorial, we’ll cover:

  • Adding images with proper alt text
  • Choosing the right image formats
  • Embedding audio, video, and canvas
  • Using iframes and external content

Let’s make your pages more visual! 🎨

🖼️ The <img> Tag – Adding Images

✅ Basic Syntax:

<img src="path/to/image.jpg" alt="A meaningful description">
AttributeUse
srcPath to your image
altAlternative text (important for screen readers & SEO)
width / heightOptional – controls size

🧪 Example:

<img src="dog.jpg" alt="Golden retriever smiling" width="300">

🧠 Why alt Text Matters

  • If the image fails to load, the alt text is shown.
  • It’s crucial for screen readers (accessibility).
  • Helps with SEO.

❌ Avoid:

<img src="logo.png" alt="image123">

✅ Use:

<img src="logo.png" alt="W3Buddy logo">

🖼️ Image Formats – When to Use What?

FormatBest ForSupports Transparency?Notes
.jpg / .jpegPhotos, gradients❌Compressed, smaller size
.pngLogos, graphics✅Higher quality
.gifSimple animations✅Limited colors
.webpModern all-purpose✅Great for performance
.svgIcons, logos (vector)✅Scales perfectly

🎵 <audio> and <video> – Multimedia Playback

🎧 Add Audio

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>
  • controls: adds play/pause/volume buttons
  • Use multiple <source> for different formats

🎬 Add Video

<video width="400" controls poster="preview.jpg">
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
  • poster: thumbnail image before playback
  • Add autoplay, loop, or muted as needed

🖌️ <canvas> – Draw with JavaScript

The <canvas> tag creates a drawing surface. JavaScript is used to draw inside it.

✅ Example:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;"></canvas>

Use JavaScript like this:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 50);

🧠 Mostly used for charts, games, animations, etc.

🌐 <iframe> – Embed External Pages

Want to embed YouTube, maps, or other content? Use <iframe>.

✅ Example:

<iframe src="https://www.youtube.com/embed/xyz123" width="560" height="315" frameborder="0" allowfullscreen></iframe>
  • You can embed anything with a valid URL (if allowed).
  • Keep width and height responsive using CSS.

⚠️ Avoid using too many iframes—they can slow down your page.

✅ Summary Table

TagPurposeNotes
<img>Display imagesUse alt and proper formats
<audio>Embed audioUse controls, source
<video>Embed videosAdd poster, fallback text
<canvas>Drawing surface (via JS)Needs JavaScript to work
<iframe>Embed external web contentUse with caution and for trusted sources

🧪 Practice This

<h2>Image</h2>
<img src="html5-logo.png" alt="HTML5 logo" width="150">

<h2>Audio</h2>
<audio controls>
  <source src="song.mp3" type="audio/mpeg">
</audio>

<h2>Video</h2>
<video width="300" controls>
  <source src="intro.mp4" type="video/mp4">
</video>

<h2>Iframe</h2>
<iframe src="https://example.com" width="100%" height="300"></iframe>

🎓 Coming Up Next:

Now let’s learn how to structure tabular data with rows, columns, headers, and merged cells.

📚 Next: HTML Tables

ADVERTISEMENT