Description

The HTML <span> element is a generic inline container for phrasing content. Like <div>, it does not inherently represent anything, but can be used to group inline elements for styling or scripting purposes.

Unlike <div>, the <span> element is an inline element — it does not start on a new line and only takes up as much width as necessary.

CSS Display:inline

Syntax

<span>Inline content</span>

Popular Attributes

AttributeDescription
idA unique identifier for the element. Used for CSS styling, JavaScript targeting, and anchor links.
classSpecifies one or more CSS class names for styling the element.
styleApplies inline CSS styles directly to the element.

This element also supports global HTML attributes such as class, id, style, data-*, and more.

Examples

Highlight Text
<p>This is <span style="color: #7279E1; font-weight: bold;">highlighted text</span> within a paragraph.</p>
Using span to apply specific styles to a portion of text within a paragraph.
Multiple Spans
<p>Status: <span style="color: #2ECC71;">Active</span> | Plan: <span style="color: #7279E1;">Premium</span></p>
Multiple spans can be used to style different parts of text independently.

Notes

Use <span> only when no other semantic element is appropriate. For emphasis use <em>, for strong importance use <strong>, and for marking text use <mark>.

Related Tags

<div><p><a>
Last updated: 7th April 2026