Semantic HTML.

Semantic HTML uses tags that clearly describe their meaning in a human- and machine-readable way, moving beyond generic containers like <div>.

The Essentials

A semantic element clearly describes its meaning to both the browser and the developer.

Examples include <header>, <footer>, <article>, and <section>.

It helps search engines (SEO) index your content correctly.

It is crucial for accessibility (Screen Readers).

It makes your code much cleaner and easier to maintain.

Semantic tags provide a clear structure to the document outline.

Professional Insights

Article vs Section

<article> is for content that can stand alone (like a blog post). <section> is for grouping related content within a page or article. If the content could be syndicated elsewhere, use <article>.

The <main> Element

The <main> tag should contain the unique content of your page. It should not contain content that is repeated across pages, such as sidebars, navigation links, or copyright information.

Accessibility Landmarks

Semantic tags act as 'landmarks' for assistive technologies. A screen reader user can jump directly to the <nav> or <main> area without listening to the entire page.

SEO and Structure

Search engine crawlers reward semantic HTML because it allows them to identify the most important parts of your page more accurately, leading to better rankings.

Critical Pitfalls

Using <div> for everything (known as 'div-itis').

Using semantic tags just for their default styling instead of their meaning.

Nesting multiple <main> tags—there should only be one unique <main> per page.

Using <section> as a generic wrapper for styling—use <div> if the container has no semantic meaning.

Interactive Lab

Sprint Tasks

Wrap the blog content in an <article> tag

Wrap the copyright text in a <footer> tag

Add a <nav> tag around the navigation links

Loading editor...

Production Preview