HTML <span> Tag

The <span> tag contains an in-line text fragment, usually for styling purposes. By default, this element does not visually change its content.

HTML Tag

Example

#

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>

Using <span>

The <span> tag is used to group inline elements and content.

It works like a <div> tag but it renders as an inline element without line-breaks.

By default, the <span> element does not visually change its content.

This element is most commonly used for styling purposes.

More Examples

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>

Attributes for <span>

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.


Text Tags

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, these tags 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

Browser support

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

You may also like

Guides