HTML Links & Navigation

Important Rules

IDs must be unique within a document.
The fragment identifier is not sent to the server as part of the HTTP request target.
Fragments can identify elements or other supported resource-specific locations.
Do not use an ID that does not exist in the destination document.

9. Navigation Using the nav Element

The <nav> element represents a section containing major navigation links.

Example: Website Navigation

<header>
    <h1>Codementrix</h1>

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

This example creates a semantic navigation region with a list of links. CSS can style the list horizontally, vertically or as a responsive menu.

Multiple Navigation Regions

A webpage may contain more than one navigation region, such as a main menu, a table of contents and pagination.

<nav aria-label="Main navigation">
    <a href="/">Home</a>
    <a href="/courses/">Courses</a>
</nav>

<nav aria-label="Pagination">
    <a href="?page=1">Previous</a>
    <a href="?page=3">Next</a>
</nav>

Use distinct accessible names when multiple navigation regions appear on the same page.

10. The target Attribute

The target attribute specifies the browsing context in which a linked resource should open.

Open in the Current Context

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

Without a target attribute, a link normally navigates in the current browsing context.

Open in a New Tab or Window

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

The browser usually opens a new tab for target="_blank", but the actual behavior depends on the browser and user settings.

Modern browsers generally provide implicit noopener behavior for target="_blank". Explicitly adding rel="noopener" can still make your intent clear. Add noreferrer when you also want to suppress the Referer header.

Other Common Target Values

_self: the current browsing context.
_blank: a new browsing context, typically a tab or window.
_parent: the parent browsing context, if one exists.
_top: the top-level browsing context.

Parent and top targets are particularly relevant to documents embedded in frames.