XHTML » Tags » span

Syntax:
<span> ... </span>

The span tag is used to designate an inline portion of an HTML document as a span element and to apply any of the core attributes of this tag against the contents of that element. The behavior of this tag is inline because the effects occur in the normal flow of the text and images (without the tag inserting any additional linefeeds or carriage returns). span tags, which can be nested, allow a significant degree of control and manipulation of a localized part of your web page.

For example, you could use the class or style core attributes to apply the effects of Cascading Style Sheets or you could use the lang attribute to display a foreign language text.

In contrast, you should use the div tag when you want to apply attributes to a block of code. Note that the behavior of the div tag is not inline, but rather is block-line, since this tag causes a line break to occur both before and after the div element.

With the advent of Cascading Style Sheets, both the div and span tags have gained importance and usefulness.

The separate closing tag is mandatory.

Examples

Code:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>DevGuru XHTML span Tag Example</title>
</head>
<body>
<span class='CODE' >
This line is blue.
</span>
</body>
</html>
Output:
This line is blue.
Explanation :

As above example, all of the code samples on the DevGuru site are in blue colored text. This is done by enclosing the code sample inside a pair of span tag elements and designating a class attribute of "CODE". In turn, the "CODE" class has been assigned a text color of blue in the style sheets file (a .css file) that is located in the Include/ directory on the DevGuru web site. Thus, only one file is needed to define the appearance of the entire site

Language(s): XHTML
Code:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>DevGuru XHTML span Tag Example</title>
</head>
<body>
<span style="color:blue;" >
This line is blue.
</span>
</body>
</html>
Output:
This line is blue.
Explanation :

If you do not wish to create a .css file, you can still get the exact same results by using the style attribute for the span tag and the style sheet color property

Language(s): XHTML

Events

onclick

Syntax: onclick="action"

The onclick event is associated with the single click of a mouse on a selected HTML tag (element). Whenever you single click the element, the script code of the onclick is executed. This script can also call functions or subroutines which contain code that you want to run when the single click occurs.

ondblclick

Syntax: ondblclick="action"

The ondblclick event is associated with the double click of a mouse on a selected HTML element. Whenever you double click the element, the script code of the ondblclick is executed. This script can also call functions or subroutines which contain code that you want to run when the double click occurs.

onkeydown

Syntax: onkeydown="action"

The onkeydown event is associated with pressing down a key on the keyboard while the mouse is inside a selected HTML tag (element). In other words, the key down event occurred while the HTML element was in focus. Whenever you press down the key, the script code of the onkeydown is executed.

onkeypress

Syntax: onkeypress="action"

The onkeypress event is associated with press of a key on the keyboard while the mouse is inside a selected HTML element. In other words, the key press event occurred while the HTML element was in focus. Whenever you press the key, the script code of the onkeypress is executed.

onkeyup

Syntax: onkeyup="action"

The onkeyup event is associated with releasing up a key on the keyboard while the mouse is inside a selected HTML tag (element). In other words, the key up event occurred while the HTML element was in focus. Whenever you release the key, the script code of the onkeyup is executed.

onmousedown

Syntax: onmousedown="action"

The onmousedown event is associated with clicking down the mouse button while the mouse is inside a selected HTML tag (element). In other words, the mouse down event occurred while the HTML element was in focus. Every time you click down the mouse, while inside the element, the script code of the onmousedown is executed. This script can also call functions or subroutines which contain code that you want to run when this event occurs.

onmousemove

Syntax: onmousemove="action"

The onmousemove event is associated with moving the mouse around while inside a selected HTML tag (element). In other words, the mouse move event occurred while the HTML element was in focus. Every time you move the mouse around the element, the script code of the onmousemove is executed. This script can also call functions or subroutines that contain code that you want to run when this event occurs.

onmouseout

Syntax: onmouseout="action"

The onmouseout event is associated with moving the mouse out of a selected HTML tag (element). In other words, the mouse out event occurred while the HTML element was in focus. Every time you move the mouse out of the element, the script code of the onmouseout is executed. This script can also call functions or subroutines which contain code that you want to run when this event occurs.

onmouseover

Syntax: onmouseover="action"

The onmouseover event is associated with moving the mouse over a selected HTML tag (element). In other words, the mouse over event occurred while the HTML element was in focus. Every time you move the mouse over the element, the script code of the onmouseover is executed. This script can also call functions or subroutines which contain code that you want to run when this event occurs.

onmouseup

Syntax: onmouseup="action"

The onmouseup event is associated with the releasing up portion of a click of the mouse while inside a selected HTML tag (element). In other words, the mouse up event occurred while the HTML element was in focus. Every time you release the mouse up, while in the element, the script code of the onmouseup is executed. This script can also call functions or subroutines which contain code that you want to run when this event occurs.

See Also: