Navigation with HTML Lists and Links

1. The Semantic Structure of a Navigation Bar

A navigation bar isn't just a random collection of links. It's a primary landmark of your website. To communicate this meaning to browsers and assistive technologies like screen readers, we use a specific combination of semantic HTML elements.

• <nav>: This element wraps your main navigation links. It signals that the enclosed content is a navigation block, not just any group of links.
• <ul>: An unordered list. Since a navigation menu is essentially a list of pages, this is the semantically correct element to use as a container for the links.
• <li>: A list item. Each link in your navigation gets its own <li>.
• <a>: The anchor tag. This is what makes the text a clickable hyperlink.

This structure (<nav> -> <ul> -> <li> -> <a>) is a fundamental pattern in web development. To understand why we use these specific tags, let's consult an article that emphasizes the importance of semantic HTML.

Now, let's see this structure built in practice. The following video demonstrates how to create the basic HTML for a navigation bar.

2. Understanding Paths in the href Attribute

An anchor tag is useless without its href (Hypertext Reference) attribute, which tells the browser where to go when the link is clicked. The value of href is a path, and there are two main types: relative and absolute.

Relative Paths

A relative path points to a file in relation to the current file's location. This is the most common and portable way to link pages within the same website.

Imagine your project has this structure:

personal-profile-site/
├── index.html
└── contact.html

• To link from index.html to contact.html, the path is simply contact.html.
• To link from contact.html back to index.html, the path is index.html.

The following video provides an excellent, detailed explanation of how relative paths work in different scenarios, such as linking to files in parent or child directories. While it uses <img> tags for its examples, the logic for <a> tag href attributes is identical.

Absolute Paths

An absolute path is a fixed, complete address. There are two kinds:

1. Full URL: This is a complete web address, including the protocol (http:// or https://). You must use this when linking to an external website.

   • Example: https://github.com/yourusername

2. Root-Relative Path: This path starts with a forward slash (/) and is relative to the website's root directory.

   • Example: /contact.html
   • This tells the browser to start from the top level of your site and find the contact.html file. This can be more robust than a simple relative path in large, complex sites, but for our current project, simple relative paths are perfectly sufficient.

The MDN Web Docs offer a fantastic text-based reference for all these concepts. It's a great resource to read through and bookmark for the future.

3. Hands-On: Adding Navigation to Your Site

It's time to apply this to your personal-profile-site project. You will add a consistent navigation bar to both index.html and contact.html.

1. Open index.html: In VS Code, open your index.html file.

2. Add the Navigation Structure: Inside the <header> element, right after your <h1>, add the navigation structure.

   <header>
       <h1>My Personal Profile</h1>
       <nav>
           <ul>
               <li><a href="index.html">Home</a></li>
               <li><a href="contact.html">Contact</a></li>
           </ul>
       </nav>
   </header>
   

3. Open contact.html: Now open your contact.html file.

4. Add the Same Navigation: Copy the entire <nav>...</nav> block from index.html and paste it into the <header> of your contact.html file. Your site should now have consistent navigation.

A Best Practice: Indicating the Current Page

It's confusing for users if a page has a clickable link to itself. A common best practice is to visually distinguish the current page's link (e.g., make it bold, not clickable) to show the user where they are.

For accessibility, we can use the aria-current="page" attribute on the link that points to the current page. This tells screen readers that this link represents the page they are currently on.

Refine your index.html navigation:

<nav>
    <ul>
        <li><a href="index.html" aria-current="page">Home</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</nav>

Refine your contact.html navigation:

<nav>
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="contact.html" aria-current="page">Contact</a></li>
    </ul>
</nav>

Now, test your site using Live Server. You should be able to click back and forth between your Home and Contact pages!

4. Commit Your Work

You've made significant improvements to your site's structure and usability. Let's commit these changes to your Git repository.

1. Open the terminal in VS Code (Ctrl + ~).
2. You've modified two files. You can stage them both with a single command:

   git add .
   

3. Commit the changes with a descriptive message:

   git commit -m "feat: add navigation between home and contact pages"
   

4. Push your commit to your remote repository on GitHub:

   git push
   

Conclusion

Great job! You have now connected the different parts of your website into a navigable whole. You've learned not only how to create links but also how to do it using semantic, accessible, and maintainable best practices.

Key Takeaways:

• The standard structure for navigation is <nav><ul><li><a>...</a></li></ul></nav>.
• Relative paths (e.g., contact.html) are used for linking to other pages within your own site.
• Absolute paths (e.g., https://example.com) are used for linking to external websites.
• It's a best practice to keep navigation consistent across all pages of a site.
• Using aria-current="page" enhances accessibility by informing users which page they are currently on.

In our next lesson, we will prepare to add an "About" page to your site. To do this like a professional, we will dive into one of Git's most powerful features: branching. You'll learn how to create a separate branch to work on a new feature without affecting your main, working code.