Semantic HTML Examples

This repository demonstrates the difference between semantic and non-semantic HTML structures.

Files

• before-after/non-semantic.html → Example of a web page built with <div> tags only.
• before-after/semantic.html → The same page rewritten using semantic HTML tags.
• blog-layout.html → A complete example of a semantic blog layout with <header>, <main>, <article>, <aside>, and <footer>.

Purpose

These examples complement the blog post: [Semantic HTML for SEO and Accessibility](https://dev.to/githogora_wilson_47df4080/semantic-html-in-action-a-practical-guide-to-better-seo-and-accessibility-2e0d

They show how semantic HTML:

• Improves SEO (better crawling and indexing)
• Enhances Accessibility (better screen reader support)
• Makes code more maintainable for developers