W3-Video WEB Tutorials

w3-video.com is a Free eLearning Website with over 500 video tutorials on HTML5, XAMPP, .htaccess, Firefox, Notepad++

HTML5 Tutorial

Home HTML5 XAMPP .htaccess Firefox Notepad++


span ... ⁄span


Share it

span intro span browser display span parents - children span vs div span element vs span attributespan syntax

HTML5 span element

The span element represents its children, does not have any semantic.
The role of the span element is simply to group phrasing content for styling purpose, interactivity purpose, or other purposes » video

You can wrap text OR a group of elements, classified as phrasing content, inside span element and assign a global attribute and ⁄or an event handler attribute to it for:
- styling purpose (CSS),
- scripting purpose (JavaScript),
- other purposes (semantics...)

About span

Display & support span

Firefox iconChrome iconIE iconOpera iconSafari icon

Parents, children span

Attributes span

div vs span | span element vs span attribute

The difference between div and span: when each should be used? »elements + examples

The difference between span element and span attribute. »video

Syntax span

1<span> ... </span> »video

Attributes and Values span (comma separated)

<spanattribute="attribute_value(s)"> Video Examples
1. specific attributes
All Specific Attributes
2. global attributes
1.accesskey=keyboard key»img<span accesskey="h"> ... </span>
2.class=class name»html »img<span class="class_name"> ... </span>
3.contenteditable="",  , true, false »html<span contenteditable="true"> ... </span>
4.contextmenu=menu id value»html<span contextmenu="menu_id_value"> ... </span>
5.data-*= value -<span data-http-error="404"> ... </span>
6.dir=ltr, rtl, auto»html<span dir="ltr"> ... </span>
7.draggable= true,  , false»img<span draggable="false"> ... </span>
8.dropzone= copy, move, link, string:, file: -<span dropzone="copy"> ... </span>
9.hidden= "",  , hidden»html »img<span hidden="hidden"> ... </span>
10.id=id name»html »img<span id="unique_id_name"> ... </span>
11.itemid= URL --
12.itemprop= string »link »a-
13.itemref= string --
14.itemscope= "",  , itemscope--
15.itemtype= absolute URL --
16.lang=language code »html »head»title »img<span lang="en"> ... </span>
17.spellcheck="",  , true, false»html<span spellcheck="true"> ... </span>
18.style=CSS property:value»html »img<span style="color:red"> ... </span>
19.tabindex= integer »img<span tabindex="3"> ... </span>
20.title=text»html »link»style »abbr»dfn
»img »meter
<span title="html page"> ... </span>
21.translate="", yes, no»html »img<span translate="yes"> ... </span>
All Global Attributes
3. global event attributes
1.onclick=script» list<element onclick="script" > ...
2.ondblclick=script» list<element ondblclick="script" > ...
All Event Attributes

Video demonstration span element

HTML5 span: group phrasing content for different purposes

min video details
00:05 used with global/event handler attributes,span element allows you to group content, type text, or elements (phrasing content) for styling/scripting/or other purposes (add additional semantics)
00:22 1. for styling purpose: coloring text
a) wrap (group) that text inside span element
b) add a global attribute to it: class
c) add a value to it
00:52 result: ok
text grouped in a span element and styled
01:01 2. for scripting purpose/interactivity: alert box at mouse over
a) wrap the word scripting inside span element
b) add an event handler attribute to it: onmouseover
c) add JavaScript code as value
01:32 result: ok
the alert box displays when hovering over word 'scripting', word wrapped inside span element to which we've added an event handler attribute and JavaScript code as value
01:38 3a. other purposes: add semantics
a) wrap (group) that text inside span element
b) add a global attribute to it: lang
c) add a value to it
02:09 3b. other purposes: microdata
see a video demo here : microdata and span on link element
02:15 so far we wrapped just text inside span element, BUT we can wrap also a group of elements, part of the phrasing content for styling /scripting / or other purposes by using the global attributes and/or the event handler attributes
02:24 group of elements inside span element: the next elements (strong, b) part of the phrasing content can be grouped (wrapped) inside span element for styling / scripting / other purposes
02:45 group of elements wrapped inside span element for styling / scripting / other purposes (styling in our case)
03:00 result:ok
the content type text of the group of elements (strong, b) has a bigger font-size than the rest of the content

For more information about the span element, please see the specs: W3CWHATWG