Lesson 4
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, 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    <header>
9        <h1>Welcome to My Website</h1>
10        <nav>
11            <ul>
12                <li><a href="#Home">Home</a></li>
13                <li><a href="#About">About</a></li>
14                <li><a href="#Projects">Projects</a></li>
15                <li><a href="#Contact">Contact</a></li>
16                <li><a href="https://codesignal.com" target="_blank">Get to know CodeSignal</a></li>
17            </ul>
18        </nav>
19    </header>
20    <main>
21        <section id="Home">
22            <h2>Home</h2>
23            <p>This is the homepage. Explore to learn more about me.</p>
24            <p>This is me:</p>
25            <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">
26        </section>
27        <section id="Contact">
28            <h2>Contact</h2>
29            <p>You can reach me at <a href="mailto:email@example.com">email@example.com</a></p>
30        </section>
31    </main>
32    <footer>
33        <p>&copy; 2024 My Website</p>
34        <p><a href="#Home">Back to top</a></p>
35    </footer>
36</body>
37</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.
Why It Matters

Adding interactivity and a contact section to your webpage is important for several reasons:

  1. User Engagement: Interactive elements keep users engaged and encourage them to interact with your content.
  2. Accessibility: Contact sections make it easy for users to get in touch with you, which is crucial for personal portfolios, business websites, or any platforms offering services.
  3. Navigation Efficiency: Internal links improve the ease of navigation, especially on long pages, thereby improving the overall user experience.

By mastering these elements, you can make your webpage not just a static presentation but a dynamic, user-friendly interface that encourages interaction. This is key to maintaining a professional and effective web presence.

Ready to take your skills to the next level? Let's dive into the practice section and implement these exciting features together.

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