Home/HTML/Links and Images

Links and Images in HTML

HTML Basics•Reading time: 7 min

Links and images are fundamental components that transform plain HTML documents into rich, interactive web pages.

In this tutorial, you'll learn how to create hyperlinks to connect web pages and how to add images to enhance your content.

1Hyperlinks

Hyperlinks, created with the <a> (anchor) element, allow users to navigate between web pages. The href attribute specifies the destination URL.

html

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

Visual Example:

Visit Example.com

Important Attributes:

href - Specifies the URL of the page the link goes to
target - Specifies where to open the linked document
title - Provides additional information about the link (shown as a tooltip)
rel - Specifies the relationship between the current document and the linked document

2Types of Links

HTML links can point to different types of resources and use different URL formats.

Absolute URLs

Points to a location defined by its absolute location on the web, including protocol and domain name.

html

<a href="https://www.example.com/path/page.html">Link</a>

Relative URLs

Points to a location that is relative to the current page.

html

<a href="about.html">About</a>
<a href="../products/index.html">Products</a>

Email Links

Opens the user's email client with a pre-filled recipient.

html

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

Page Anchors

Links to a specific section within the same page.

html

<a href="#section-id">Jump to Section</a>

<!-- Later in the page -->
<h2 id="section-id">Section Title</h2>

Link Target Attribute:

Use the target attribute to control how the link opens:

_self - Default. Opens in the same tab/window
_blank - Opens in a new tab/window
_parent - Opens in the parent frame
_top - Opens in the full body of the window

3Adding Images

The <img> element is used to embed images in an HTML page. It is a self-closing tag, which means it doesn't need a closing tag.

html

<img src="images/example.jpg" alt="Example image">

Visual Example:

Example Image (300×200)

Required Attributes:

src - Specifies the path to the image
alt - Provides alternative text for the image (important for accessibility)

4Image Attributes

Images can be customized with various attributes to control their appearance and behavior.

Size Attributes

Control the dimensions of the image:

html

<img src="example.jpg" alt="Example" width="300" height="200">

Note: Modern best practice is to control size with CSS, but these attributes help the browser allocate space before the image loads.

Additional Attributes

title - Shows a tooltip when hovering over the image
loading="lazy" - Defers loading images until they enter the viewport
srcset - Provides multiple image sources for different screen sizes/resolutions

Linking Images

Images can also be wrapped in <a> tags to create clickable images:

html

<a href="https://www.example.com">
  <img src="button.jpg" alt="Visit our website">
</a>

5Try It Yourself

Create an HTML document with links and images to practice what you've learned.

links-images-example.html

Example Code

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Links and Images Example</title>
</head>
<body>
  <h1>My Portfolio</h1>
  
  <h2 id="about">About Me</h2>
  <p>Hello! I'm a web developer learning HTML. Feel free to <a href="mailto:me@example.com" title="Send me an email">contact me</a>.</p>
  
  <h2 id="projects">My Projects</h2>
  <p>Check out my <a href="projects.html">projects page</a> to see my work.</p>
  
  <h2 id="gallery">Gallery</h2>
  <p>Here are some of my favorite photos:</p>
  
  <a href="images/large-photo1.jpg">
    <img src="images/thumbnail1.jpg" alt="Mountain landscape" width="200" height="150">
  </a>
  
  <img src="images/photo2.jpg" alt="City skyline" width="200" height="150" loading="lazy">
  
  <h2>Navigation</h2>
  <ul>
    <li><a href="#about">About Me</a></li>
    <li><a href="#projects">My Projects</a></li>
    <li><a href="#gallery">Gallery</a></li>
    <li><a href="https://github.com" target="_blank">My GitHub</a></li>
  </ul>
</body>
</html>

Pro Tip

Always provide meaningful alternative text for images that describes the content or function of the image. This helps users with screen readers understand your content and is also valuable if the image cannot be loaded. For decorative images that don't add meaning, use an empty alt attribute (alt="") so screen readers will skip them.

Summary

✓
Use the <a> element to create hyperlinks between pages
✓
Understand different types of URLs and link destinations
✓
Use the <img> element to embed images in your pages
✓
Always include alt text for accessibility
✓
Combine links and images to create interactive elements

Previous: Lists in HTML Next: Interactive Elements