Links and images: connecting pages and showing pictures

The "HyperText" in HTML means links: the ability to jump from one page to another anywhere in the world. Links are what made separate documents into a web. Images make pages human: product photos, logos, team pictures and maps. This unit covers both in full detail, from the first <a> tag to professional habits that make pages fast, accessible and trusted.

Part 1: Links

What is a link?

A link (hyperlink) is clickable content that takes the user to another place: another website, another page on your site, a section of the same page, or an action like starting a phone call.

Why links matter

• Navigation: menus, buttons like "Contact us" and "Buy now" are links.
• The web itself: without links, every website would be an island.
• SEO: Google discovers pages by following links, and links from other trusted sites help your site rank.
• Business actions: "Call now", "Chat on WhatsApp" and "Email us" links turn visitors into customers with one tap.

Who uses them and where

Every website, every web app and most emails use links: navigation menus, footers, blog posts, online shops (product pages), government portals ("Apply here"), and marketing emails ("Shop the sale").

The anatomy of a link

<a href="https://kra.go.ke">Visit the KRA website</a>
 │   │                       │
 │   │                       └ link text: what users see and click
 │   └ href: where the link goes (the destination)
 └ a = anchor element

<p><a href="https://marzleytechsolutions.co.ke">Visit Marzley Tech</a></p>
<p><a href="https://www.ecitizen.go.ke">Go to eCitizen</a></p>

Types of link destinations

<p><a href="mailto:hello@example.co.ke?subject=Website%20quote">Email us for a quote</a></p>
<p><a href="tel:+254712345678">Call 0712 345 678</a></p>
<p><a href="https://wa.me/254712345678?text=Hello%2C%20I%20need%20a%20website">Chat on WhatsApp</a></p>
<p><a href="sms:+254712345678">Send an SMS</a></p>

Notice %20 and %2C in the examples: spaces and commas in URLs are written as URL-encoded characters (%20 = space, %2C = comma).

Links to a section of the same page

Give the target element an id, then link to # plus that id. Long pages (FAQs, documentation, this lesson's contents list) use this.

<p><a href="#prices">Jump to prices</a> · <a href="#contact">Jump to contact</a></p>

<h2 id="services">Services</h2>
<p>Websites, apps, hosting and SEO.</p>
<p style="height:300px">(Long content here…)</p>

<h2 id="prices">Prices</h2>
<p>Websites from KSh 15,000.</p>
<p style="height:300px">(More content…)</p>

<h2 id="contact">Contact</h2>
<p>Call 0712 345 678.</p>
<p><a href="#">Back to top</a></p>

An id must be unique on the page and shouldn't contain spaces.

Opening links in a new tab

target="_blank" opens the link in a new tab:

<p><a href="https://www.google.com/maps" target="_blank" rel="noopener noreferrer">Open Google Maps (new tab)</a></p>

• Add rel="noopener noreferrer" with target="_blank" for external sites. noopener stops the new page from controlling your page through JavaScript (a security issue called "tabnabbing"); modern browsers now apply it by default, but adding it is still best practice for older browsers.
• Use new tabs sparingly. Users can open new tabs themselves. Good uses: PDFs, help pages in the middle of a form, external maps. Tell users: "(opens in a new tab)".

Download links

The download attribute suggests the browser saves the file instead of opening it (works for files on your own site):

<a href="files/marzley-price-list.pdf" download>Download our price list (PDF, 240 KB)</a>

Always say the file type and size, especially for users on mobile data.

The title attribute

title shows a small tooltip on hover with a mouse. It doesn't work on touch screens and screen readers handle it inconsistently, so **never put important information only in title**.

Writing good link text

Link text should make sense on its own. Screen reader users often list all links on a page; a list of "click here, click here, read more" is useless.

What can be inside a link?

Almost anything: text, images, or a whole card with a heading and paragraph. But you can't put a link inside another link, or a button inside a link.

<a href="https://marzleytechsolutions.co.ke/work" style="display:block;border:1px solid #ccc;padding:12px;border-radius:10px;text-decoration:none;color:inherit">
  <h3>Our portfolio</h3>
  <p>See websites and systems we've built for Kenyan businesses.</p>
