Lists, Links, and Navigation

The web works because pages connect to other pages. HTML gives us tags for links, menus, and item groups.

List Tags

<ul>

Purpose:

• creates an unordered list

<ol>

Purpose:

• creates an ordered list

Common attributes:

• start
• reversed
• type

Possible type values:

• 1
• A
• a
• I
• i

<li>

Purpose:

• represents an item inside a list

Example:

<ol start="3">
    <li>Open your editor</li>
    <li>Create an HTML file</li>
    <li>Write your first page</li>
</ol>

The Anchor Tag: <a>

Purpose:

• creates links to pages, sections, files, email addresses, or phone numbers

Common attributes:

• href
• target
• rel
• download
• title

Common href values:

• https://example.com
• /about.html
• #contact
• mailto:hello@example.com
• tel:+123456789

Common target values:

• _self
• _blank

Example:

<a href="https://developer.mozilla.org" target="_blank" rel="noopener noreferrer">
    Learn HTML on MDN
</a>

Navigation Tag: <nav>

Purpose:

• wraps major navigation links

Example:

<nav aria-label="Main navigation">
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/courses.html">Courses</a></li>
        <li><a href="/contact.html">Contact</a></li>
    </ul>
</nav>

IDs and Section Links

You can link to a section on the same page by matching href="#section-id" with an element's id.

<a href="#faq">Jump to FAQ</a>
<h2 id="faq">Frequently Asked Questions</h2>

Good Link and Navigation Habits

• make link text descriptive
• avoid click here when possible
• use rel="noopener noreferrer" with target="_blank"
• wrap real site navigation in <nav>
• keep menus consistent across pages