Links and Images

Two of the most powerful and frequently used HTML elements are a (anchor/link) and img (image). Together they make the web visual and interconnected.

Anchor Elements (Links)

The anchor element creates a hyperlink. The href attribute specifies the destination:

<!-- External link -->
<a href="https://www.example.com">Visit Example</a>

<!-- Internal link to another page -->
<a href="/about.html">About Us</a>

<!-- Link to a section on the same page -->
<a href="#contact">Jump to Contact</a>

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

<!-- Phone link -->
<a href="tel:+15551234567">Call Us</a>

Opening in a New Tab

Add target="_blank" to open a link in a new tab. When you do this, always include rel="noopener noreferrer" for security reasons:

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

In-page Navigation

Give an element an id attribute, then link to it with a # prefix:

<h2 id="contact">Contact Us</h2>
<!-- elsewhere on the page -->
<a href="#contact">Go to Contact</a>

Image Elements

The img element displays an image. It is a void element — it has no closing tag. The two required attributes are src (the image path or URL) and alt (a text description):

<img src="images/photo.jpg" alt="A sunny beach at sunset" />

The alt attribute is critical for:

• Accessibility — screen readers read it aloud for users who cannot see the image
• SEO — search engines index alt text
• Fallback — displayed if the image fails to load

Controlling Image Size

Set width and height in HTML to prevent layout shifts while the image loads:

<img
  src="images/logo.png"
  alt="Company Logo"
  width="200"
  height="80"
/>

You can also control size with CSS, which is more flexible.

Linking an Image

Wrap an img inside an a to make the image a clickable link:

<a href="https://example.com">
  <img src="logo.png" alt="Example.com" />
</a>

The figure and figcaption Elements

Use figure and figcaption when you want to associate a caption with an image:

<figure>
  <img src="chart.png" alt="Bar chart showing sales growth" />
  <figcaption>Figure 1: Sales growth from 2020 to 2024.</figcaption>
</figure>

Image Formats