Course Outline (Part 4)

Welcome to Part 4 of the HTML5 & Semantic Web Development Course. In this part, we will explore how to make your webpages rich and media-friendly.

Websites aren’t just text and links—they contain pictures, icons, audio players, video players, and embedded maps or widgets. We will cover the standard way to insert images, image formats, HTML5 audio and video playback, figure wrappers, and the iframe element.

Chapter 18: Inserting Images

Images are inserted using the <img> tag. This is a self-closing (void) element.

18.1 Essential Attributes

An image tag requires two main attributes to function properly:

  1. src: The path or URL to the image file (can be local or external).
  2. alt: Alternate text description. This text is displayed if the image fails to load and is read by screen readers for visually impaired users.
<img src="/images/cat.jpg" alt="A fluffy orange cat sleeping on a rug" width="500" height="300">

18.2 Size Attributes

  • width and height: Define the rendering size in pixels.
  • Best Practice: Always include width and height attributes to reserve space for the image during page load. This prevents layout shifts, which hurt user experience and page speed scores.

Chapter 19: Image Optimization & Modern Formats

Choosing the right format and optimization parameters is critical for keeping your website loading fast.

19.1 Common Web Formats

  • JPEG / JPG: Best for photographs or detailed images with many colors. Supports compression.
  • PNG: Best for graphics, icons, and illustrations requiring transparency (alpha channel).
  • SVG (Scalable Vector Graphics): Vector format based on XML. Excellent for logos and icons because it scales infinitely without losing quality.
  • WebP: A modern format developed by Google. Provides superior compression (smaller file sizes) compared to JPEG and PNG without losing quality.

19.2 Performance Tuning

  • Lazy Loading (loading="lazy"): Instructs the browser to only download the image when it is about to enter the viewport (screen). This saves bandwidth and loads pages faster.
<img src="large-photo.jpg" alt="Scenic mountains" loading="lazy">

19.3 The Picture Element (<picture>)

The <picture> element allows you to define different image files for different screen sizes (responsive images) or fallback formats:

<picture>
    <source srcset="photo.webp" type="image/webp">
    <source srcset="photo.jpg" type="image/jpeg">
    <img src="photo.jpg" alt="A beautiful landscape">
</picture>

Chapter 20: HTML5 Video Player

Prior to HTML5, developers had to rely on buggy plugins like Adobe Flash to play videos. Today, you can play videos natively using the <video> tag.

20.1 Basic Video Player Syntax

<video src="clip.mp4" controls width="640" height="360">
    Your browser does not support the video tag.
</video>
  • controls: Displays the play/pause button, volume control, and progress bar.
  • Fallback Text: The text inside the tag is only shown to users on extremely old browsers.

20.2 Video Player Attributes

  • autoplay: Starts playing the video automatically (Note: Most browsers block autoplay unless the video is muted).
  • muted: Silences the audio track.
  • loop: Restarts the video automatically once it ends.
  • poster: An image to display while the video is downloading or before the user clicks play.
<video controls muted autoplay loop poster="thumbnail.jpg" width="480">
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.webm" type="video/webm">
</video>

Chapter 21: HTML5 Audio Player

Like video, audio can be played natively using the <audio> tag.

<audio src="podcast.mp3" controls>
    Your browser does not support the audio element.
</audio>

Like the video element, you can use <source> child tags to support different formats (like MP3, WAV, or Ogg) and attributes like autoplay, muted, and loop.

<audio controls>
    <source src="music.mp3" type="audio/mpeg">
    <source src="music.ogg" type="audio/ogg">
</audio>

Chapter 22: Figures and Captions

To present images, diagrams, or charts with captions semantically, wrap them in a <figure> element with a <figcaption> label.

<figure>
    <img src="diagram.png" alt="Bar chart showing tech blog traffic growth in 2026">
    <figcaption>Figure 1.1: Web traffic analysis showing monthly visitor growth.</figcaption>
</figure>

This groups the image and text together logically for search engines and accessibility tools.

Chapter 23: Embedding External Content (Iframes)

An Inline Frame (<iframe>) is used to embed another HTML document or site inside your current page. Common uses include embedding Google Maps, YouTube videos, or Twitter widgets.

23.1 Iframe Syntax

<iframe src="https://example.com" width="600" height="400" title="Example Website Embed"></iframe>

23.2 Security Best Practices

Embedding external websites can expose your site to security risks like cross-site scripting (XSS). Always secure your iframes using these parameters:

  • sandbox: Restricts the actions that the embedded page can perform (like opening popups or running scripts).
  • loading="lazy": Delays downloading the iframe until it is scrolled into view.
<iframe 
    src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
    width="560" 
    height="315" 
    title="YouTube video player"
    sandbox="allow-scripts allow-same-origin allow-presentation"
    loading="lazy"
    style="border: none;"
></iframe>

Discussion

Loading comments...