The <nav> element in HTML is used to define a navigation section on a webpage. It's a semantic HTML5 element designed to enclose navigation links, making it clear to both users and search engines that this part of the page is dedicated to navigation.
The <nav> element groups the links together that navigate to different parts of the website or to other related sites. It helps to improve the structure and accessibility of your webpage. Using <nav> helps screen readers and other assistive technologies to understand that the enclosed links are for navigation purposes.
It’s commonly used for main site navigation menus, but it can also be used for secondary navigation like pagination or related links.
navigation-menu.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Example of nav Element</title> <style> body { font-family: Arial, sans-serif; } nav { background-color: #333; padding: 10px; } nav a { color: white; text-decoration: none; margin: 0 15px; } nav a:hover { text-decoration: underline; } </style> </head> <body> <header> <nav> <a href="#home">Home</a> <a href="#about">About</a> <a href="#services">Services</a> <a href="#contact">Contact</a> </nav> </header> <main> <section id="home"> <h1>Welcome to the User</h1> <p>This is the home section.</p> </section> <section id="about"> <h2>About Us</h2> <p>This is the about section.</p> </section> <section id="services"> <h2>Our Services</h2> <p>This is the services section.</p> </section> <section id="contact"> <h2>Contact Us</h2> <p>This is the contact section.</p> </section> </main> <footer> <p>© 2024 Example Company</p> </footer> </body> </html>
Previous Next Home
No comments:
Post a Comment