span ... ⁄span
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
- is an optional element
- multiple span elements allowed per HTML5 document
Display & support span
- display in browser »video
- display type: inline
Parents, children span
- span nested within elements »span parents
- elements nested within span »span children
»examples
Attributes span
- required: none
- optional: global attributes, event attributes
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 | <> ... </> »video |
Attributes and Values span (comma separated)
| < | attribute | = | "attribute_value(s)" | > | Video | Examples |
|---|---|---|---|---|---|---|
| 1. specific attributes | ||||||
| All Specific Attributes | ||||||
| 2. global attributes | ||||||
| 1. | accesskey | = | keyboard key | »img | < accesskey="h"> ... </> | |
| 2. | class | = | class name | »html »img | < class="class_name"> ... </> | |
| 3. | contenteditable | = | "", , true, false | »html | < contenteditable="true"> ... </> | |
| 4. | contextmenu | = | menu id value | »html | < contextmenu="menu_id_value"> ... </> | |
| 5. | data-* | = | value | - | < data-http-error="404"> ... </> | |
| 6. | dir | = | ltr, rtl, auto | »html | < dir="ltr"> ... </> | |
| 7. | draggable | = | true, , false | »img | < draggable="false"> ... </> | |
| 8. | dropzone | = | copy, move, link, string:, file: | - | < dropzone="copy"> ... </> | |
| 9. | hidden | = | "", , hidden | »html »img | < hidden="hidden"> ... </> | |
| 10. | id | = | id name | »html »img | < id="unique_id_name"> ... </> | |
| 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 | < lang="en"> ... </> | |
| 17. | spellcheck | = | "", , true, false | »html | < spellcheck="true"> ... </> | |
| 18. | style | = | CSS property:value | »html »img | < style="color:red"> ... </> | |
| 19. | tabindex | = | integer | »img | < tabindex="3"> ... </> | |
| 20. | title | = | text | »html »link»style »abbr»dfn »img »meter | < title="html page"> ... </> | |
| 21. | translate | = | "", yes, no | »html »img | < translate="yes"> ... </> | |
| 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 element, please see the specs: W3C ⁄ WHATWG