Lesson 2
Introduction to Navigation, Internal Links, and Sections
Introduction of Navigation, Internal Links, and Sections

Welcome back! Building a well-structured and easy-to-navigate webpage is essential for creating a pleasant user experience. In the previous lesson, we delved into HTML tables, a useful tool for presenting structured data. This time, we will focus on enhancing navigation within your webpage using internal links and sections.

What You'll Learn

In this lesson, you will learn how to create a navigation menu, divide your content into sections, and add internal links to make your webpage more navigable. These elements are key to improving user interaction and making your webpage more user-friendly.

For example, consider the following HTML code snippet:

HTML, XML
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <title>My Website</title>
6</head>
7<body>
8    <h1>Welcome to My Website</h1>
9    <nav>
10        <ul>
11            <li><a href="#Home">Home</a></li>
12            <li><a href="#About">About</a></li>
13            <li><a href="#Projects">Projects</a></li>
14        </ul>
15    </nav>
16    <section id="Home">
17        <h2>Home</h2>
18        <p>This is the homepage. Explore to learn more about me.</p>
19    </section>
20    <section id="About">
21        <h2>About</h2>
22        <p>I'm a budding web developer with a passion for creating interactive user experiences.</p>
23        <p>This is me:</p>
24        <img src="https://codesignal-staging-assets.s3.amazonaws.com/uploads/1719327271280/70ceee8e-f1da-40b2-8170-ff391ceca321.jpg" alt="Placeholder image to add spacing between sections">
25    </section>
26    <section id="Projects">
27        <h2>Projects</h2>
28        <ul>
29            <li>Project A — A simple static webpage.</li>
30            <li>Project B — A dynamic website using JavaScript and APIs.</li>
31        </ul>
32    </section>
33</body>
34</html>

With this example, you’ll see how using a nav element and sections with unique IDs helps organize and structure your webpage more effectively.

Let's break down the new concepts from the example above:

  • Navigation Menu: The nav element is used to create a navigation menu. It typically contains a list of links that direct users to different sections of the webpage.
  • Sections: The section element is used to divide the content of a webpage into distinct sections. Each section can have a unique ID that can be linked to from the navigation menu. Remember we achieved this in the previous course, by navigating to different headings using the # symbol followed by the heading's ID. But usually, we use <section> tags to divide the content into sections and navigate between them.
Why It Matters

Effective navigation is crucial for user satisfaction and engagement. By mastering the art of using navigation menus, internal links, and sections, you ensure that visitors to your website can easily find and access the information they need. This not only keeps them on your site longer but also makes their overall experience more enjoyable.

In this lesson, you’ll practice adding navigation elements, sections, and internal links to your webpage. This skill is vital for creating modern, user-friendly web pages that your audience will love to explore.

Ready to dive in? Let's start practicing and build a more interactive and navigable webpage together!

Enjoy this lesson? Now it's time to practice with Cosmo!
Practice is how you turn knowledge into actual skills.