Links and Images in HTML

Analogy categoryAnalogies

Introduction

Links and images are what make the web interactive and visual. The anchor tag <a> connects pages together, while the <img> tag embeds pictures directly into a page. Both rely on a handful of important attributes to work correctly and remain accessible.

🏏

Cricket analogy: Think of the <a> tag as a single connecting run Virat Kohli takes between two ends of the pitch, while <img> is like the giant screen replay showing a boundary — both need the right setup (attributes) to work and be understood by everyone in the stands.

Syntax

html

<a href="https://example.com" target="_blank" rel="noopener">Visit Example</a>

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

Explanation

The href attribute on <a> specifies the destination URL, which can be an absolute URL, a relative path, or an in-page anchor like #section-id. Setting target="_blank" opens the link in a new tab; when doing so, rel="noopener" should be added to prevent the new page from gaining access to the original page's window object, a common security concern. The <img> tag is a self-closing (void) element that requires src to point to the image file and alt to provide descriptive text for screen readers and for cases when the image fails to load. Specifying width and height helps the browser reserve space before the image loads, reducing layout shift.

🏏

Cricket analogy: href is like choosing between a quick single (relative path), a boundary (absolute URL), or a return to the striker's end (#anchor); opening in a new tab is like calling for a third umpire review, and rel="noopener" is the fielding restriction stopping the new play from tampering with the original innings.

Relative paths like ./images/photo.jpg or ../assets/logo.png are resolved relative to the current HTML file's location, while paths starting with / are resolved relative to the site's root.

Example

html

<nav>
  <a href="/">Home</a>
  <a href="/about">About</a>
  <a href="https://developer.mozilla.org" target="_blank" rel="noopener">MDN Docs</a>
</nav>

<figure>
  <img src="images/team-photo.jpg" alt="Our team at the annual conference" width="800" height="500">
  <figcaption>The team at this year's conference.</figcaption>
</figure>

Output

The browser renders three clickable navigation links, with 'MDN Docs' opening in a new browser tab. Below that, the team photo appears at 800 by 500 pixels with a caption reading 'The team at this year's conference.' displayed beneath it.

🏏

Cricket analogy: The rendered page is like a scoreboard displaying three fixture links, with the 'MDN Docs' link acting like a day-night match that opens on a separate broadcast feed, and the team photo captioned below is like the post-match squad photo shown under the highlights reel.

Never leave alt="" off entirely or fill it with keyword-stuffed text purely for SEO. Decorative images should use alt="" (empty but present), while meaningful images need a concise, descriptive alt value.

Key Takeaways

The href attribute defines a link's destination; it can be absolute, relative, or an in-page anchor.
Always pair target="_blank" with rel="noopener" for security.
<img> is a void element requiring both src and a meaningful alt attribute.
Setting width and height on images helps prevent layout shift during page load.
<figure> and <figcaption> semantically group an image with its caption.