Skip to main content
HTML for Beginners
CHAPTER 03 Beginner

HTML Links and Images

Updated: May 10, 2026
20 min read

1. Introduction

Welcome to Chapter 3! The true power of the "World Wide Web" lies in its interconnectedness. In this chapter, you will learn how to create hyperlinks to navigate between pages and how to embed images to make your websites visually appealing.

2. Learning Objectives

By the end of this chapter, you will be able to:
  • Create internal and external hyperlinks.
  • Make links open in a new tab.
  • Create email and phone links.
  • Embed images using the <img> tag.
  • Understand the importance of alt text for accessibility and SEO.
  • Turn images into clickable links.

3. HTML Links (The Anchor Tag)

Links in HTML are created using the <a> (anchor) tag. The most important attribute of the <a> tag is href (Hypertext Reference), which indicates the destination.
html
12 
<!-- Example 1: Basic External Link -->
<a href="https://www.google.com">Visit Google</a>

4. Internal vs External Links

  • External Links: Point to a completely different website (requires the full https:// URL).
  • Internal Links: Point to another page on the *same* website. You can use relative paths.
html
123 
<!-- Example 2: Internal Link -->
<a href="/about.html">Read About Us</a>
<a href="contact.html">Contact Us</a>

5. Opening Links in a New Tab

To force a link to open in a new browser tab, use the target="_blank" attribute.
html
12 
<!-- Example 3: Link in New Tab -->
<a href="https://wikipedia.org" target="_blank">Read Wikipedia in a new tab</a>

6. Email and Phone Links

You can create links that automatically open the user's default email client or trigger a phone call on mobile devices using mailto: and tel:.
html
12345 
<!-- Example 4: Email Link -->
<a href="mailto:support@example.com">Email Support</a>

<!-- Example 5: Phone Link -->
<a href="tel:+1234567890">Call Us Now</a>

7. HTML Images

Images are embedded using the self-closing <img> tag. It requires two main attributes:
  1. 1. src: The source path to the image file.
  1. 2. alt: Alternative text displayed if the image fails to load (vital for screen readers).
html
12 
<!-- Example 6: Basic Image -->
<img src="https://via.placeholder.com/300" alt="A generic placeholder image">

8. Relative vs Absolute Paths for Images

Just like links, images can be loaded from external URLs (absolute) or from your project folder (relative).
html
12 
<!-- Example 7: Relative Image Path -->
<img src="images/logo.png" alt="Company Logo">

9. Adjusting Image Size

You can use width and height attributes directly in HTML to resize images, though using CSS is the modern best practice.
html
12 
<!-- Example 8: Sized Image -->
<img src="dog.jpg" alt="A cute dog" width="500" height="300">

10. Clickable Images

You can turn an image into a link by nesting the <img> tag inside an <a> tag.
html
1234 
<!-- Example 9: Clickable Image -->
<a href="https://google.com">
  <img src="google-logo.png" alt="Go to Google">
</a>

11. Image Optimization Basics

Best Practice: Always compress your images before uploading them. Large images (like 5MB photos) will make your website incredibly slow, hurting your SEO and annoying users. Use formats like WebP or compressed JPEG.

12. Best Practices & Common Mistakes

Best Practices:
  • ALWAYS include descriptive alt text for images. If the image is purely decorative, use alt="".
  • Ensure link text is descriptive. Instead of "Click here", use "Read our privacy policy".

Common Mistakes:

  • Forgetting the https:// in external links.
  • Forgetting the closing </a> tag, which accidentally turns the rest of the page into a giant link.
  • Using massive images and scaling them down via HTML width/height instead of cropping them first.

13. Mini Project: Portfolio Gallery Page

Task: Create a simple portfolio layout with a clickable image gallery.
html
1234567891011121314151617181920 
<!-- Example 10: Mini Project Solution -->
<!DOCTYPE html>
<html>
<head><title>My Portfolio</title></head>
<body>
  <h1>My Photography Portfolio</h1>
  <p>Contact me at <a href="mailto:me@example.com">me@example.com</a></p>
  <hr>
  
  <h2>Landscapes</h2>
  <a href="landscape-full.jpg" target="_blank">
    <img src="landscape-thumb.jpg" alt="A beautiful mountain landscape" width="300">
  </a>
  
  <h2>Portraits</h2>
  <a href="portrait-full.jpg" target="_blank">
    <img src="portrait-thumb.jpg" alt="A professional portrait" width="300">
  </a>
</body>
</html>

14. MCQ Quiz

  1. 1. Which attribute specifies the destination of a link?
  • A) src
  • B) href
  • C) link
  • D) url
Answer: B
  1. 2. What is the correct HTML for inserting an image?
  • A) <img href="image.gif" alt="MyImage">
  • B) <image src="image.gif" alt="MyImage">
  • C) <img src="image.gif" alt="MyImage">
  • D) <img>image.gif</img>
Answer: C
  1. 3. How do you open a link in a new tab?
  • A) target="new"
  • B) target="blank"
  • C) open="blank"
  • D) href="_blank"
Answer: B

15. Interview Questions

Q: Why is the alt attribute essential for <img> tags? A: It provides descriptive text for visually impaired users using screen readers, displays text if the image fails to load over a slow connection, and helps search engines understand the image content for SEO.

Q: What is the difference between absolute and relative paths? A: An absolute path includes the full URL (e.g., https://example.com/page.html), making it point to an exact location on the internet. A relative path points to a file relative to the current file's location (e.g., /images/pic.jpg).

16. FAQs

Q: Can I use GIFs in the <img> tag? A: Yes! The <img> tag supports JPEGs, PNGs, GIFs, WebP, and SVG formats perfectly.

17. Summary

You now know how to connect pages using anchor tags, how to trigger email drafts, and how to embed and resize images safely.

18. Next Chapter Recommendation

Next up, we will organize our data beautifully using HTML Lists and HTML Tables!

Finish this Chapter

Save your progress on your learning path and prepare for coding interview challenges.

Previous Chapter HTML Text Formatting and Headings
Next Chapter HTML Lists and Tables

Discussion

Join the discussion

Log in or create a free account to participate.

Sort: ·

Explore More

📖 Related Tutorials 6

❓ Related Quizzes 6

🎥 Related Videos 1