HTML Semantic Tags | Notion

🎯 Learning Objectives

By the end of this class, students will be able to:

Understand what semantic HTML tags are and why they are important.
Differentiate between semantic and non-semantic tags.
Learn the purpose of commonly used semantic tags:
Build a simple, well-structured web page using semantic tags.
Understand how semantic tags improve accessibility and SEO.
Learn non-semantic tags used for layout:

🧩 Part 1: What Are Semantic Tags?

Concept:

Semantic tags describe the meaning of the content inside them. They tell the browser and developers what kind of content it contains.

Non-semantic tags: <div>, <span> → only for layout, no meaning.
Semantic tags: <header>, <footer>, <article> → describe content purpose.

Why semantic tags matter:

Accessibility: Screen readers can navigate easily.
SEO: Search engines understand page structure.
Maintainability: Easier for developers to read and style code.

Semantic vs Non-Semantic Tags (Comprehensive)

Tag Type	Tag Examples	Description / Purpose
Semantic / Structural Tags	`<header>` `<nav>` `<main>` `<section>` `<article>` `<aside>` `<footer>` `<figure>` `<figcaption>` `<h1>`–`<h6>` `<p>` `<ul>` `<ol>` `<li>` `<table>` `<thead>` `<tbody>` `<tr>` `<th>` `<td>` `<a>` `<img>`	Tags that give meaning or structure to the content. Help accessibility, SEO, and readability.
Non-Semantic / Styling Tags	`<div>` `<span>` `<b>` `<i>` `<u>` `<small>` `<strong>` `<em>` `<mark>`	Generic containers or text-level tags without inherent meaning. Used for layout, grouping, or styling only.

🧩 Part 2: Basic Syntax Examples