HTML SEMANTICS /// USE THE RIGHT TAG /// ACCESSIBILITY FIRST /// BETTER SEO /// HTML SEMANTICS /// USE THE RIGHT TAG /// ACCESSIBILITY FIRST /// BETTER SEO /// HTML SEMANTICS /// USE THE RIGHT TAG /// ACCESSIBILITY FIRST /// BETTER SEO ///

HTML Tag Meaning

Stop using divs for everything. Learn to use Semantic HTML to build accessible, SEO-friendly, and professional websites.

semantics.html
1 / 10
12345678
🧠

Tutor:This is what we call 'Div Soup'. In the past, developers used the generic <div> tag for everything. While it works visually, it offers zero meaning to browsers or screen readers.


Skill Matrix

UNLOCK NODES BY UNDERSTANDING SEMANTICS.

Concept: Meaning

Tags define the role of the content. A <button> is interactive. A <div> is just a box.

System Check

Why shouldn't you use a <div> for a button?

Community Holo-Net

Semantic Showdown

ACTIVE

Found a terrible case of "Div Soup"? Share your refactored semantic versions.

Support Us

HTML Tag Meaning

Author

Pascual Vila

Frontend Instructor // Code Syllabus

Semantic HTML means using the correct tag for the job. It is about describing the meaning of content, not just its appearance.

The "Div Soup" Problem

A generic <div> tells the browser nothing about its content. Excessive use of divs makes code hard to read and impossible for screen readers to navigate efficiently.

Landmark Regions

Tags like <header>, <nav>, and <main> define major areas of the page. Assistive technologies use these to jump between sections, skipping repetitive content.

Content Containers

Use <article> for independent content like blog posts. Use <section> for thematic grouping of content.

View Full Transcript+

This section contains the detailed transcript explaining the shift from table-based layouts to div-based layouts, and finally to semantic HTML5. It details the accessibility API mappings for each semantic tag.

Semantics Glossary

Semantics
The practice of giving code meaning. It describes the content's role, not its look.
example.html
Landmarks
Major regions (header, nav, main, footer) that screen readers use to navigate quickly.
example.html
Accessibility Tree
A version of the DOM built for screen readers based on semantic tags.
example.html
Article vs Section
Article is for self-contained content; Section is for thematic grouping.
example.html