HTML Navigation

HTML

Links in Navbar

To jump onto other page of the website, the most simple way to do this, is by adding a "a href" tag:

These are a straight way to make a navigation link into your website, but its also risky, because third party attacks can form over time.

Navigation with Aria Labels

A more advanced version would have "ul" tags and "aria-label" for accessibility:

<nav aria-label="Main navigation">
  <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>
    <li><a href="#faq">FAQ</a></li> <!-- anchor link to section -->
  </ul>
</nav>

Using the "aria-label" attribute, you gave users with disabilities to access the website text - for example NVDA/JAWS/VoiceOver can read aloud the text thats in the "aria-label" attribute, helping them navigate the website. The "ul" tag makes the links more organized, and also its meant that the "li" elements go inside "ul" elements, so you won't get any warnings in your console.

A more robust version

To make it even more friendly and safe aswell, you can include make something like this for traveling through pages:

<nav aria-label="Primary navigation">
  <ul>
    <li><a href="index.html" aria-current="page">Home</a></li>
    <li><a href="services.html">Services</a></li>
    <li><a href="blog.html" target="_blank" rel="noopener norefferer">Blog</a></li>
  </ul>
</nav>

'aria-current="page"' tells any user that this is the current page of the website. The 'rel="noopener norefferer"' attribute modifies the website, so external websites won't get the website's information when opening the link to an external site. Lastly, the 'target="_blank"' tag makes the link open the source in a new page.