Links and Images

Overview

Links and images bring pages to life. The anchor element <a> creates clickable links to other pages, sections, or files, while the <img> element embeds pictures. Both rely heavily on attributes to work, making them a natural next step after learning the basics of tags and attributes.

Syntax / Usage

The href attribute sets a link's destination; the src and alt attributes define an image's source and fallback text.

<!-- Link to another page -->
<a href="https://example.com">Visit Example</a>

<!-- Link that opens in a new tab safely -->
<a href="https://example.com" target="_blank" rel="noopener">New tab</a>

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

<!-- Embed an image with descriptive alt text -->
<img src="/images/beach.jpg" alt="Sunset over a sandy beach" />

Examples

A navigation bar using relative links:

<nav>
  <a href="/">Home</a>
  <a href="/about">About</a>
  <a href="/contact">Contact</a>
</nav>

A clickable image that links to a larger version:

<a href="/photos/full.jpg">
  <img src="/photos/thumb.jpg" alt="Mountain landscape thumbnail" width="200" />
</a>

Common Mistakes

• Leaving alt empty or missing on meaningful images, hurting accessibility and SEO
• Using target="_blank" without rel="noopener", a minor security risk
• Confusing absolute (https://...) and relative (/about) URLs
• Linking to # as a placeholder, which jumps to the top of the page
• Forgetting that <img> is a void element and needs no closing tag

See Also

html-attributes html-elements-and-tags html-accessibility-basics