About Lesson
Building a Simple Web Page with Semantic HTML:
Here’s an example of a simple webpage structure using semantic HTML:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Semantic HTML Example</title>
</head>
<body>
<!-- Header Section -->
<header>
<h1>My Personal Blog</h1>
<nav>
<a href="#home">Home</a>
<a href="#blog">Blog</a>
<a href="#contact">Contact</a>
</nav>
</header>
<!-- Main Content Area -->
<main>
<!-- Main Article Section -->
<article>
<h2>Why Semantic HTML is Important</h2>
<p>Understanding semantic HTML helps in creating more accessible and SEO-friendly web pages...</p>
</article>
<!-- Recent Posts Section -->
<section>
<h2>Recent Posts</h2>
<!-- Individual Post Articles -->
<article>
<h3>The Basics of HTML</h3>
<p>An introduction to HTML and how to use it effectively.</p>
</article>
<article>
<h3>Advanced CSS Techniques</h3>
<p>Explore some advanced techniques for styling websites with CSS.</p>
</article>
</section>
<!-- Sidebar: Additional Information -->
<aside>
<h3>About Me</h3>
<p>I am a web developer passionate about creating accessible websites.</p>
</aside>
</main>
<!-- Footer Section -->
<footer>
<p>© 2024 My Personal Blog. All rights reserved.</p>
</footer>
</body>
</html>
Best Practices:
- Use Semantic Tags Appropriately: Don’t use semantic tags just for styling purposes; use them to convey meaning.
- Avoid Excessive Nesting: Overusing elements like <section> and <article> can lead to code that’s hard to read and maintain.
- Combine Semantic and Non-Semantic Tags: Use <div> and <span> when there’s no need for a specific meaning, such as for styling or layout purposes.