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.
In this lesson, you will learn how to:
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, XML1<!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>© 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:
<section>
element with the id
attribute set to "Contact"
creates a new section for the contact information.<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.<a>
element with the href
attribute set to "#Home"
links to the id
attribute of the Home section.Adding interactivity and a contact section to your webpage is important for several reasons:
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.