SEMANTIC HTML /// STRUCTURE & MEANING /// ACCESSIBILITY FIRST /// SEO OPTIMIZATION /// SEMANTIC HTML /// STRUCTURE & MEANING /// ACCESSIBILITY FIRST /// SEO OPTIMIZATION ///

HTML Semantics

Give meaning to your content. Learn to use the right tags for the right job to improve SEO and Accessibility.

semantics.html
1 / 11
12345
🏗️

Guide:Before semantic HTML, developers used 'Div Soup'. Everything was a <div>. This makes it impossible for machines to understand what part of the page is the menu, the content, or the footer.


Construction Matrix

UNLOCK ZONES BY MASTERING TAGS.

Concept: The Box Model

Everything is a box. But we must label the box correctly. A <div> is a generic box.

Semantic Validation

Which tag has NO semantic meaning?

Semantic Web Community

Refactor Challenge

OPEN

Share a before/after of a div-soup page you refactored into clean semantic HTML.

Support Us

Why Semantics Matter

Author

Pascual Vila

Frontend Instructor // Code Syllabus

Semantic HTML introduces meaning to the web page rather than just presentation. For example, a <p> tag indicates that the enclosed text is a paragraph.

Accessibility (A11y)

Screen readers use semantic tags to navigate. If a user wants to jump to the navigation, they look for the <nav> element. If everything is a div, the user has to listen to the entire page to find what they need.

SEO Optimization

Search engines like Google rank content inside <main> and <article> higher than content inside a sidebar or footer. Semantic tags tell the bot what is important.

Detailed Tag Breakdown+

This section details the specific W3C specifications for section, article, nav, and aside, including the rules for nesting and document outlines.

Semantic Dictionary

<header>
Introductory content for a page or section. Often contains logos, headings, or navigation.
<nav>
A section of the page intended for navigation links to other pages or parts of the same page.
<main>
The dominant content of the body. Must be unique to the document and not contain repeated content.
<article>
A self-contained composition that is independently distributable (e.g., forum post, blog entry).
<aside>
Content tangentially related to the content around it (sidebars, call-out boxes).
<footer>
Contains copyright info, contact details, or sitemaps. Sits at the bottom of a section.