Skip to content
WANCODE
BM

Links, Images & Lists

14 minBeginnerHTML · CSS · JS

In this lesson

  • Create links with <a href> and tell absolute URLs from relative paths
  • Add images with src and write alt text that actually helps
  • Choose between <ul> and <ol> and fill them with <li> items

The big idea

Links and images point at other files using an address. Lists group related items. All three rely on attributes or child elements to do their job.

Links: the "hyper" in hypertext

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

HTML
<!-- Absolute URL: a full address, including https:// -->
<a href="https://developer.mozilla.org">MDN Web Docs</a>

<!-- Relative path: a file next to this one in your project -->
<a href="about.html">About me</a>

<!-- Relative path into a folder -->
<a href="recipes/teh-tarik.html">Teh tarik recipe</a>
  • Absolute URLs start with https:// and work from anywhere. Use them for other websites.
  • Relative paths are worked out from the current file's location. Use them for pages in your own site, so links keep working if your domain changes.
  • Write link text that makes sense on its own: "official Malaysia tourism website", not "click here". Screen reader users often browse a list of just the links.

You may see target="_blank" on links. It opens a new tab, but you don't need it, and most of the time it's better to let people choose for themselves. Inside WANCode's preview, links are shown but don't navigate away.

Images and why alt matters

HTML
<img src="images/nasi-lemak.jpg" alt="A plate of nasi lemak with sambal and a fried egg">

<img> is a void element: no closing tag. src is the image's address (absolute or relative, just like href). alt is a text description that's used when the image can't be seen:

  • Screen readers read the alt text aloud to blind and low-vision users.
  • If the image fails to load (slow data, wrong path), the alt text shows instead.
  • Search engines use it to understand the image.

Writing good alt text

Describe what the image shows in this context, as if telling a friend on the phone. Skip "image of" (screen readers already say it's an image). If an image is purely decorative, use an empty alt="" so it's skipped. Don't leave alt out completely.

The starter's image src is a long data: address: a tiny drawing written as text so it works without the internet. On a real site you'd normally write something short like src="images/nasi-lemak.jpg".

Lists

Unordered: order doesn't matter

HTML
<ul>
  <li>Roti canai</li>
  <li>Cendol</li>
</ul>

Ordered: order matters

HTML
<ol>
  <li>Boil water</li>
  <li>Brew tea</li>
</ol>

<ul> shows bullets, <ol> shows numbers. Either way, only <li> elements go directly inside.

Ask yourself: if I shuffled the items, would it still make sense? A shopping list, yes, so <ul>. Recipe steps or a top-10 ranking, no, so <ol>. Navigation menus are usually <ul>s full of links, too.

The <img> has no alt text, so a screen reader user gets nothing. Add an alt attribute that describes what's in the picture (look at the preview: rice, sambal, egg, cucumber…). Leave the long src exactly as it is.

Checks

  • The image still has its src
  • The image has a useful alt description

Check understanding

Q1

Who benefits most from a good alt attribute?

Q2

Which href is a relative path?

Q3

Which list should use <ol>?

What you learned

  • <a href="…"> makes a link; absolute URLs include https://, relative paths point to files in your own project.
  • <img> needs src (where the image is) and alt (what it shows, for people who can't see it).
  • <ul> for items in any order, <ol> when order matters; only <li> goes directly inside.
Preview

Console output from your code appears here.

Step 1 of 3