Links in list items

Place links inside <li> to build menus and content lists.

A link inside a list item

You create a link by placing the <a> tag — which you already know — inside an <li> item. Example: <li><a href="about.html">About</a></li>.

The order matters: the <a> tag must be inside the <li>. The reverse (putting <li> inside <a>) is invalid; the browser reads it wrong.

Navigation list

A site's top menu is usually a <ul> with linked <li> items inside. This is called a navigation list. Each item links to a page in the site.

Example: a menu holding Home, About, Contact. The visual styling is done with CSS; on the HTML side there is only the structure and the links.

Exercise Write a three-link menu

Add a <ul> menu to body. It should have three <li> items; each containing an <a href="..."> link. For example Home (index.html), About (about.html), Contact (contact.html).

Show example solution

<body>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</body>

Test yourself

How is a link (<a>) written inside a list item?
- <a><li>Link</li></a>
- <li><a href="x.html">Link</a></li>
- <li>Link</li><a href="x.html"></a>
- <a href="x.html"></a><li>Link</li>
Show answer

<li><a href="x.html">Link</a></li> — Correct. a is written inside li; the reverse is invalid.

Give the link a target

<li><a ____>Home</a></li>

Show answer

<li><a href="index.html">Home</a></li>

Match each attribute to its role

href

The link's target
target

Where the link opens
rel

Relation between pages
id

An id for in-page anchors

Next lesson: Summary - Table of contents

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies