HTML Links & Images Explained — Complete Beginner's Guide

HTML links connect web pages together using anchor (<a>) tags, while images embed visuals with <img> — together they make the web navigable and visually rich.

What You’ll Learn

By the end of this tutorial, you’ll know how to create links to other pages and websites, embed images with proper attributes, use relative and absolute file paths, and understand critical security and accessibility practices.

Why Links & Images Matter

Without links, the web wouldn’t be a “web” at all — it would be a collection of isolated pages you can’t navigate between. Links are what make browsing possible. And images? They make pages engaging. A website without images is like a magazine with only text — functional but boring.

Real-world use: Every time you click a result on Google, you’re following a link. Every product photo on Amazon is an image. These are the two most common elements on the web.

Where This Fits in Your Learning Path

    flowchart LR
    A["Text & Headings"] --> B["**Links & Images**"]
    B --> C["Styles & Colors"]
    C --> D["Tables"]
    D --> E["Forms & Inputs"]
    E --> F["Styled Interactive Page"]
    style B fill:#f97316,stroke:#c2410c,color:#fff
    style A fill:#e5e7eb,stroke:#9ca3af,color:#374151
    style F fill:#22c55e,stroke:#16a34a,color:#fff
  

Anchor Links — The Web’s Navigation System

The <a> tag (short for anchor) creates a clickable link. Think of it as a door — you click it, and you go somewhere else. The href attribute tells the browser which door to open.

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

Let’s break that down:

• <a> — the anchor tag (creates a link)
• href="https://example.com" — the destination URL (where the link goes)
• Visit Example — the visible text (what users see and click)
• </a> — closes the anchor tag

Types of Links

You can link to different kinds of destinations:

<!-- Link to another website (absolute URL) -->
<a href="https://google.com">Go to Google</a>

<!-- Link to another page on your site (relative path) -->
<a href="/frontend/html/html-text">Text & Headings Tutorial</a>

<!-- Link to a section on the same page (anchor link) -->
<a href="#section">Jump to Section Below</a>

<!-- Link to send an email -->
<a href="mailto:hello@example.com">Send an Email</a>

<!-- Link to call a phone number -->
<a href="tel:+1234567890">Call Us</a>

Opening Links in a New Tab

Sometimes you want a link to open in a new tab so the user doesn’t leave your page. Use target="_blank":

<a href="https://github.com" target="_blank" rel="noopener noreferrer">
  Open GitHub in a new tab
</a>

Images — Adding Visuals to Your Page

The <img> tag embeds an image. Unlike most HTML tags, it’s self-closing — it doesn’t need a </img> tag because it doesn’t wrap any text. Think of it like a photo frame: you tell it which photo to display, and it shows it.

<img src="photo.jpg" alt="A scenic mountain view">

Image Attributes Explained

