## Learning Objectives - Understand semantic vs non-semantic HTML - Use semantic elements correctly - Improve accessibility and SEO ## What is Semantic HTML? Semantic HTML uses elements that describe their meaning to both browsers and developers. ```html

...

...

``` ## Document Structure Elements ### header Represents introductory content or a group of navigational aids: ```html

Site Title

``` ### nav Defines navigation links: ```html ``` ### main The dominant content of the document: ```html

Welcome to Our Site

This is the main content area.

``` ### article Self-contained, independently distributable content: ```html

Blog Post Title

Published on June 23, 2026

Article content goes here...

``` ### section Thematic grouping of content: ```html

Features

Our product has many features...

``` ### aside Content tangentially related to surrounding content: ```html

Main Article

Article content...

``` ### footer Footer for a section or page: ```html ``` ## Text-Level Semantics ### time Represents a date or time: ```html

Event on June 23, 2026 at 7pm

``` ### mark Highlighted/marked text: ```html

The highlighted term is important.

``` ### address Contact information: ```html

Written by Author Name.
Visit us at: 123 Main St, City

``` ### figure and figcaption Self-contained content with a caption: ```html

``` ## Comparison: div vs semantic elements ### When to use div Generic container when no semantic element fits: ```html ``` ### When to use semantic elements ```html

Article Title

Article content...

``` ## Benefits of Semantic HTML ### Accessibility Screen readers can navigate by landmarks: ```html ``` ### SEO Search engines understand content structure: ```html

Keyword-Rich Title

Related Content

``` ### Maintainability Code is self-documenting: ```html

...

...

``` ## Complete Page Example ```html

My Blog

Understanding Semantic HTML

Published on June 23, 2026

Semantic HTML improves accessibility and SEO...

Key Benefits

• Better accessibility
• Improved SEO
• Cleaner code

``` ## Summary - Semantic elements describe their meaning (`

`, `