Images & Embedded Media

🌐 HTML Basics Lesson 5 Beginner

Webpages are enhanced by media. In this lesson, we will look at displaying images and embedding video and audio components.

1 Image alt tags accessibility and Video/Audio tags

Media configurations require specific tag properties:

<img> alt Attribute: The `alt` text describes the image. It is critical for accessibility (read aloud by screen readers) and SEO indexing (helping search engines index image topics).
<video> and <audio> tags: Contain built-in player controls (`controls`, `autoplay`, `loop`).

2 Media Elements Code

Let's check media configurations:

HTML — Media Elements

<!-- Image displaying with alt accessibility -->
<img src="/logo.png" alt="Our Compiler logo" width="100">

<!-- Video player embedding -->
<video src="/intro.mp4" controls width="400">
    Your browser does not support video play tags.
</video>

3 Code Challenge

Challenge: Write a layout embedding an audio file player tag using `<audio src="audio.mp3" controls>` with fallback text for unsupported browsers.