src (source): Tells the browser where the image file is. It can be a URL (https://example.com/photo.jpg) or a local file path (images/photo.jpg).

alt (alternative text): Describes the image for:

• Screen readers — blind users hear this description
• Search engines — helps Google understand the image
• Broken images — users still see the description if the image fails to load

<!-- Good alt text: describes what's in the image -->
<img src="chart.png" alt="Bar chart showing sales increased 40% in 2025">

<!-- Bad alt text: doesn't add value -->
<img src="chart.png" alt="chart">

<!-- Missing alt: fails accessibility requirements -->
<img src="chart.png">

width and height: Set the image dimensions in pixels. This helps the browser reserve space for the image while it loads, preventing the page from jumping around:

<img src="photo.jpg" alt="A mountain view" width="800" height="600">

loading="lazy": Tells the browser to wait to load the image until it’s about to scroll into view. This makes your page load faster, especially on mobile:

<img src="large-photo.jpg" alt="Scenic landscape" loading="lazy">

File Paths — Telling the Browser Where Files Are

When you link to pages or images, you need to tell the browser where they are. File paths come in two flavors.

Relative Paths

A relative path starts from where the current file is located:

Think of it like giving directions from where you’re standing:

• “It’s in the same room” → image.jpg
• “It’s in the next room” → images/image.jpg
• “Go back to the hallway, then the room on the left” → ../image.jpg

Absolute Paths

An absolute path starts from the site root (the homepage) and always begins with /:

<!-- Relative: links to a tutorial in the same category -->
<a href="../html-text">Text & Headings</a>

<!-- Absolute: always works from any page -->
<a href="/frontend/html/html-text/">Text & Headings</a>

<!-- Relative: image in the same folder -->
<img src="banner.jpg" alt="Site banner">

<!-- Absolute: image from site root -->
<img src="/images/banner.jpg" alt="Site banner">

When to use which: Relative paths are shorter and work if you move your site. Absolute paths are clearer and won’t break if the page structure changes. For internal links in tutorials, either is fine — just be consistent.

Making Images Clickable

You can wrap an <img> inside an <a> tag to make an image a link:

<a href="https://dodatech.com" target="_blank" rel="noopener">
  <img src="dodatech-logo.png" alt="Visit DodaTech website" width="200" height="80">
</a>

Now when users click the image, it acts like a link. This is commonly used for:

• Logo images that link to the homepage
• Product images that link to product pages
• Banner ads that link to the advertiser’s site

Responsive Images (Intermediate)

If you want to show different image files depending on the user’s screen size, use srcset or the <picture> element. This is an intermediate topic, but here’s a quick intro:

<!-- Serve small.jpg on small screens, large.jpg on big screens -->
<img src="default.jpg"
     srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1200w"
     sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw"
     alt="Responsive image">

<!-- Show different crops at different screen sizes -->
<picture>
  <source media="(min-width: 1200px)" srcset="wide.jpg">
  <source media="(min-width: 600px)" srcset="medium.jpg">
  <img src="small.jpg" alt="Photo of a landscape">
</picture>

This ensures mobile users don’t download huge desktop images, saving bandwidth and speeding up load times.

Links, Images & Security

We already covered rel="noopener noreferrer" for link security, but there’s another important point:

Always use HTTPS for external images. If your page is served over HTTPS (secure) but loads an image over HTTP (insecure), browsers will show a “mixed content” warning. This erodes user trust and can trigger security warnings in tools like Doda Browser.

DodaTech Insight: Durga Antivirus Pro scans web pages for mixed content and suspicious redirects. Writing clean HTML from the start keeps your pages safe and trustworthy.

Common Links & Images Mistakes

1. Missing alt Text

<!-- ❌ Wrong: screen readers can't describe this -->
<img src="chart.png">

<!-- ✅ Correct: descriptive alt text -->
<img src="chart.png" alt="Revenue chart showing 20% growth">

2. Forgetting rel="noopener noreferrer"

<!-- ❌ Wrong: security vulnerability -->
<a href="https://example.com" target="_blank">Click</a>

<!-- ✅ Correct: protects your page -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Click</a>

3. Broken File Paths

<!-- ❌ Wrong: wrong path -->
<img src="images/photo.jpg" alt="Photo">
<!-- Image is actually at: /assets/images/photo.jpg -->

<!-- ✅ Correct: check your file structure first -->
<img src="/assets/images/photo.jpg" alt="Photo">

4. Using “Click Here” as Link Text

<!-- ❌ Wrong: bad for SEO and accessibility -->
To see the tutorial, <a href="...">click here</a>.

<!-- ✅ Correct: descriptive link text -->
Check out the <a href="...">HTML basics tutorial</a>.

Screen reader users often navigate by jumping from link to link. “Click here” tells them nothing about where the link goes.

5. Not Specifying Image Dimensions

<!-- ❌ Wrong: page jumps when image loads -->
<img src="photo.jpg" alt="A photo">

<!-- ✅ Correct: browser reserves space -->
<img src="photo.jpg" alt="A photo" width="800" height="600">

Without dimensions, the browser doesn’t know how much space to reserve. As images load, the page content shifts — a frustrating experience called layout shift.

Try It Yourself

Edit this page in the sandbox — change the links, add a new image, or try a clickable image:

Common Mistakes Beginners Make

1. Skipping the Fundamentals

Many beginners jump straight to advanced topics without mastering the basics. Take time to understand the core concepts before moving on.

2. Not Practicing Enough

Reading tutorials without writing code leads to shallow understanding. Code along with every example and experiment on your own.

3. Ignoring Error Messages

Error messages tell you exactly what went wrong. Read them carefully — they usually point to the line and type of issue.

4. Copy-Pasting Without Understanding

It’s tempting to copy code from tutorials, but typing it yourself and understanding each line builds real skill.

5. Giving Up Too Early

Every developer hits frustrating bugs. Take breaks, ask for help, and remember that struggling is part of learning.

Practice Questions

Q1: What attribute tells an <a> tag where to navigate to?

Q2: Why is alt text required on images?

Q3: What does rel="noopener noreferrer" do?

Q4: What’s the difference between images/photo.jpg and /images/photo.jpg?

Q5: Why should you set width and height on images?

Challenge

Create a “Photo Gallery” page with:

• A heading
• At least 4 images with descriptive alt text
• Each image links to its source website (using target="_blank" and rel="noopener noreferrer")
• Images should have width, height, and loading="lazy"

Real-World Task

Go to any popular website (news site, blog, store) and inspect its links and images:

• Right-click a link → “Inspect” and look at its href, target, and rel attributes
• Right-click an image → “Inspect” and check its alt text, src, and loading attribute
• Count how many links have descriptive text vs “click here”

Frequently Asked Questions

What’s Next?

Now you can link pages and embed images. Let’s add some style:

What’s Next

Congratulations on completing this Html Links tutorial! Here’s where to go from here:

• Practice daily — Consistency is more important than long study sessions
• Build a project — Apply what you learned by building something real
• Explore related topics — Check out other tutorials in the same category
• Join the community — Discuss with other learners and share your progress

Remember: every expert was once a beginner. Keep coding!