HTML Navigation Menus

« Prev Next »

A navigation menu on HTML consists of links that enable users to navigate from one page to another or between different sections of the site. This navigation menu appears at the upper section or side of a webpage.

html-navigation-menus

Semantic Tag: <nav>

The <nav> tag specifies a section designated for navigation links. The navigation tag functions semantically to enable search engines and screen readers to decipher your website's structure.

 

Example

<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>
Run ›

Best Practices

  • The <nav> element should surround your navigation links to enhance semantic understanding.
  • Structure menus effectively and enhance accessibility by using <ul> and <li> elements.
  • Ensure every link contains a meaningful href attribute along with descriptive link text.
  • Utilize CSS to enhance your page's layout design and add interactive features like hover effects and active states.
« Prev Next »

Quickly Find What You Are Looking For

OnlineTpoint is a website that is meant to offer basic knowledge, practice and learning materials. Though all the examples have been tested and verified, we cannot ensure the correctness or completeness of all the information on our website. All contents published on this website are subject to copyright and are owned by OnlineTpoint. By using this website, you agree that you have read and understood our Terms of Use, Cookie Policy and Privacy Policy.