HTML Tutorial Series – Chapter 3: Links, Images & Multimedia

Introduction

So far, you’ve learned how to structure content using headings and paragraphs. But a webpage becomes truly powerful when it can connect, display visuals, and play media.

In this chapter, you’ll learn how to:

  • Create clickable links
  • Add images to your page
  • Embed audio and video
  • Work with multimedia elements

These features make your website interactive, engaging, and user-friendly.

HTML Links ( Tag)

Links are the backbone of the web. They allow users to navigate between pages and websites.

Basic Example:

				
					<a href="https://www.example.com" target="_blank" rel="noopener">Visit Example</a>

Important Attributes:

  • href → URL of the page
  • target="_blank" → Opens link in new tab
  • rel="noopener noreferrer" → Improves security
				
					<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">
  Open in New Tab
</a>

Linking to Sections (Anchor Links):

				
					<a href="#section1">Go to Section 1</a>

<h2 id="section1">Section 1</h2>

👉 Useful for long pages and navigation menus.

HTML Images (<img> Tag)

Images make your content more attractive and easier to understand.

Basic Example:

				
					<img data-rishi-lazy="image.jpg" loading="lazy" srcset=image.jpg data-rishi-lazy-set="image.jpg"data-object-fit="~"  decoding="async"  alt="Beautiful landscape">

Important Attributes:

  • src → Image path
  • alt → Alternative text (important for SEO & accessibility)
  • width & height → Control image size
 
				
					<img data-rishi-lazy="nature.jpg" loading="lazy" srcset=nature.jpg data-rishi-lazy-set="nature.jpg"data-object-fit="~"  decoding="async"  alt="Mountain view" width="600" height="400">

Best Practice:

Always use the alt attribute — it helps search engines and screen readers understand your image.

Responsive Images (<picture> & <source>)

For better performance and responsiveness:

				
					<picture>
  <source media="(max-width: 600px)" srcset="small.jpg">
  <source media="(max-width: 1200px)" srcset="medium.jpg">
  <img data-rishi-lazy="large.jpg" loading="lazy" srcset=large.jpg data-rishi-lazy-set="large.jpg"data-object-fit="~"  decoding="async"  alt="Responsive image">
</picture>

👉 Loads different images based on screen size.

Image Maps (<map> & <area>)

Allows clickable areas within an image.

				
					<img data-rishi-lazy="map.jpg" loading="lazy" srcset=map.jpg data-rishi-lazy-set="map.jpg"data-object-fit="~"  decoding="async"  usemap="#imagemap">

<map name="imagemap">
  <area shape="rect" coords="34,44,270,350" href="link1.html" alt="Area 1">
</map>

👉 Useful for interactive graphics.

HTML Audio (<audio> Tag)

Add sound or music to your webpage.

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

Attributes:

  • controls → Shows play/pause UI
  • autoplay → Plays automatically (use carefully)
  • loop → Repeats audio

HTML Video (<video> Tag)

Embed videos directly into your webpage.

				
					<video width="600" controls>
  <source src="video.mp4" type="video/mp4">
  Your browser does not support video.
</video>

Attributes:

  • controls → Video controls
  • autoplay, muted, loop
  • poster → Thumbnail image

Media Supporting Tags

🔹 <track> (Subtitles)

				
					<track src="subtitles.vtt" kind="subtitles" srclang="en" label="English">

🔹 <iframe> (Embed External Content)

				
					<iframe src="https://www.youtube.com/embed/video-id" width="600" height="400"></iframe>

👉 Used for embedding YouTube videos, maps, etc.

🔹 <embed>

				
					<embed src="file.pdf" width="500" height="375">

🔹 <object> & <param>

				
					<object data="file.pdf" type="application/pdf" width="500" height="400">
  <param name="autoplay" value="true">
</object>

Graphics Tags

🔹 <canvas> (Drawing with JavaScript)

				
					<canvas id="myCanvas"></canvas>

🔹 <svg> (Vector Graphics)

				
					<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="blue" />
</svg>

Figure & Caption

				
					<figure>
  <img data-rishi-lazy="image.jpg" loading="lazy" srcset=image.jpg data-rishi-lazy-set="image.jpg"data-object-fit="~"  decoding="async"  alt="Nature">
  <figcaption>Beautiful nature view</figcaption>
</figure>

👉 Helps group images with descriptions (great for SEO).

Key Takeaways from Chapter 3

  • Links connect pages and improve navigation.
  • Images enhance user experience and SEO.
  • Audio and video make content more engaging.
  • Multimedia tags help create modern, interactive websites.

What’s Next?

In the next chapter, you’ll learn how to organize data using:

  • Lists
  • Tables

👉 Next: Chapter 4 – Lists & Tables