Master modern HTML structure with semantic elements for better accessibility, SEO, and maintainability
Semantic HTML uses meaningful tags that describe their content, making your code more readable for both humans and machines. Instead of generic <div> elements, semantic tags like <header>, <nav>, and <article> clearly communicate the purpose of each section.
Screen readers and assistive technologies can better understand and navigate your content, improving the experience for users with disabilities.
Search engines better understand your content structure, potentially improving your rankings and search result appearance.
Code is easier to read, understand, and maintain when the structure is clear and meaningful, reducing development time.
Standards-compliant code is more likely to work correctly across different browsers and future web technologies.
Represents introductory content for its nearest ancestor sectioning content or sectioning root element. Typically contains a logo, site title, navigation, or other introductory elements.
<header>
<img src="logo.png" alt="Company Logo">
<h1>My Awesome Website</h1>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
</header>
Represents a section of navigation links. Not all links need to be in a <nav> element—only major navigation blocks should use this tag.
<nav aria-label="Main Navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/products">Products</a></li>
<li><a href="/services">Services</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
Represents the dominant content of the document body. There should only be one <main> element per page, and it should not be a descendant of <article>, <aside>, <footer>, <header>, or <nav>.
<main>
<h1>Welcome to Our Blog</h1>
<article>
<h2>Latest Post Title</h2>
<p>Post content goes here...</p>
</article>
<article>
<h2>Another Post Title</h2>
<p>More interesting content...</p>
</article>
</main>Represents a self-contained composition that could be independently distributed or reused. Examples include blog posts, news articles, user comments, or interactive widgets.
<article>
<header>
<h2>Understanding HTML5 Semantic Elements</h2>
<p>Published on <time datetime="2025-12-18">December 18, 2025</time></p>
<p>By <span>Austin Nammack</span></p>
</header>
<p>Semantic HTML is crucial for modern web development...</p>
<footer>
<p>Tags: HTML5, Web Development, Best Practices</p>
</footer>
</article>
Represents a thematic grouping of content, typically with a heading. Use <section> when the content has a clear theme or purpose, and use <div> for purely stylistic groupings.
<article>
<h1>Complete Guide to CSS Grid</h1>
<section>
<h2>Introduction</h2>
<p>CSS Grid is a powerful layout system...</p>
</section>
<section>
<h2>Basic Concepts</h2>
<p>Understanding grid containers and items...</p>
</section>
<section>
<h2>Advanced Techniques</h2>
<p>Complex grid layouts and responsive design...</p>
</section>
</article>Represents content that is tangentially related to the main content. This could be sidebars, callout boxes, or supplementary information that enhances but isn't essential to the main content.
<article>
<h1>The Benefits of Semantic HTML</h1>
<p>Main article content goes here...</p>
<aside>
<h3>Related Articles</h3>
<ul>
<li><a href="/css-best-practices">CSS Best Practices</a></li>
<li><a href="/accessibility-guide">Web Accessibility Guide</a></li>
<li><a href="/seo-tips">SEO Tips for Developers</a></li>
</ul>
</aside>
</article>Represents footer content for its nearest ancestor sectioning content or sectioning root. Typically contains information about the author, copyright, links to related documents, or contact information.
<footer>
<nav aria-label="Footer Navigation">
<ul>
<li><a href="/about">About Us</a></li>
<li><a href="/privacy">Privacy Policy</a></li>
<li><a href="/terms">Terms of Service</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
<p>© 2025 Company Name. All rights reserved.</p>
</footer><div class="header">
<h1>My Website</h1>
<div class="nav">
<a href="/">Home</a>
<a href="/about">About</a>
</div>
</div>
<div class="content">
<div class="post">
<h2>Post Title</h2>
<p>Content...</p>
</div>
</div>
<div class="footer">
<p>© 2025</p>
</div><header>
<h1>My Website</h1>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
</header>
<main>
<article>
<h2>Post Title</h2>
<p>Content...</p>
</article>
</main>
<footer>
<p>© 2025</p>
</footer>Each page should have exactly one <main> element containing the primary content unique to that page. Don't include repeated content like navigation or footers inside <main>.
Only use <section> when the content has a clear theme and typically a heading. For purely stylistic groupings without semantic meaning, use <div> instead.
If you have multiple <nav> elements on a page (e.g., main navigation and footer navigation), use aria-label to differentiate them for screen reader users.
Maintain a logical heading hierarchy (h1 → h2 → h3) within semantic elements. Don't skip levels or use headings solely for styling purposes.
While semantic HTML provides inherent accessibility, you can enhance it further with ARIA attributes like role, aria-label, and aria-labelledby when appropriate.
Use <article> for content that makes sense when taken out of context, like blog posts or products. If it wouldn't make sense on its own, it's probably not an article.