ALL LESSONS Module 8

Semantic HTML Tags

Apr 4, 2026 1 min read

Why Use Semantic Tags?

Semantic tags like

, and

make your page clearer for both developers and screen readers. They describe the meaning of content rather than just its appearance.

Example Layout

Site Header

Section Title

Content here.

Article Title

Article content goes here.

Benefits

Accessibility: Screen readers can better interpret page structure.
SEO: Search engines understand the importance of different sections.
Maintainability: Developers can quickly identify the purpose of each block.

Best Practices

Use
for site or section headings.
Wrap main content in
(only one per page).
Use
for grouped thematic content.
Use
for standalone pieces like blog posts or news items.
Place site?wide info in
.

Hands On Exercise

Create a simple webpage with a header, a main section containing one article, and a footer. Add a heading and a paragraph inside each section to practice semantic structure.