Links & Images

Links and images are two of the most important elements on the web. Links connect pages together and form the fabric of the internet. Images bring visual content to life. Mastering the <a> and <img> elements — along with their attributes — is essential for building any website.

---

Links with the <a> Element

The anchor element <a> creates a hyperlink:

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

Essential Attributes

Attribute	Purpose	Example
href	The URL the link points to	href="https://example.com"
target	Where to open the link	target="_blank" (new tab)
rel	Relationship to the linked page	rel="noopener noreferrer"
title	Tooltip text on hover	title="Visit our homepage"
download	Download the linked file	download="report.pdf"

Types of Links

<!-- External link (absolute URL) -->
<a href="https://www.example.com">External Site</a>

<!-- Internal link (relative URL) -->
<a href="/about.html">About Page</a>
<a href="contact.html">Contact Page</a>

<!-- Link to a section on the same page (anchor/fragment) -->
<a href="#section2">Jump to Section 2</a>
...
<h2 id="section2">Section 2</h2>

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

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

<!-- Download link -->
<a href="report.pdf" download>Download Report</a>

Opening Links in a New Tab

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

Security note: Always add rel="noopener noreferrer" when using target="_blank". Without it, the new page can access your page's window.opener object, which is a security risk.

---

Relative vs Absolute URLs

Type	Format	Example
Absolute	Full URL including protocol and domain	https://www.example.com/about.html
Relative	Path relative to the current page	about.html or /about.html

<!-- Same directory -->
<a href="contact.html">Contact</a>

<!-- Subdirectory -->
<a href="pages/about.html">About</a>

<!-- Parent directory -->
<a href="../index.html">Home</a>

<!-- Root-relative (from the site root) -->
<a href="/pages/about.html">About</a>

---

Images with the <img> Element

The <img> element embeds an image in the page. It is a void element (no closing tag):

<img src="photo.jpg" alt="A sunset over the ocean" width="800" height="600">

Essential Attributes

Attribute	Purpose	Required?
src	The path to the image file	Yes
alt	Alternative text for accessibility and when the image cannot load	Yes
width	The display width in pixels	Recommended
height	The display height in pixels	Recommended
loading	Lazy loading ("lazy") or eager loading ("eager")	Optional