<span>
The <span> HTML element is a generic inline container for phrasing content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang. It should be used only when no other semantic element is appropriate. <span> is very much like a <div> element, but <div> is a block-level element whereas a <span> is an inline-level element.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1 | 18 | 1 | |
| DOM API | ||||||
| The HTMLSpanElement interface represents a span element and derives from the HTMLElement interface, but without implementing any additional properties or methods. | 15 | 12 | 1 | 6 | 18 | 6 |
Syntax
<p>Displays <span style="color: red">part of</span> the text <span style="color: red">in red</span>.</p>
<p>Price: <span class="price">¥1,200</span></p>Live demo
Span and semntickelement. Compare Usage
meaning that exists case is semntickelement use, and only span.
Use cases
-
Using <span>
The <span> HTML element is a generic inline container for phrasing content, which does not inherently represent anything.
Cautions
- May not be supported in older browsers.
Accessibility
- Verify how this element is announced by screen readers.