Links and Media

Learn how to create hyperlinks and work with images, audio, video, and embedded content in HTML.

Introduction to Links and Media

HTML provides elements for connecting web pages, displaying images, playing multimedia, and embedding external or other document content.

In this module:

Hyperlinks, link attributes, images, image attributes, audio, video, and iframes.

Hyperlinks

The <a> element is used to create hyperlinks in HTML.

<a href="https://example.com">
    Visit Website
</a>

Output

Visit Website

Images

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

<img src="image.jpg"
     alt="Sample Image">

Important: Always provide meaningful alternative text using the alt attribute where appropriate.

Audio

The <audio> element can be used to embed audio content in a web page.

<audio controls>

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

    Your browser does not support the audio element.

</audio>

Audio Features

The controls attribute allows the browser to display playback controls for the audio element.

Video

The <video> element is used to embed video content.

<video controls width="500">

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

    Your browser does not support the video element.

</video>

Video Features

Video elements can include controls, dimensions, posters, and multiple source formats.

Iframes

The <iframe> element is used to embed another document or resource inside the current page.

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

Note: Whether an external site can be embedded depends on the target site's security and framing policies.

Links and Media Elements

Element	Purpose	Example
`<a>`	Creates hyperlinks.	`<a href="#">Link</a>`
`<img>`	Displays images.	`<img src="image.jpg">`
`<audio>`	Embeds audio.	`<audio controls>`
`<video>`	Embeds video.	`<video controls>`
`<iframe>`	Embeds another resource or document.	`<iframe src="...">`

Complete Example

<!DOCTYPE html>

<html>

<head>

    <title>
        Links and Media Example
    </title>

</head>

<body>

    <h1>
        CIIT Institute
    </h1>

    <p>

        <a href="#">
            Visit HTML Course
        </a>

    </p>

    <img src="student.jpg"
         alt="Student Learning HTML"
         width="300">

    <audio controls>

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

    </audio>

    <video controls width="500">

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

    </video>

</body>

</html>

Important Points

Use <a> to create hyperlinks.
Use <img> to display images.
Use <audio> for audio content.
Use <video> for video content.
Use <iframe> when an external or separate resource needs to be embedded.

Practice Exercise

Create a hyperlink to another page.
Add an image with src and alt.
Add an audio player using <audio>.
Add a video player using <video>.
Add an iframe and give it a meaningful title.

Summary

HTML provides several elements for linking and multimedia. The <a> element creates hyperlinks, <img> displays images, <audio> embeds audio, <video> embeds video, and <iframe> embeds another resource or document within the page.

← Previous: Special Characters Next: Hyperlinks →