script ... ⁄script
HTML5 script element
The script element allows you to include scripts (inline, imported) and data blocks (data islands) in page »video
inline | add scripts in page → | <script> add script statements here <⁄script> |
imported | link an external script file to the page → | <script src="URL"><⁄script> |
data islands | include data blocks in page (store data) → | <script type="MIME type" > stored data (data blocks ⁄islands) <⁄script> |
About script
- is an optional element
- multiple script elements allowed per HTML5 document, both in head and body sections
Display & support script
- display in browser »video
- display type: none





Parents, children script
- script nested within elements »script parents
- script statements inside script »script children
»examples
Attributes script
- required: none
- optional: specific attributes, global attributes, event attributes
- observations:
- scripts:
- type attribute may be omitted if the scripting language is text⁄javascript
- external scripts:
- if type attribute is present, charset must be absent
- if src attribute is present, the next attributes can be specified: charset, defer, async, crossorigin
- data blocks:
- type attribute is required because it gives the format type of the stored data; src attribute must not be present
- scripts:
!Restrictions content model script
- - inline scripts: Content Model restrictions (in strings, regular expressions, or comments):
- if <!-- present, then escape it: <\!--
- if <script present, then escape it: <\script
- if <⁄script present, then escape it: <\⁄script
- imported scripts: Content Model restrictions:
<src="scriptfile.js">
// only allowed: space, new lines, single line comments,
/*
and multi-line
comments
*/
<⁄ >
Syntax script
1 2 | < src="url"></> <> ... </> »video |
Attributes and Values script (comma separated)
< | attribute | = | "attribute_value(s)" | > | Video | Examples |
---|---|---|---|---|---|---|
1. specific attributes | ||||||
1. | async | = | "", , async | » video | <src="script.js" async="async"> </ > | |
2. | charset | = | character encoding name | » video | <src="js_file.js" charset="UTF-8"> </ > | |
3. | crossorigin | = | "", anonymous, use-credentials | - | <src="http://domain.com/file.js" crossorigin=""> </ > | |
4. | defer | = | "", , defer | » video | <src="script.js" defer="defer"> </ > | |
5. | type | = | MIME type | » video | <type="application/javascript"> javascript goes here </ > | |
6. | src | = | URL | » video | <src="script.js"> </ > | |
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 script element
HTML5 inline ⁄ imported scripts, data islands, Tutorial
min | video details |
---|---|
00:11 | The script element allows you to include: |
00:11 | - scripts: inline or external |
00:15 | - data islands (blocks) |
00:25 | Use the script element to include: |
00:25 | 1. inline scripts - src attribute required |
01:01 | 2. external scripts - src attribute required |
02:03 | 3. data islands (data blocks) - type attribute is required |
02:48 | note: data islands don't display in browser |