SEMANTIC WEB /// MEANINGFUL MARKUP /// ACCESSIBILITY FIRST /// SEO STRUCTURE /// SEMANTIC WEB /// MEANINGFUL MARKUP /// ACCESSIBILITY FIRST ///

Semantic Tags

Stop using Div Soup. Learn to architect the web with meaningful tags like header, nav, article, and section.

semantics.html

1 / 11

12345

🏗️

Tutor:In the past, websites were built entirely using the <div> tag. It works, but it tells us nothing about the content. It is known as 'Div Soup'. It is bad for accessibility and SEO.

Skill Matrix

UNLOCK NODES BY LEARNING NEW STRUCTURES.

Core Layout

The holy trinity of structure: <header>, <main>, and <footer>.

System Check

Which element should contain the unique content of the page?

bodymaincontentdiv

Community Holo-Net

Refactor Challenge

ACTIVE

Share a "Before and After" of a Div Soup refactor. Best semantic structure wins.

Support Us

Why Semantics Matter

Pascual Vila

Frontend Instructor // Code Syllabus

A webpage without semantics is like a book without chapters, headings, or page numbers. It might contain the text, but it is impossible to navigate efficiently.

Accessibility (A11y)

Screen readers rely on semantic tags to navigate. When a user asks to "Jump to Navigation," the device looks for the <nav> tag. If you used a <div id="nav">, the screen reader sees nothing special.

SEO & Parsing

Search engines like Google bot give more weight to content inside <main> and <h1> tags than content hidden in generic divs or sidebars. Semantics tell the bot what the page is actually about.

Maintainability

For developers, reading code that uses <article> and <section> is much easier than parsing through nested <div> soup.

View Tag Dictionary+

Includes: Main, Header, Footer, Nav, Section, Article, Aside. Note: <div> and <span> are non-semantic containers and should be used only for styling hooks.

Semantic Glossary

<main>: Specifies the primary content of the document. Unique to each page.
<nav>: Defines a block of navigation links (menus, table of contents).
<article>: Independent, self-contained content that makes sense on its own.
<aside>: Content indirectly related to the main flow (sidebars, callouts).
<section>: Thematic grouping of content, typically with a heading.
<footer>: Contains author info, copyright data, or contact links.