Links, images and lists

About 35 minutes · read, practise, then check your understanding

Links connect the web; images and lists make information easy to scan. You will use these three elements on almost every page you ever build.

You will learn

How to link to another page or website
How to add an image with a proper description
How to write bulleted and numbered lists
What an attribute is

Before you start

Lesson: Your first HTML page

The idea, simply

Some tags need extra information to work. A link needs to know where it goes; an image needs to know which file to show. You give this information with attributes, written inside the opening tag as name="value".

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

A link: href is the attribute that holds the destination

An image uses the <img> tag. It has no closing tag, because there is no content between tags; the image is the content. It needs two attributes: src (where the image file is) and alt (a short description).

<img src="temple.jpg" alt="The temple gopuram at sunset" width="320">

alt is read aloud to blind users and shown if the image fails to load

Lists come in two kinds. Use <ul> (unordered) when order does not matter, like a shopping list. Use <ol> (ordered) when it does, like steps in a recipe. Each item goes in an <li>.

<h2>Things I need</h2>
<ul>
  <li>Laptop or phone</li>
  <li>Internet for 30 minutes a day</li>
</ul>

<h2>How to make tea</h2>
<ol>
  <li>Boil water</li>
  <li>Add tea powder</li>
  <li>Add milk and sugar</li>
</ol>

See it in action

<h1>Karthik's favourite places</h1>
<p>Places I want to visit after my final exams:</p>
<ol>
  <li><a href="https://en.wikipedia.org/wiki/Ooty">Ooty</a></li>
  <li><a href="https://en.wikipedia.org/wiki/Rameswaram">Rameswaram</a></li>
</ol>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/Nilgiri_Mountain_Railway_-_Ooty.jpg/320px-Nilgiri_Mountain_Railway_-_Ooty.jpg" alt="The Nilgiri mountain train near Ooty">

A list of links plus an image with a meaningful alt

Common mistakes

Writing link text like 'click here'.: Say where the link goes. Screen-reader users often jump from link to link.
Leaving alt empty on meaningful images.: Describe the image. Use alt="" only for purely decorative images.
Putting text directly inside <ul> without <li>.: Every item must be wrapped in its own <li>.

Key takeaways

Attributes add information inside the opening tag: name="value".
a + href makes links; img + src + alt shows images.
ul for any order, ol when order matters, li for each item.