HTML Tags Part3: A Complete Guide for Web Developers

HTML Tags Tutorial for Beginners – Part 3

Links, Images & Media Tags

After learning text and formatting tags in Part 2, the next important step is understanding links, images, and media tags. These tags help users navigate websites, view images, watch videos, listen to audio, and interact with multimedia content.

In this beginner-friendly tutorial, you will learn how HTML links work, how to display images, and how to add media content to webpages using modern HTML tags.

Anchor Tag (a)
Absolute vs Relative Links
Internal vs External Links
Target Attribute
Title Attribute in Links
Download Links
Email Links
Phone Links
Bookmark Links
Navigation Menu Example
Image Tag (img)
Image Source (src)
Alt Attribute
Width and Height
Figure and Figcaption
Audio Tag
Video Tag
Source Tag
Iframe Tag
YouTube Embed Example
Mini Project Example
SEO Tips
Best Practices
Common Beginner Mistakes
Conclusion
FAQ

Anchor Tag (<a>)

The anchor tag creates clickable links between webpages.

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

The href attribute stores the destination link.

When users click the link, the browser opens the destination page.

Absolute vs Relative Links

Absolute Link

An absolute link uses a complete website address.

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

Relative Link

A relative link points to files inside the same project.

<a href="about.html">
About Page
</a>

Relative links are commonly used for internal navigation.

Internal vs External Links

Internal Links

Internal links connect pages inside the same website.

<a href="contact.html">
Contact
</a>

External Links

External links open another website.

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

Target Attribute

The target attribute controls where links open.

Open in Same Tab

<a href="page.html"
target="_self">
Open
</a>

Open in New Tab

<a href="page.html"
target="_blank">
Open
</a>

Many websites use _blank for external links.

Title Attribute in Links

The title attribute adds extra information.

<a href="about.html"
title="Go to About Page">
About
</a>

Users may see this text when hovering.

Download Links

The download attribute allows downloading files.

<a href="resume.pdf"
download>
Download Resume
</a>

Email Links

Email links open the email application.

<a href="mailto:hello@example.com">
Send Email
</a>

Phone Links

Phone links are useful for mobile devices.

<a href="tel:+911234567890">
Call Us
</a>

Bookmark Links

Bookmark links jump to sections on the same page.

Step 1:

<h2 id="contact">
Contact Section
</h2>

Step 2:

<a href="#contact">
Go to Contact
</a>

Navigation Menu Example

<nav>

<a href="index.html">
Home
</a>

<a href="about.html">
About
</a>

<a href="contact.html">
Contact
</a>

</nav>

This structure helps users navigate websites.

Image Tag (<img>)

The image tag displays images on webpages.

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

The image tag is an empty tag and does not require closing.

Image Source (src)

The src attribute tells the browser where the image exists.

<img src="photo.jpg">

Without src, images will not load.

Alt Attribute

The alt attribute describes an image.

<img src="flower.jpg"
alt="Beautiful red flower">

Why alt matters:

Improves accessibility
Helps SEO
Displays fallback text

Width and Height

You can control image size.

<img src="car.jpg"
width="300"
height="200">

Figure and Figcaption

These tags display image captions.

<figure>

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

<figcaption>
Beautiful mountain view
</figcaption>

</figure>

Useful for blogs and galleries.

Audio Tag (<audio>)

The audio tag adds sound.

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

The controls attribute shows playback controls.

Video Tag (<video>)

The video tag displays videos.

<video controls width="500">

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

</video>

Source Tag (<source>)

The source tag provides media files for audio and video.

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

Browsers can select supported formats.

Iframe Tag (<iframe>)

The iframe tag embeds another webpage.

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

Common uses:

Maps
Videos
External widgets

YouTube Embed Example

<iframe width="500"
height="300"

src="https://www.youtube.com/embed/videoid">

</iframe>

This displays YouTube videos directly on webpages.

Mini Project Example

Simple webpage using links and media.

<h1>My Portfolio</h1>

<img src="profile.jpg"
alt="Profile Photo">

<p>
Welcome to my portfolio website.
</p>

<a href="contact.html">
Contact Me
</a>

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

Output:

HTML Tags Part3: A Complete Guide for Web Developers screenshot

SEO Tips for Links & Images

Always add alt text
Use meaningful link text
Avoid “Click Here” links
Optimize image size
Use internal linking
Keep navigation simple

Best Practices

Always write alt text
Use relative links for projects
Keep image size optimized
Test broken links
Use target="_blank" carefully
Write descriptive link names

Common Beginner Mistakes

Forgetting alt attribute
Broken image paths
Using large images
Writing unclear link text
Wrong file paths
Embedding too much media

Conclusion

Links, images, and media tags make websites interactive and visually useful. Once you understand how links work and how to display multimedia content, building real websites becomes easier.

Before moving to advanced topics, practice creating webpages using navigation links, images, audio, and videos.

Frequently Asked Questions (FAQ)

1. What is the use of anchor tag?