# Understanding Semantic HTML

## What is Semantic HTML?

Semantic HTML uses elements that clearly describe their meaning to both the browser and the developer. This improves accessibility, SEO, and code maintainability.

## Key Semantic Elements

### Structural Elements

- `<header>` - Introductory content
- `<nav>` - Navigation links
- `<main>` - Main content
- `<article>` - Self-contained content
- `<section>` - Thematic grouping
- `<aside>` - Tangentially related content
- `<footer>` - Footer content

### Text-Level Semantics

Use strong for importance, em for emphasis, mark for highlighting, `code` for code snippets, and HTML for abbreviations.

## Accessibility Best Practices

### Form Accessibility

Username: Must be 3-20 characters
Email:
Subscription Type
Free
Premium
I agree to the terms and conditions

### Image Accessibility

Quarterly sales comparison

### ARIA Landmarks and Roles

Skip to main content

Your session will expire in 5 minutes

## Accessible Data Tables

### Simple Table

Monthly Sales Report
Month | Revenue | Expenses | Profit
--- | --- | --- | ---
January | $50,000 | $30,000 | $20,000
February | $55,000 | $32,000 | $23,000

## Lists and Navigation Patterns

### Unordered List

- First item
- Second item
- Third item with nested list:
  - Nested item 1
  - Nested item 2

### Ordered List

1. Step one: Prepare ingredients
2. Step two: Mix ingredients
3. Step three: Bake at 350°F

### Description List

HTML
  HyperText Markup Language - the standard markup language for web pages
CSS
  Cascading Style Sheets - used for styling web pages
JavaScript
  Programming language for web interactivity

## Related Resources