structure

`<span>`

Generic inline container with no semantic meaning, used to style or script a run of text or inline content. Use it when semantic inline elements like <em>, <strong>, or <code> don't fit.

Syntax

<span class="highlight">text</span>

Common attributes

Attribute	Purpose
class	CSS class hook
id	Unique identifier
style	Inline CSS
title	Advisory tooltip text

Examples

<p>Total: <span class="price">$19</span></p>

Style a piece of inline text

<span title="World Health Organization">WHO</span>

Tooltip on hover

<span aria-live="polite" id="status"></span>

Announces updates to assistive tech

Gotcha

is inline — it cannot legally contain block elements like

. Prefer semantic inline tags (em, strong, code, mark) when meaning matters.

Related tags

<div>

Generic block-level container with no inherent semantic meaning, used to group content for styling or scripting. Reach for it only when no semantic element (section, article, nav, header) fits the content.

Represents introductory content or a group of navigational aids for its nearest sectioning ancestor. Use it at the top of the page, or inside an <article> or <section> for that block's heading area.

<nav>

Marks a section of major navigation links, either within the site or the current page. Use for primary menus, breadcrumbs, and pagination — not for every group of links.

<main>

Contains the dominant content of the document's <body> — the content unique to this page, excluding site-wide headers, nav, sidebars, and footers. Use exactly one visible <main> per page.

Represents a footer for its nearest sectioning ancestor — typically author info, copyright, or related links. Use it at the bottom of the page, or inside an <article>/<section> for a block-level footer.

← All HTML tags · CSS selectors · HTML entities