CodeBlanks Logo Icon CodeBlanks
Login Register

Links in list items

HTML course · Beginner · Lesson 28/68

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

  1. 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.

  2. Give the link a target

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

  3. 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

All lessons in Beginner

1 Document basics

  1. What is HTML?
  2. The document skeleton
  3. Head and meta tags
  4. Title and language
  5. Comments and readability
  6. Summary - My first HTML page

2 Text content

  1. Headings: h1–h6
  2. Paragraphs
  3. Line break and horizontal rule
  4. Emphasis and important text
  5. Quotations and sources
  6. Summary - Article page

3 Project: About me page

  1. Project: About me page
  2. Skeleton and title
  3. Introductory text
  4. Emphasis and separation
  5. Project final - About me

4 Links and navigation

  1. Anchor links
  2. Absolute and relative URLs
  3. In-page links
  4. Link targets
  5. Email and phone links
  6. Summary - Navigation menu

5 Lists

  1. Unordered lists
  2. Ordered lists
  3. Description lists
  4. Nested lists
  5. Links in list items
  6. Summary - Table of contents

6 Project: Business card page

  1. Project: Business card page
  2. Name and title
  3. Contact list
  4. Skills and links
  5. Project final - Business card

7 Images and media

  1. Adding images
  2. Image dimensions
  3. Figure and figcaption
  4. Audio and video
  5. Alternative sources
  6. Summary - Media gallery

8 Intro to tables

  1. Table skeleton
  2. Header cells
  3. Table sections
  4. Caption and title
  5. Cell spanning
  6. Summary - Class schedule table

9 Project: Recipe page

  1. Project: Recipe page
  2. Recipe title and summary
  3. Ingredient list
  4. Steps and baking table
  5. Project final - Recipe page

10 Intro to forms

  1. Form skeleton
  2. Labelled input
  3. Input types
  4. Textarea and button
  5. Selection fields
  6. Summary - Feedback form

11 Intro to semantic tags

  1. Why semantic tags matter
  2. Header and footer
  3. Nav and main
  4. Article and section
  5. Aside and address
  6. Summary - Semantic blog skeleton

12 Beginner final

  1. Challenge - Document skeleton
  2. Challenge - Text and links
  3. Challenge - Lists and tables
  4. Challenge - Form and semantic structure
  5. Challenge - Beginner capstone