HTML
Semantic HTML
Structure your content with meaning using HTML tags that describe what things are, not how they look
When you write a document in Word, you use headings, paragraphs, and lists to organize your thoughts. Semantic HTML works the same way — it tells browsers and search engines what each piece of content actually means.
Think of semantic tags as labels on filing cabinets. A <header> tag says "this is the top section of my page" while <nav> says "these are navigation links." Screen readers help blind users understand your page better. Search engines rank your content higher. And your code becomes easier to maintain.
Document Structure Tags
Every webpage follows the same basic pattern. Header at the top, main content in the middle, and footer at the bottom. Alex's portfolio needs this structure too.
Alex wants to restructure their homepage with proper semantic tags. Right now everything sits in generic <div> containers that mean nothing to search engines.
<!-- Alex's portfolio homepage with semantic structure -->
<header>
<h1>Alex Chen - Web Developer</h1>
<nav>
<a href="index.html">Home</a>
<a href="projects.html">Projects</a>
<a href="contact.html">Contact</a>
</nav>
</header>
<main>
<section>
<h2>Welcome to my portfolio</h2>
<p>I build fast, beautiful websites with clean code.</p>
</section>
</main>
<footer>
<p>© 2024 Alex Chen. All rights reserved.</p>
</footer>What just happened?
The browser rendered Alex's structured page with clear sections. Screen readers now understand the page layout. Search engines can identify the main content area. Try this: Add multiple sections inside the main tag for different content areas.
Content Sections
The <section> tag groups related content together. Think of it like chapters in a book. Each section should have a heading that describes what's inside. Articles are special sections that could stand alone — like blog posts or news stories.
Alex's projects page needs multiple sections. One for featured work, another for older projects. Each project could be its own article since someone might share just that piece.
<!-- Alex's projects page with sections and articles -->
<main>
<section>
<h2>Featured Projects</h2>
<article>
<h3>E-commerce Website</h3>
<p>Built with React and Node.js for a local business.</p>
<p><strong>Tech used:</strong> React, Node.js, MongoDB</p>
</article>
<article>
<h3>Weather App</h3>
<p>Real-time weather data with location detection.</p>
<p><strong>Tech used:</strong> JavaScript, Weather API</p>
</article>
</section>
<section>
<h2>Other Work</h2>
<p>Smaller projects and experiments.</p>
</section>
</main>What just happened?
The page now has clearly defined content areas. Each article can be shared independently. Screen readers announce section boundaries to help users navigate. Try this: Nest a figure tag inside an article to add project screenshots.
When to Use Article vs Section
Use <article>
Blog posts, news stories, product reviews, portfolio pieces — content that makes sense by itself
Use <section>
Chapter-like groups, related content blocks, themed areas that need context from the rest of the page
Navigation and Asides
The <nav> tag wraps any group of navigation links. Main menu, breadcrumbs, pagination — they all get nav tags. Aside tags hold supplementary information like sidebars, author bios, or related links that support the main content.
Alex's blog page needs both. Navigation for post categories and an aside showing recent posts. This helps readers discover more content without cluttering the main article.
<!-- Alex's blog page with navigation and sidebar -->
<header>
<h1>Alex's Dev Blog</h1>
<nav>
<a href="#javascript">JavaScript</a>
<a href="#css">CSS</a>
<a href="#react">React</a>
</nav>
</header>
<main>
<article>
<h2>Building Fast React Components</h2>
<p>Performance tips that actually matter...</p>
</article>
</main>
<aside>
<h3>Recent Posts</h3>
<nav>
<a href="post1.html">CSS Grid Mistakes</a>
<a href="post2.html">JavaScript Debugging</a>
</nav>
</aside>What just happened?
The page has two distinct navigation areas — category links in the header and recent posts in the sidebar. Screen readers can jump between navigation regions. Search engines understand the content hierarchy. Try this: Add breadcrumb navigation inside another nav tag.
Semantic vs Generic Elements
Every semantic tag could be replaced with a <div> and some CSS. But that throws away all the meaning. Search engines can't understand your content structure. Screen readers can't help users navigate efficiently. Other developers can't quickly grasp your code.
Developer tip: Use semantic tags first, then add divs for styling when you need extra containers. Your HTML stays meaningful while your CSS stays flexible.
Content-Specific Semantic Tags
Beyond layout tags, HTML has semantic elements for specific content types. <figure> wraps images with captions. <time> marks dates and timestamps. <address> holds contact information.
Alex's contact page needs proper semantic markup for their information. Search engines will understand this is contact data, not just random text.
<!-- Alex's contact page with content semantics -->
<main>
<article>
<h2>Get In Touch</h2>
<figure>
<div style="background:#e2e8f0;padding:40px;text-align:center;color:#64748b;border-radius:8px;">[Image: Alex at their desk]</div>
<figcaption>Always happy to chat about web development!</figcaption>
</figure>
<address>
<p>Email: <a href="mailto:alex@example.com">alex@example.com</a></p>
<p>Phone: <a href="tel:+1234567890">(123) 456-7890</a></p>
<p>Location: San Francisco, CA</p>
</address>
<p>Last updated: <time datetime="2024-01-15">January 15, 2024</time></p>
</article>
</main>What just happened?
The browser linked the image and caption as one unit. Screen readers read the address as contact information. Search engines can extract the publication date from the time element. Try this: Add a blockquote with a client testimonial.
Common mistake with address tags
The address tag is for contact information about the author or document owner — not postal addresses mentioned in content. Use a regular paragraph for shipping addresses in an e-commerce site.
Best Practices for Semantic HTML
Semantic HTML works best when you follow consistent patterns. Don't overthink it — start with the main structural tags and add specific elements as you need them.
Use One Main Tag
Every page gets exactly one main element around the primary content.
Headers Can Nest
Section headers inside the main header are perfectly fine when they make sense.
Nav Goes Anywhere
Navigation can appear in headers, footers, asides, or stand alone. Use it wherever users navigate.
Sections Need Headings
Every section should start with a heading that describes its content clearly.
The goal is communication. When another developer opens your HTML file, they should immediately understand how your content is organized. When a screen reader user visits your site, they should be able to jump to any section quickly.
Quiz
Alex wants to add individual blog posts to their website. Each post should be shareable on social media and make sense without the rest of the page. Which semantic tag should wrap each post?
What's the correct rule for using the main element in semantic HTML?
Why is semantic HTML better than using divs with CSS classes for layout?
Next: Layout Elements
Master CSS Grid, Flexbox, and responsive design patterns to create beautiful layouts that work on any device.