Welcome to semantic HTML! So far you've learned tags that structure content. Now let's explore tags that give meaning to your content's purpose.
Semantic HTML uses tags that describe what content is, not just how it looks.
Engagement Message
Give one reason why using semantic tags to describe content purpose is valuable.
Semantic tags make your HTML self-documenting. Instead of generic <div> containers everywhere, you use meaningful tags like <header>, <nav>, and <footer>.
This helps browsers, search engines, and other developers understand your page structure instantly.
Engagement Message
Who benefits most from this clear structure besides web developers?
Let's start with structural semantic tags. The <header> tag contains introductory content - like your site logo, main navigation, or page title.
<header> typically appears at the top of pages or sections, creating a clear entry point.
Engagement Message
What type of content would you expect to find in a website's header?
The <nav> tag wraps navigation links - your main menu, breadcrumbs, or any set of navigation links.
<nav> tells browsers "this is how users navigate around the site" which helps screen readers and search engines.
