Adding Some Interactivity and Contacts

Adding Some Interactivity and Contacts

Welcome back! You've gained a solid understanding of adding a header, footer, and main sections to structure your webpage. Now, let's elevate your webpage further by adding a touch of interactivity and a contact section. This lesson will build on what you've already learned and introduce you to additional HTML attributes that make your website more functional and engaging.

What You'll Learn

In this lesson, you will learn how to:

  1. Add a Contact Section: A contact section typically includes ways to reach the webpage owner, such as email.
  2. Use the mailto Attribute: This attribute allows users to open their default email client directly from your webpage.

Here's an example snippet to get started:

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Website</title>
</head>
<body>
    <header>
        <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>
                <li><a href="#Contact">Contact</a></li>
                <li><a href="https://codesignal.com" target="_blank">Get to know CodeSignal</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section id="Home">
            <h2>Home</h2>
            <p>This is the homepage. Explore to learn more about me.</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="Contact">
            <h2>Contact</h2>
            <p>You can reach me at <a href="mailto:email@example.com">email@example.com</a></p>
        </section>
    </main>
    <footer>
        <p>&copy; 2024 My Website</p>
        <p><a href="#Home">Back to top</a></p>
    </footer>
</body>
</html>

Let's break down the example to understand the new elements:

  • Contact Section: The <section> element with the id attribute set to "Contact" creates a new section for the contact information.
  • The <a> element with the href attribute set to "mailto:email@example.com" creates a link that opens the user's default email client with the email address.
  • We also added an internal link in the footer to help you navigate back to the top of the page. The <a> element with the href attribute set to "#Home" links to the id attribute of the Home section.
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