HTML <span> Element
The HTML <span> element is a generic inline container used to group text or other phrasing content when no more meaningful HTML element is appropriate.
Syntax
<p>Learn <span class="highlight">HTML</span> step by step.</p>The <span> element requires both an opening and closing tag. It does not provide any special appearance or meaning by itself.
Attributes
The <span> element supports the global HTML attributes. It does not have any element-specific attributes.
Example
This example uses a <span> element with a CSS class to apply a different appearance to part of a sentence without changing the meaning or structure of the surrounding paragraph.
Usage Notes
Use the <span> element when you need to group part of some inline content for styling, scripting, identification, or another purpose and no semantic HTML element describes the content more accurately.
The <span> element has no semantic meaning by itself. A class, id, or other global attribute is commonly added so the grouped content can be targeted with CSS or JavaScript.
When an element such as <strong>, <em>, <mark>, <code>, or another semantic element accurately describes the content, use that element instead of <span>.
The <span> element is an inline container and is commonly used within paragraphs, headings, links, list items, and other phrasing content.
For a generic container that groups larger sections or blocks of content, the <div> element is usually more appropriate.
Accessibility
The <span> element does not provide semantic meaning or accessibility information by itself. Do not use a styled <span> as a substitute for an HTML element that already provides the required meaning or behavior.
For example, use a <button> for an interactive button, an <a> element for a link, and <strong> when text has strong importance rather than recreating those purposes with a <span>.
When CSS is applied to a <span>, avoid relying only on color or another visual difference to communicate information that users need to understand.
Browser Support
Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.
For detailed browser compatibility information, see Can I Use: HTML <span> Element .
Related Elements
The <span> element is closely related to the <div> element for generic block-level grouping, the <strong> element for strong importance, the <em> element for stress emphasis, and the <mark> element for relevant or highlighted text.