The <span> tag is used to group inline elements and text.
It works like a <div> tag but it renders as an inline element without line-breaks.
This element is most commonly used for styling purposes.
A styled <span> element.
Did you know? The Great Pyramid of Giza was the tallest building in the world for over 3,800 years , until the construction of the Lincoln Cathedral in the UK in 1311.
<p style="max-width:610px;">
Did you know? The Great Pyramid of Giza
was the tallest building in the world for
<span style="color:firebrick;
background-color:papayawhip;">
over 3,800 years
</span>,
until the construction of the Lincoln Cathedral
in the UK in 1311.
</p>
Two <span> tags with a border and a background color.
The tallest building in the world is the
Burj Khalifa
located in Dubai.
It has a total
height of 829.8 m,
nearly half a mile.
<style>
.hilite {
border: 1px dashed orangered;
background: cornsilk;
padding:2px 3px;
}
</style>
<p>
The tallest building in the world is the
<span class="hilite">Burj Khalifa</span>
located in Dubai.<br /> It has a total
height of <span class="hilite">829.8 m</span>,
nearly half a mile.
</p>
The <span> element has no attributes, but it does accept global attributes.
The following are commonly used.
| Attribute | Value | Description |
|---|---|---|
| id | identifier | Defines a unique identifier for the span. |
| class | classnames | Sets one or more CSS classes to be applied to the span. |
| style | CSS-styles | Sets the style for the span. |
| data-* | value | Defines additional data that can be used by JavaScript. |
| hidden | hidden | Specifies whether the span is hidden. |
| title | text | Sets a title that displays as a tooltip. |
For additional global attributes see our global attributes list.
The <span> tag is part of a group of tags
that are used to create and format text documents.
This group is referred to as the Text tag group.
Together, they allow you to create comprehensive HTML text documents.
Here is a list of text tags.
| Element | Description |
|---|---|
| <h1>-<h6> | Defines text headings in 6 different sizes |
| <p> | Creates a paragraph |
| <span> | Container for one or more inline text elements |
| <br> | Creates a line break |
| <sup> | Specifies superscript text |
| <sub> | Specifies subscripted text |
| <u> | Specifies underlined text |
| <i> | Specifies italic text |
| <b> | Specifies bold text |
| <em> | Marks text that needs emphasis |
| <strong> | Indicates text that is important or with high urgency |
| <del> | Defines deleted text |
| <ins> | Defines inserted text |
| <ruby> | Represents a small annotation with pronunciation of text |
| <kbd> | Specifies keyboard input, such as, CTRL or ALT |
| <wbr> | Specifies a preferred word-break location for long words |
Here is when <span> support started for each browser:
 Chrome
|
1.0 | Sep 2008 |
 Firefox
|
1.0 | Sep 2002 |
 IE/Edge
|
1.0 | Aug 1995 |
 Opera
|
1.0 | Jan 2006 |
 Safari
|
1.0 | Jan 2003 |
