Writing Modern, Semantic HTML
Semantic HTML uses meaningful tags to describe the structure and purpose of content. This improves readability, accessibility, and SEO.
Why Use Semantic HTML?
- Helps search engines better understand your content.
- Improves accessibility for screen readers and assistive tech.
- Makes your code easier to read and maintain.
Common Semantic Tags
<header>
Defines the top section of a page or article (often includes logos or navigation).
<nav>
Contains navigation links to other parts of the site.
<main>
Represents the main content of the page (unique and central part).
<section>
Groups related content together, like chapters in a book.
<article>
Represents independent, self-contained content (like a blog post).
<aside>
Contains side content such as ads, quotes, or related links.
<footer>
Represents the bottom section of a page or article (usually with contact info or copyright).
Example Semantic Layout
<header>
<h1>My Blog</h1>
</header>
<nav>
<a href="#">Home</a> | <a href="#">About</a>
</nav>
<main>
<section>
<article>
<h2>Blog Post</h2>
<p>This is my first blog post.</p>
</article>
</section>
<aside>Related links here</aside>
</main>
<footer>
<p>Copyright 2025</p>
</footer>
<h1>My Blog</h1>
</header>
<nav>
<a href="#">Home</a> | <a href="#">About</a>
</nav>
<main>
<section>
<article>
<h2>Blog Post</h2>
<p>This is my first blog post.</p>
</article>
</section>
<aside>Related links here</aside>
</main>
<footer>
<p>Copyright 2025</p>
</footer>