HTML Semantics
In this page:
Semantic vs. Non-Semantic Elements
Non-semantic elements (like div and span) carry absolutely no meaning about their contents. Semantic elements (like header, article, and footer) clearly describe their meaning to both browsers and developers.
Note: Only use generic div elements for styling or grouping, and use semantic tags to define actual content structure.
Warning: Overusing plain div tags instead of semantic tags harms your search engine ranking and website accessibility score.
Example: Semantic vs. Non-Semantic Elements
<div>Generic container, no meaning</div>
<header>Semantic container, describes its role</header>Sectioning Content with section and article
The section tag defines a thematic grouping of content, typically with a heading. The article tag represents a completely independent, self-contained piece of content that could be distributed on other sites.
Note: If a piece of content can be shared on a newsletter or social media and still make complete sense on its own, wrap it in an article tag.
Warning: Do not use section tags solely for visual CSS styling; use standard div tags for non-content boxes.
Example: Sectioning Content with section and article
<article>
<section>Standalone blog post content</section>
</article>Navigation and Headers
The nav element is reserved exclusively for major navigation menus. Pairing your header and nav elements establishes a clear layout hierarchy that screen readers can parse instantly.
Note: Place your site's primary menus inside nav elements, but leave secondary footer terms of service routes in standard lists.
Warning: Do not wrap every single link on your page in nav elements as it degrades screen reader efficiency.
Example: Navigation and Headers
<header>
<nav>Main site navigation</nav>
</header>Footers and Sidebars
The footer element defines the closing section of your page or section, holding meta information. The aside tag wraps content that is tangentially related to the main page flow, such as advertisements or sidebars.
Note: Use aside containers for sidebars listing trending tools or quick instructional tips.
Warning: Ensure aside elements do not hold critical page-flow actions, as screen-reader users may bypass them.
Example: Footers and Sidebars
<footer>Contact info</footer>
<aside>Related links</aside>Inline Text Semantics
Semantic layout is not just about big structural columns. Inline text tags like time (for machine-readable dates) and mark (for search query highlighters) add rich context to your words.
Note: Always specify the datetime attribute inside your time tag so search crawlers can accurately read your publication dates.
Warning: Do not use time tags for arbitrary numbers or non-date texts as it corrupts page index validation.
Example: Inline Text Semantics
<p>Posted <time datetime="2024-01-15">January 15</time>, results for <mark>HTML</mark>.</p>Article vs Section vs Div
This is one of the most confusing parts of HTML semantics. Article is for self-contained content that makes sense on its own like a blog post. Section is for thematic grouping of content. Div is for layout with no semantic meaning.
Note: Ask yourself: would this content make sense if you copied it to another website? If yes, use article. If no, use section or div.
Warning: Using div for everything makes your HTML impossible to understand for screen readers and search engines.
Example: Article vs Section vs Div
<article>Self-contained blog post</article>
<section>Thematic grouping of related content</section>
<div>Generic layout wrapper</div>The main Element
The main element wraps the single, central content of a page — the content that is unique to that page, excluding repeated things like headers, footers, and sidebars. There should only ever be one visible main element per page, and screen readers use it as a landmark to let users jump straight to the primary content.
Note: Give main an id like id="main-content" so it can double as the target for a skip navigation link.
Warning: Do not use main for content that repeats across pages, like navigation menus or copyright footers — that defeats its whole purpose.
Example: The main Element
<main id="main-content">
Unique page content
</main>Figure and Figcaption
The figure element groups an image, diagram, or code snippet together with its caption using figcaption. This keeps the visual content and its explanation semantically connected, even if the figure is later moved elsewhere on the page by the layout.
Note: Use figure any time an image needs a caption — it is more meaningful than just placing a p tag next to an img.
Warning: figcaption must be a direct child of figure — placing it anywhere else silently breaks the semantic relationship.
Example: Figure and Figcaption
<figure>
<img src="diagram.jpg" alt="Diagram">
<figcaption>System architecture diagram</figcaption>
</figure>The time Element
The time element marks up dates and times in a way that both humans and machines can understand. The datetime attribute holds a machine-readable format while the visible text can be written however is friendliest for readers, like 'last Tuesday' or '3 days ago'.
Note: Search engines and browser extensions can recognize time elements and turn them into calendar reminders or highlight upcoming events.
Warning: The datetime attribute must follow a strict format like YYYY-MM-DD — free text like 'next Friday' in that attribute will not be understood by machines.
Example: The time Element
<p>Published <time datetime="2024-03-05">last Tuesday</time></p>The address Element
The address element marks up contact information for the author of a page or article — things like an email address, phone number, or physical mailing address. It is specifically for contact details, not for any random postal address that might appear in your content.
Note: Use address inside a footer to mark up a site's official contact details in a way that is both styled and semantically meaningful.
Warning: Do not use address to mark up an address that is not related to contacting the page's author, such as a restaurant's address mentioned inside an article.
Example: The address Element
<footer>
<address>Contact: [email protected]</address>
</footer>Mark and Abbr Elements
The mark element highlights text as relevant to the current context, like search results matching a query, and browsers render it with a yellow background by default. The abbr element marks up an abbreviation or acronym, and its title attribute provides the full expanded meaning as a tooltip on hover.
Note: Use mark specifically for highlighting search terms or important phrases — it has semantic meaning, unlike just adding a background color with a span.
Warning: Every abbr should have a title attribute, otherwise screen readers just read the letters aloud instead of announcing the full expanded meaning.
Example: Mark and Abbr Elements
<p>Results for <mark>HTML</mark> and <abbr title="Cascading Style Sheets">CSS</abbr>.</p>- Using semantic tags like section as a complete replacement for styling divs.
- Leaving out headings inside section containers, which makes your outline structure incomplete.
- Misusing the aside element to group core layout sections and critical menus.
- Semantic HTML elements clearly communicate their purpose and content to browsers, tools, and search bots.
- Use structure tags: header, footer, nav, section, article, and aside for proper layout division.
- Write semantic inline text tags like time and mark to provide rich context to your content.
Semantic HTML5 tags are fully supported by all modern and legacy mobile web browsers.
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: