HTML navigation links help users move between different pages and sections of a website. They are an essential part of website navigation and are commonly used in headers, menus, sidebars, footers, breadcrumbs, and tables of contents.

Navigation links are created using the HTML <a> element. They can point to internal pages, external websites, specific sections of a page, email addresses, or other resources.

If you are new to hyperlinks, start with HTML Links and HTML Link Syntax.

What Are HTML Navigation Links?

Navigation links are clickable links that help visitors move from one location to another.

For example:

<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="services.html">Services</a>
<a href="contact.html">Contact</a>

Each link points to a different webpage.

A navigation menu makes it easier for visitors to understand the structure of a website and quickly find important pages.

Creating a Basic Navigation Menu

You can use the <nav> element to identify a section of a webpage that contains navigation links.

<nav>
    <a href="index.html">Home</a>
    <a href="about.html">About</a>
    <a href="services.html">Services</a>
    <a href="contact.html">Contact</a>
</nav>

The <nav> element provides semantic meaning and indicates that the content is a navigation section.

Navigation Links Using Lists

Navigation menus are often created using an unordered list.

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

Using lists provides a clear structure for navigation items and makes the menu easier to style with CSS.

Styling Navigation Links with CSS

CSS can be used to turn a basic navigation menu into a horizontal navigation bar.

<style>
nav a {
    margin-right: 20px;
    text-decoration: none;
    color: #0066cc;
}

nav a:hover {
    text-decoration: underline;
}
</style>

<nav>
    <a href="index.html">Home</a>
    <a href="about.html">About</a>
    <a href="contact.html">Contact</a>
</nav>

The CSS changes the appearance of the links without changing their HTML functionality.

You can learn more about styling HTML content in HTML Styles.

Internal Navigation Links

Internal navigation links connect pages within the same website.

For example:

<nav>
    <a href="/html/html-elements/">HTML Elements</a>
    <a href="/html/html-attributes/">HTML Attributes</a>
    <a href="/html/html-links/">HTML Links</a>
</nav>

Internal links help visitors discover related content and create a logical website structure.

For technical websites and tutorial sites, well-planned internal navigation can make it easier for users to move between related topics.

Navigation Links to Page Sections

Navigation links can also point to specific sections on the same page.

<nav>
    <a href="#html-links">HTML Links</a>
    <a href="#html-images">HTML Images</a>
    <a href="#html-tables">HTML Tables</a>
</nav>

The destination sections need matching IDs:

<h2 id="html-links">HTML Links</h2>

<h2 id="html-images">HTML Images</h2>

<h2 id="html-tables">HTML Tables</h2>

This technique is useful for long tutorials and documentation pages. Learn more about this feature in HTML Bookmarks.

Navigation Links to External Websites

You can also include external websites in a navigation menu.

<nav>
    <a href="https://example.com">Example</a>
    <a href="https://www.wikipedia.org">Wikipedia</a>
</nav>

When linking to external resources, make sure the destination is relevant and trustworthy.

Navigation Links and Relative URLs

Relative URLs are commonly used for internal navigation.

<a href="about.html">About Us</a>

Absolute URLs can be used when the complete destination needs to be specified.

<a href="https://example.com/about.html">
    About Us
</a>

Learn more about the difference between these two approaches in HTML Relative URLs and HTML Absolute URLs.

Best Practices for HTML Navigation Links

Use clear and descriptive link text so visitors can understand where each link leads. Keep the navigation structure simple and organize related pages logically.

Use the semantic <nav> element for major navigation sections, and make sure navigation links are easy to access on both desktop and mobile devices.

Good HTML navigation helps users explore a website efficiently and creates a clear connection between related pages and sections.