Modern websites are more than just text. HTML allows us to display images, play audio and video, embed external content, and optimize how media is loaded.

---

Images (img)

The <img> element is used to display images on a webpage.

<img src="image.jpg" alt="Nature">

Notice that <img> does not have a closing tag. It is a self-closing (void) element.

Common Attributes

Attribute	Purpose
src	Image location
alt	Alternative text
width	Image width
height	Image height
loading	Lazy loading

For example:

<img
    src="mountain.jpg"
    alt="Beautiful Mountain"
    width="500">

---

The alt Attribute

The alt attribute provides a description of an image.

<img
    src="logo.png"
    alt="Company Logo">

The alt text is used when:

• The image cannot be loaded.
• A screen reader reads the page.
• Search engines index the page.

Without the image, users may see:

[Company Logo]

For this reason, every meaningful image should include an alt attribute.

---

Image Formats

Different image formats serve different purposes.

Format	Best For
JPG / JPEG	Photographs
PNG	Transparent images
SVG	Logos and Icons
WebP	Modern optimized images
GIF	Simple animations

---

Audio (audio)

The <audio> element plays audio files.

<audio controls>
    <source src="song.mp3">
</audio>

For example:

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

The browser displays an audio player with controls.

▶ Play   Pause   Volume

Common Attributes

Attribute	Purpose
controls	Show player controls
autoplay	Play automatically
loop	Repeat continuously
muted	Start muted

Example:

<audio controls loop>
    <source src="music.mp3">
</audio>

---

Video (video)

The <video> element displays video content.

<video controls>
    <source src="video.mp4">
</video>

For example:

<video
    width="600"
    controls>
    <source src="tutorial.mp4">
</video>

Common Attributes

Attribute	Purpose
controls	Show controls
autoplay	Play automatically
muted	Start muted
loop	Repeat video
poster	Thumbnail image

For example:

<video
    controls
    poster="thumbnail.jpg">
    <source src="video.mp4">
</video>

Before playback, the browser displays the poster image.

[Thumbnail Image]

---

iframe

The <iframe> element embeds another webpage inside the current webpage.

<iframe src="https://example.com"></iframe>

For example, Google Maps:

<iframe
    src="https://maps.google.com"
    width="600"
    height="400">
</iframe>

Or a YouTube video:

<iframe
    width="560"
    height="315"
    src="https://www.youtube.com/embed/VIDEO_ID">
</iframe>

Common uses include:

• YouTube videos
• Google Maps
• Payment systems
• Dashboards
• External widgets

Not every website allows embedding. Some websites block iframes for security reasons.

---

Content Security Policy (CSP)

Content Security Policy (CSP) is a browser security feature.

It controls which resources a webpage is allowed to load.

CSP helps prevent:

• Cross-Site Scripting (XSS)
• Malicious JavaScript injection
• Unauthorized external resources

For example:

<meta
    http-equiv="Content-Security-Policy"
    content="default-src 'self'">

This means the browser should only load resources from the current website.

Another example:

<meta
    http-equiv="Content-Security-Policy"
    content="
        default-src 'self';
        img-src *;
    ">

This allows images from any source while restricting other resources.

Without CSP, attackers may inject malicious scripts.

With CSP, browsers can block those unauthorized scripts.

---

img vs figure

Most beginners use only <img>.

HTML also provides <figure> for images with additional meaning.

Using only an image:

<img
    src="mountain.jpg"
    alt="Mountain">

This displays only the image.

Using a figure:

<figure>
    <img
        src="mountain.jpg"
        alt="Mountain">

    <figcaption>
        Mountain View in Nepal
    </figcaption>
</figure>

Output:

[Image]

Mountain View in Nepal

The <figure> element groups related content together.

Benefits include:

• Better semantics
• Better accessibility
• Image captions
• Improved SEO

img	figure
Image only	Image + Caption
Basic display	Semantic grouping
Limited meaning	Richer meaning

---

Priority Hints

Browsers decide which resources to load first.

Priority Hints allow developers to influence this behavior.

The fetchpriority attribute tells the browser how important a resource is.

High priority:

<img
    src="hero.jpg"
    fetchpriority="high">

This tells the browser to load the image immediately.

Low priority:

<img
    src="footer.jpg"
    fetchpriority="low">

This tells the browser to load the image later.

Consider a webpage:

Navbar

Hero Image

Content

Footer

The Hero Image appears immediately.

Loading it first improves the perceived speed of the website.

---

Lazy Loading

Not every image needs to load immediately.

Images below the visible area of the page can be loaded later.

<img
    src="gallery.jpg"
    loading="lazy">

The browser waits until the image is close to the viewport before downloading it.

Benefits include:

• Faster page loading
• Reduced bandwidth usage
• Better performance

---

Real-World Example

<figure>
    <img
        src="frontend.webp"
        alt="Frontend Development"
        fetchpriority="high">

    <figcaption>
        Frontend Development Roadmap
    </figcaption>
</figure>

<video controls>
    <source src="lesson.mp4">
</video>

<audio controls>
    <source src="intro.mp3">
</audio>

---

Best Practices

Images

Always provide an alt attribute.

<img
    src="logo.png"
    alt="Company Logo">

Videos

Always include controls.

<video controls>

Audio

Provide playback controls.

<audio controls>

iframe

Only embed content from trusted websites.

Performance

• Use loading="lazy" for non-critical images.
• Prefer WebP images when possible.
• Use fetchpriority="high" for important images.

---

Key Takeaway

Media is an important part of modern websites.

<figure>
    <img
        src="hero.webp"
        alt="Hero Image"
        fetchpriority="high">

    <figcaption>
        Hero Section
    </figcaption>
</figure>

<video controls>
    <source src="intro.mp4">
</video>

When building professional websites:

• Use <img> for images.
• Use <figure> and <figcaption> for images with captions.
• Use <audio> for audio.
• Use <video> for video.
• Use <iframe> to embed external content.
• Use CSP to improve security.
• Use Priority Hints and Lazy Loading to improve performance.