span element

If you don't know what an element is or how you must use it, I recommend you read the "HTML tags and attributes" tutorial that you can find in the HTML tutorials section.

Table of contents

Description

The span element is a generic container with no particular semantic meaning. It's commonly used in web authoring for styling purposes, in conjunction with the style and class attributes. It can also be helpful to provide attributes, like lang or title, to isolated spans of text.

The span element is designed to contain only a single run of text. For bigger blocks of content use the div element instead.

Examples

The following example shows a document designed for teaching children how to paint a rainbow. For it to be more appealing to young audiences, their names are presented in colors using the span element.

<h1>Painting the rainbow</h1>
<p>This time we're going to use the following colors kids: <span style="color: #ed1b24">red</span>, <span style="color: #d9cc00">yellow</span>, <span style="color: #00a3e8">blue</span>, <span style="color: #a349a3">violet</span>, <span style="color: #ff7f26">orange</span>, <span style="color: #a1cc1b">green</span> and <span style="color: #5701ae">indigo</span>.</p>

Painting the rainbow

This time we're going to use the following colors kids: red, yellow, blue, violet, orange, green and indigo.

Now, a sentence is containing a word in another language that's been wrapped with the span element, in order to set the lang attribute for it.

<p>The spanish word '<span lang="es">libre</span>' (free) in LibreOffice reflects their philosophy...</p>

The spanish word 'libre' (free) in LibreOffice reflects their philosophy...

Attributes

Specific attributes

align

The horizontal alignment of the text inside this element and all of its children. There are four possible values (case-insensitive):

  • left: text is aligned to the left margin.
  • center: text is centered.
  • right: text is aligned to the right margin.
  • justify: text is justified or aligned to both margins.

The use of this attribute has become obsolete in HTML5 and, therefore, its use is no longer valid. Authors should replace it with style sheets declarations.

Example

<span align="center">The only source of knowledge is experience</span>

Global attributes

For information about global attributes refer to this list of global attributes in HTML5.

Events

Global events

For information about global events refer to this list of global events in HTML5.