HTML5 Starter: Links, Images, and Lists Done Properly

Contents5 sections

The skeleton gives a page its shape. Links, images, and lists give it its content. Nearly every page on the web is built from these three, and each has a small set of rules that are easy to get wrong.

This article covers the three, one at a time, with examples you can copy and test.

Links

A link is made with the anchor element, written <a>, and its href attribute. The href holds the address the link goes to. The text between the opening and closing tags is what the visitor sees and clicks.

<p>Read the <a href="about.html">about page</a>.</p>
<p>Learn more at <a href="https://developer.mozilla.org/">MDN Web Docs</a>.</p>
<h2 id="contact">Contact</h2>
<p>Jump to the <a href="#contact">contact section</a>.</p>

Absolute and relative addresses

There are two kinds of address.

An absolute URL gives the full location on the web, including the protocol and the domain name. It points to the same place no matter where it is used. Use an absolute link when you link to another website.

A relative URL gives a location relative to the file you are linking from. It points to different places depending on where the file using it sits. Use relative links when you link to other pages within your own website.

Relative addresses follow three patterns:

Same directory: just the file name, like contacts.html.
Down into a subdirectory: the directory name, a forward slash, and the file name, like projects/index.html.
Up into the parent directory: two dots, like ../pdfs/project-brief.pdf. Repeat the ../ to go up further.

Links to a part of a page

To link to a specific part of a document, give the target element an id attribute. Then put that id at the end of the address, after a # symbol. The third example above does this: the heading carries id="contact", and the link points to #contact. A # address on its own links to another part of the same document.

Write link text that says where it goes

Good link text describes the destination. “Download Firefox” is good. “Click here” is bad. Do not repeat the address as part of the link text, and do not write the word “link” in the link text. Keep link labels as short as you can while still saying where they go.

Images

An image is embedded with the <img> element. The src attribute holds the path to the image file.

<img src="images/dog.jpg" alt="A golden retriever puppy sitting on grass">
<img src="images/divider.svg" alt="">

The alt attribute is mandatory. It holds a text replacement for the image. Screen readers read it aloud, so visitors who cannot see the image still know what it means. The text also shows on the page if the image cannot load.

What goes in alt depends on what the image is for:

An informative image gets a short description of the essential information. The first example above describes what the image shows.
A decorative image gets an empty alt, written as alt="". The empty value tells browsers the image is not a key part of the content, and non-visual browsers may skip it. The attribute is still present. It is never left out.

The paths in the examples are examples. For the images to display, files must exist at those paths on your site.

Lists

There are two list elements, and the difference is meaning, not appearance.

An unordered list, <ul>, groups items with no numerical order. The order is meaningless. Items are typically shown with a bullet. A shopping list is an unordered list.

An ordered list, <ol>, holds items where the order matters: steps in a recipe, turn-by-turn directions. The test is simple. Change the order of the items. If the meaning changes, use <ol>. If it does not, use <ul>.

<ul>
  <li>Apples</li>
  <li>Oranges</li>
  <li>Citrus fruit
    <ul>
      <li>Lemons</li>
      <li>Limes</li>
    </ul>
  </li>
</ul>

<ol>
  <li>Preheat the oven.</li>
  <li>Mix the dry ingredients.</li>
  <li>Bake for 20 minutes.</li>
</ol>

Each item sits inside an <li> element. That is the one rule people get wrong: to nest a list, place it inside an <li> of the parent list. A <ul> or <ol> can never sit directly inside another <ul> or <ol>. Look at the example. The nested list of lemons and limes sits inside the “Citrus fruit” item, not directly inside the outer list.

The bullet or number style is not set in HTML. It is set in CSS, the language that controls presentation. That is a later article.

Try it yourself

Open the skeleton page you built in the previous article.
Add one link, one image, and one list inside the body, below the paragraph.
Save and reload. Click the link. Check the image. Read the list.

If the image does not show, check the src path first. Nine times out of ten, the path is wrong, not the tag.

Keep going

Links, images, and lists are the working parts of most pages. When your first site is built, run through the before-you-launch checklist before it goes live.