HTML Navigation Bars - HTML Tutorial

Navigation bars are essential for guiding users through a website. They contain links to different sections or pages, helping users easily navigate. In HTML, we often use the <nav> element to create a navbar, grouping our links logically to improve both user experience and SEO.

HTML Navigation Bars Syntax

Explanation of Syntax:

<nav>: This element defines the section of the page meant for navigation links.
<ul>: An unordered list is used to organize the navigation links.
<li>: Each link is placed within a list item to structure them consistently.
<a href="#home">Home</a>: The anchor (<a>) tags are used for the actual links. The href attribute points to the section or page you want the link to lead to, such as #home for a section on the same page or an external URL.

<nav>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#services">Services</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

HTML
​x
 
<nav>  <ul>    <li><a href="#home">Home</a></li>    <li><a href="#about">About</a></li>    <li><a href="#services">Services</a></li>    <li><a href="#contact">Contact</a></li>  </ul></nav>

HTML Navigation Bars Example Code

Explanation of Code:

This code demonstrates how to structure a simple navigation bar using <nav>, <ul>, and <li> elements.
Each link within the <ul> (unordered list) is contained within a <li> (list item), creating a clean, organized structure for navigation links.
When you click on any link, it will navigate to sections of the page that correspond to the href values, like #home or #about, once those sections are defined. This example keeps it simple and highlights the core structure of a list-based navbar.

<!DOCTYPE html>
<html>
<head>
  <title>Navigation Bar Example</title>
</head>
<body>
  <nav> 
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#services">Services</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
  <h1>Welcome to TechKubo</h1>
  <p>Use the navigation bar above to explore different sections.</p>
</body>
</html>

HTML
 
<!DOCTYPE html><html><head>  <title>Navigation Bar Example</title></head><body>  <nav>     <ul>      <li><a href="#home">Home</a></li>      <li><a href="#about">About</a></li>      <li><a href="#services">Services</a></li>      <li><a href="#contact">Contact</a></li>    </ul>  </nav>  <h1>Welcome to TechKubo</h1>  <p>Use the navigation bar above to explore different sections.</p></body></html>

HTML Navigation Bars Syntax

HTML Navigation Bars Example Code

HTML Labs