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. Thehref
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 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>