Syntax
<span>text content</span>Examples
Text Highlighting
Using span to highlight specific words within a paragraph with different colors.
<p>
This is a normal sentence with <span style="color: red; font-weight: bold;">important text</span> that needs emphasis.
You can also have <span style="background-color: yellow;">highlighted sections</span> within the same paragraph.
</p>Custom Styling
Applying multiple styles to inline text elements for visual variety.
<p>
The price is <span style="font-size: 24px; color: #28a745; font-weight: bold;">$49.99</span>
<span style="text-decoration: line-through; color: #888;">$79.99</span>
<span style="background: #ff0000; color: white; padding: 2px 8px; border-radius: 4px; font-size: 12px;">50% OFF</span>
</p>Icon with Text
Combining spans with emoji or symbols to create inline icon-text combinations.
<p>
<span style="color: #28a745; font-size: 20px;">âœ"</span>
<span style="font-weight: bold;">Available in stock</span>
<br>
<span style="color: #dc3545; font-size: 20px;">✗</span>
<span style="color: #888;">Out of stock</span>
</p>Data Attributes
Using spans with data attributes for dynamic content or JavaScript manipulation.
<p>
Welcome back, <span id="username" style="font-weight: bold; color: #007bff;">Guest</span>!
You have <span data-count="5" style="background: #ff6b6b; color: white; padding: 2px 8px; border-radius: 50%; font-size: 12px; font-weight: bold;">5</span> new messages.
</p>Attributes
- id (string): Unique identifier for the span element
- class (string): CSS class names for styling
- style (string): Inline CSS styles
- data-* (string): Custom data attributes for storing information
Best practices
- Use <span> only for styling inline content - don't use it for layout structure
- Prefer semantic elements like <strong>, <em>, <mark> when they fit the meaning
- Keep inline styles minimal - use CSS classes for reusable styles
- Use spans for wrapping individual words or short phrases, not entire paragraphs
- Add meaningful class names that describe the purpose, not the appearance
- Avoid nesting multiple spans unnecessarily - keep your markup clean and simple
At a glance
- Purpose
- Structure and meaning for web content
- File extension
- .html · .htm
- Runs in
- Web browsers
- Usually used with
- CSS and JavaScript
Specifications & further reading
Related HTML documentation
<h1> - <h6>
The heading elements <h1> through <h6> represent six levels of section headings, with <h1> being the most important and <h6> the least. Headings create a document outline that both sighted users and assistive technologies rely on to understand and navigate page structure. Search engines also use heading hierarchy to interpret content relevance. Each page should typically have exactly one <h1> describing its main topic, with subsequent headings nested logically to reflect the content hierarchy.<p>
The <p> element represents a paragraph of text — one of the most fundamental building blocks of written content on the web. Browsers automatically add margin above and below paragraphs to visually separate them. The <p> element cannot contain other block-level elements like <div> or headings, only inline content and text. It is a block-level element, meaning it always starts on a new line.Text Formatting: <strong>, <em>, <b>, <i>, <mark>, <small>
HTML provides several inline elements for formatting text with semantic and visual meaning. <strong> indicates strong importance (typically rendered bold), and <em> indicates stress emphasis (typically rendered italic) — both carry semantic weight that screen readers can announce. <b> and <i> are their purely visual counterparts, used when bold/italic styling is needed without implying importance or emphasis. <mark> highlights text as relevant to the current context, and <small> represents side comments like fine print or disclaimers.<br>, <hr>
These are two simple void (self-closing) elements for controlling text flow. <br> inserts a single line break within text, forcing the next content onto a new line without starting a new paragraph. <hr> represents a thematic break between paragraph-level content — visually rendered as a horizontal line, but semantically indicating a shift in topic, such as a scene change in a story or a new section.
The heading elements <h1> through <h6> represent six levels of section headings, with <h1> being the most important and <h6> the least. Headings create a document outline that both sighted users and assistive technologies rely on to understand and navigate page structure. Search engines also use heading hierarchy to interpret content relevance. Each page should typically have exactly one <h1> describing its main topic, with subsequent headings nested logically to reflect the content hierarchy.<p>
The <p> element represents a paragraph of text — one of the most fundamental building blocks of written content on the web. Browsers automatically add margin above and below paragraphs to visually separate them. The <p> element cannot contain other block-level elements like <div> or headings, only inline content and text. It is a block-level element, meaning it always starts on a new line.Text Formatting: <strong>, <em>, <b>, <i>, <mark>, <small>
HTML provides several inline elements for formatting text with semantic and visual meaning. <strong> indicates strong importance (typically rendered bold), and <em> indicates stress emphasis (typically rendered italic) — both carry semantic weight that screen readers can announce. <b> and <i> are their purely visual counterparts, used when bold/italic styling is needed without implying importance or emphasis. <mark> highlights text as relevant to the current context, and <small> represents side comments like fine print or disclaimers.<br>, <hr>
These are two simple void (self-closing) elements for controlling text flow. <br> inserts a single line break within text, forcing the next content onto a new line without starting a new paragraph. <hr> represents a thematic break between paragraph-level content — visually rendered as a horizontal line, but semantically indicating a shift in topic, such as a scene change in a story or a new section.