HTML Part 3: Links and images

Links are what turn separate pages into a web, and images are what make people stop and look.

Links

A link is an <a> element. href says where it goes, and the text between the tags is what people click.

<a href="https://www.wikipedia.org">Wikipedia</a>

Write link text that makes sense on its own. "Read the menu" works better than "click here", both for people skimming and for screen reader users, who can pull up a list of every link on the page.

Paths: how a link finds your file

For your own pages, you point to the file with a path instead of a full web address. Say your project looks like this:

my-site/  index.html  about.html  images/    logo.png  blog/    first-post.html

From index.html:

• about.html is in the same folder: href="about.html"
• the post is inside the blog folder: href="blog/first-post.html"

From blog/first-post.html, going up one folder takes ../:

• href="../index.html"

These are called relative paths, because they start from where the current file is. They keep working when you move the whole folder to another computer or put it online.

Other kinds of links

<a href="#contact">Jump to contact</a><h2 id="contact">Contact</h2>
<a href="mailto:asha@example.com">Email me</a><a href="tel:+911234567890">Call us</a>

A link starting with # jumps to the element with that id on the same page. mailto: opens an email app, and tel: offers to dial the number, which is handy on phones.

To open a link in a new tab, add target="_blank". Use it sparingly. Most people would rather decide that themselves.

Images

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

<img> has no closing tag. src is the path to the image file, and it follows the same path rules as links.

alt describes the image in words. Screen readers read it out, and browsers show it when the image fails to load. Describe what matters in the picture: "Bar chart showing sales doubling in March" tells people far more than "chart". If an image is only decoration, write alt="" so screen readers skip it.

width and height are in pixels. Include them even if CSS resizes the image later: the browser uses them to keep the right amount of space while the image loads, so the text below doesn't jump when it arrives.

Which image format?

• JPG for photos
• PNG for screenshots and graphics with sharp edges
• SVG for logos and icons, which stay sharp at any size
• WebP for photos or graphics that should load fast. It's usually smaller than JPG or PNG.

Images that link

Put the <img> inside the <a>:

<a href="index.html"><img src="images/logo.png" alt="Home"></a>

Here the alt text says where the link goes, because for a screen reader user it is the link text.

Try it

Make an about.html page, and link index.html and about.html to each other. Add a photo of yourself to the about page, with a good alt text.

Next: HTML Part 4: Forms and buttons