Semantic Tags: header nav main article footer
Replace meaningless divs with semantic HTML5 elements and understand how they help browsers, search engines, and screen readers.
What Is Semantic HTML?
Semantic HTML uses elements that describe the meaning of content, not just its appearance. <article> says "this is a self-contained piece of content". A generic <div> says nothing.
Before Semantics: Div Soup
Early web developers built layouts entirely from <div> and <span> elements. Screen readers couldn't distinguish navigation from content from ads. Search engines had to guess the page structure.
<!-- Old way -->
<div class="header">...</div>
<div class="nav">...</div>
<div class="content">...</div>
<div class="footer">...</div>All lessons in this course
- Document Structure: DOCTYPE html head body
- Semantic Tags: header nav main article footer
- Text Images Links and Lists
- Forms: input label button