HTML <span> Tag


ATTENTION: THIS PAGE IS Valid HTML 5 AND IS BEST VIEWED WITH HTML 5 - Please upgrade your browser or download one of the HTML 5 compatible browsers such as Mozilla Firefox, Chrome, Opera or IE 9 (March 14, 2011 or later). For more information see HTML 5 browsers.

If you find this helpful, please click the Google +1 Button to the left, if it is white, to make it turn blue or red. Thank you! (It also helps find this page again more easily.)

PDF mobile

The <span> Tag in HTML 5

The <span> tag is one of the inline tags used to group content in HTML.

The following example demonstrates syntax highlighting using the <span> tag.

Correct: <th colspan="3">
Incorrect: <th colspan='3">

This is an actual working example of the <span> tag example code below.

<span> Tag Syntax

   ... phrasing content expected ...<span>... phrasing content ...</span>...
Rules for coding the HTML span element

Make sure you understand the difference between a tag and element and are familiar with the definitions of namespace and other HTML terms.

  1. Code the span element where phrasing content is expected.
  2. Begin the span element with a starting <span> tag. The element name uses lower case letters and should be in the HTML namespace, which it will pick up automatically from the xmlns attribute on the <html> tag.
  3. Include any HTML global attributes on the <span> tag as appropriate.
  4. Inside the span element, between the starting <span> tag and the ending </span> tag, code the inner HTML phrasing content.
  5. End the span element with a matching </span> closing tag.
Content Model
Content of the span element

The content of the span element can include HTML comments, text content and only those HTML tags that can be used in phrasing content.

<span> Tag Attributes

Attributes of the <span> tag
global attributes The only attributes that can be coded on the <span> tag are the common HTML attributes. A class attribute or style attribute is often used to style the inner HTML of the span element.

span tag for Google Translate

Although it is a misuse of the class attribute on the span tag, Google Translate recognizes the specific value notranslate, indicating that the content of the element should not be translated into other spoken languages.

<span class="notranslate"/>

<span> Tag Examples

Examples of the span tag in HTML 5
Using the <span> tag for syntax highlighting
(see <span> tag demo above)
<div id="span-tag-demo">
<style scoped="scoped">
.syntax-highlighting .correct {
   text-decoration: none;
.syntax-highlighting .incorrect {
   text-decoration: line-through;
   color: #ee0000;
.syntax-highlighting mark {
   font-weight: bold;
.syntax-highlighting .delimiter {
   color: #000000;
.syntax-highlighting .tag {
   color: #0000ff;
.syntax-highlighting .attribute-name {
   color: #009900;
.syntax-highlighting .attribute-value {
   color: #006666;
.syntax-highlighting mark {
   background-color: #ffff00;
<p class="syntax-highlighting">
Correct: <code class="correct"><span class="delimiter">&lt;</span><span
class="tag">th</span> <span class="attribute-name">colspan</span><span
class="delimiter">="</span><span class="attribute-value">3</span><span
Incorrect: <code class="incorrect"><span class="delimiter">&lt;</span><span
class="tag">th</span> <span class="attribute-name">colspan</span><span
class="delimiter">=</span><mark><span class="delimiter">'</span><span
class="attribute-value">3</span><span class="delimiter">"</span></mark><span

The mark element is inserted to highlight the incorrect code by adding a starting <mark> tag between the = and the incorrect ' and adding an ending </mark> tag between the " and the &gt;. Since those locations are within the inner HTML of different span elements, each of those elements must be split into two elements by adding an ending </span> tag and a new starting <span> tag on either side of the inserted <mark> tags.

Chrome renders the text inside the mark element with a yellow background. For consistency in other browsers, the background-color property is specified for the mark element.

Changes in HTML 5 - <span> Tag

What's new in HTML 5
Differences between HTML 5 and earlier versions of HTML

The 2000-2010 Recommendations from the W3C HTML Working Group defined the HTML namespace for the span element type name along with the names of all HTML element types. In older (pre-2000) versions of HTML, element type names were not associated with a namespace.

Valid HTML 5