Chapter 3

Links, Images and Lists

Connect pages with links, add pictures with images, and organise content using ordered and unordered lists.

Links, images and lists are three of the most useful pieces of any web page. They let you connect pages together, show pictures, and organise information neatly.

Links with the anchor tag

A link is made with the <a> (anchor) tag. The href attribute holds the address the link points to. The text between the tags is what the visitor clicks.

<a href="https://jomkelas.my">Visit JomKelas</a>

An attribute gives extra information about an element. It is written as a name, an equals sign, and a value in quotes. Links can point to another website, to another page in the same folder, or to a spot further down the same page.

Images

Images use the <img> tag, which is empty and has no closing tag. The src attribute gives the file path, and the alt attribute gives a short text description shown if the image fails to load and read aloud by screen readers.

<img src="cat.jpg" alt="A sleeping cat">

Always write good alt text. It helps people who cannot see the image and improves how search engines understand your page.

Lists

An unordered list <ul> shows bullet points, used when order does not matter. An ordered list <ol> shows numbers, used for steps or ranking. Each item sits inside a <li> (list item) tag.

<ul>
  <li>Milk</li>
  <li>Bread</li>
</ul>

Remember

  • The href attribute holds a link destination.
  • The img tag needs src for the file and alt for a description.
  • Use <ul> for bullets and <ol> for numbers.
  • Every list item goes inside an <li> tag.

Stuck on this topic? A verified JomKelas tutor can walk you through it.

Find a verified tutor