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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Website</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <nav>
        <ul>
            <li><a href="#Home">Home</a></li>
            <li><a href="#About">About</a></li>
            <li><a href="#Projects">Projects</a></li>
        </ul>
    </nav>
    <section id="Home">
        <h2>Home</h2>
        <p>This is the homepage. Explore to learn more about me.</p>
    </section>
    <section id="About">
        <h2>About</h2>
        <p>I'm a budding web developer with a passion for creating interactive user experiences.</p>
        <p>This is me:</p>
        <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">
    </section>
    <section id="Projects">
        <h2>Projects</h2>
        <ul>
            <li>Project A — A simple static webpage.</li>
            <li>Project B — A dynamic website using JavaScript and APIs.</li>
        </ul>
    </section>
</body>
</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.
Sign up

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal