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
class attributes. It can also be helpful to provide attributes, like
title, to isolated spans of text.
span element is designed to contain only a single run of text. For bigger blocks of content use the
div element instead.
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
<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...
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.
<span align="center">The only source of knowledge is experience</span>
For information about global attributes refer to this list of global attributes in HTML5.
For information about global events refer to this list of global events in HTML5.