Welcome back! You've already learned how to create a well-structured webpage with navigation menus and sections in your previous lesson. This time, we'll take it a step further by adding headers, footers, and main content areas to your webpage. These elements help in organizing your content better and make your webpage more professional and user-friendly.
In this lesson, you will learn how to:
Here's an example snippet to kick things off:
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 </ul> 16 </nav> 17 </header> 18 <main> 19 <section id="Home"> 20 <h2>Home</h2> 21 <p>This is the homepage. Explore to learn more about me.</p> 22 </section> 23 <section id="About"> 24 <h2>About</h2> 25 <p>I'm a budding web developer with a passion for creating interactive user experiences.</p> 26 </section> 27 <section id="Projects"> 28 <h2>Projects</h2> 29 <ul> 30 <li>Project A - A simple static webpage.</li> 31 <li>Project B - A dynamic website using JavaScript and APIs.</li> 32 </ul> 33 </section> 34 </main> 35 <footer> 36 <!-- Note, that the © is an HTML entity for the copyright symbol --> 37 <p>© 2024 My Website</p> 38 </footer> 39</body> 40</html>
This example shows a clear structure with a header, main content, and a footer to provide a seamless experience for your webpage visitors.
Let's break down each part:
<header>
semantic tag.<main>
semantic tag.<footer>
semantic tag.By using these elements, you can create a well-organized and professional webpage that is easy to navigate and visually appealing.
Notice, that we refer to these tags as semantic tags. Semantic tags do not have any default styling, as opposed to non-semantic tags like <p>
, <li>
, etc., which have default styling applied by the browser. These tags are used to define the structure of the webpage and provide meaning to the content. They help search engines understand the content better and improve accessibility for users.
Incorporating a header, footer, and main section is crucial for several reasons:
By mastering these elements, you ensure your webpage is not only aesthetically pleasing but also user-friendly and professional. This is essential whether you're creating a personal blog or a professional portfolio.
Excited? Now, let’s move to the practice section where you'll get hands-on experience in adding these critical elements to your webpage.