</a>

Link states (preview of CSS)

Browsers style links by state: blue underlined (unvisited), purple (visited), and you can style :hover (mouse over) and :focus (keyboard). Keep links visually obvious; users expect underlined or clearly coloured links.

Part 2: Images

What is a digital image?

A digital photo is a grid of tiny coloured squares called pixels. A photo that is 1200 pixels wide and 800 tall has 960,000 pixels. More pixels mean more detail and a bigger file. Big files are slow and expensive on mobile data, so web images must be the right size.

Why images matter

• People decide whether to trust a business in seconds; real photos of products, staff and work help.
• Online shops depend on product photos.
• Images explain things words can't: maps, diagrams, screenshots.
• But images are usually the heaviest part of a page. A page full of 5 MB phone photos can cost a visitor more data than they want to spend and load slowly.

Image formats

The <img> element

<img src="images/shop-front.webp" alt="Juma's Electronics shop front on Kenyatta Avenue" width="800" height="600">

<img> is a void element: no closing tag.

<img src="https://picsum.photos/320/180" alt="A random landscape photo" width="320" height="180">
<p>Photos should be small (WebP or JPG) so pages load fast on mobile data.</p>

Writing excellent alt text

alt text is read aloud by screen readers, shown when an image fails to load (common on slow networks), and used by Google Images to understand the picture.

How to write it:

1. Describe the purpose and content, briefly: what would you say if reading the page to someone on the phone?
2. Be specific: "Red Toyota Vitz 2014, front view" beats "car".
3. Don't start with "image of" or "picture of"; screen readers already say "image".
4. Usually under about 125 characters.
5. Decorative images (background swirls, dividers) get an empty alt="" so screen readers skip them.
6. Images of text must have that text in the alt.
7. Linked images: describe where the link goes, e.g. alt="Marzley Tech home" for a logo link.

Width, height and layout shift

When the browser doesn't know an image's size, it shows the text first, then pushes everything down when the image arrives. You've probably tapped the wrong button because of this. Setting width and height (the real image size) lets the browser reserve the space. Google measures this as Cumulative Layout Shift (CLS), part of its page experience signals. CSS can still make the image responsive (max-width: 100%; height: auto;).

Images from other websites (hotlinking)

You can set src to a full URL from another site, but:

• The image may disappear or change at any time.
• You use the other site's bandwidth without permission.
• Copyright: most images online are owned by someone. Use your own photos, images you've paid for, or free-licence sites (Unsplash, Pexels, Pixabay) and follow their terms.

Clickable images

Put the <img> inside an <a>:

<a href="https://marzleytechsolutions.co.ke">
  <img src="https://picsum.photos/200/80" alt="Marzley Tech home page" width="200" height="80">
</a>

Captions (preview)

<figure> and <figcaption> group an image with a visible caption. You'll use them in the responsive images unit:

<figure>
  <img src="https://picsum.photos/300/180" alt="Mount Kenya at sunrise" width="300" height="180">
  <figcaption>Mount Kenya from Nanyuki, early morning.</figcaption>
</figure>

Common mistakes

Practice tasks

1. Create a "Contact us" section with links to call, SMS, email (with a subject) and WhatsApp (with a pre-filled message).
2. Make a long page with three sections and a mini menu at the top that jumps to each section, plus "Back to top" links.
3. Add three images with excellent alt text: a product, a team photo and a decorative divider.
4. Make a clickable logo image that links to a home page.
5. Take a photo with your phone, check its file size, then compress it with Squoosh to under 200 KB. Compare the quality.

Summary

• Links use <a href="...">; the link text should describe the destination.
• href can be an absolute URL, a relative path, a #fragment, mailto:, tel:, sms: or a WhatsApp link.
• target="_blank" opens a new tab; use it sparingly and with rel="noopener noreferrer" for external sites.
• Images use <img src alt width height>; it's a void element.
• alt describes the image's content and purpose; decorative images get alt="".
• Choose the right format (WebP/JPG for photos, SVG for logos), resize and compress images, and respect copyright.