HTML Images and Media Overview

HTML Images and Media

1. Image (<img>)

The <img> tag is used to embed images in a webpage. It is an empty tag, meaning it does not have a closing tag.

HTML Example:

<img src="image.jpg" alt="A description of the image" width="600" height="400">

Explanation:

src: Specifies the path to the image file.
alt: Provides alternative text for the image if it cannot be displayed.
width and height: Define the dimensions of the image.

2. Audio (<audio>)

The <audio> tag is used to embed audio content in a webpage. It can contain one or more <source> elements to specify different audio formats.

HTML Example:

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    Your browser does not support the audio element.
</audio>

Explanation:

controls: Adds playback controls (play, pause, volume) to the audio player.
<source>: Specifies multiple audio sources for different formats.
The text inside the <audio> tag is displayed if the browser does not support the audio element.

3. Video (<video>)

The <video> tag is used to embed video content in a webpage. It can contain one or more <source> elements to specify different video formats.

HTML Example:

<video width="640" height="360" controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    Your browser does not support the video element.
</video>

Explanation:

width and height: Define the dimensions of the video player.
controls: Adds playback controls (play, pause, volume) to the video player.
<source>: Specifies multiple video sources for different formats.
The text inside the <video> tag is displayed if the browser does not support the video element.

4. Source (<source>)

The <source> tag is used within <audio> and <video> tags to specify multiple media resources.

HTML Example:

<source src="example.mp4" type="video/mp4">
<source src="example.ogg" type="video/ogg">

Explanation:

src: Specifies the path to the media file.
type: Specifies the media type (e.g., video/mp4).

5. Track (<track>)

The <track> tag is used to specify text tracks for video and audio elements, such as subtitles or captions.

HTML Example:

<video controls>
    <source src="video.mp4" type="video/mp4">
    <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
    <track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Spanish">
    Your browser does not support the video element.
</video>

Explanation:

src: Specifies the path to the track file.
kind: Defines the type of text track (e.g., subtitles, captions).
srclang: Specifies the language of the track.
label: Provides a user-readable title for the track.