script ... ⁄script

Share it

script intro script inline, imported, data islands script browser display script parents - script statements script syntax script async attribute script charset attribute script defer attribute script type attribute script src attribute

HTML5 script element

The script element allows you to include scripts (inline, imported) and data blocks (data islands) in page »video

inline scripts, imported scripts, data islands
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>

»details - examples - video

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

!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:
<script src="scriptfile.js">

// only allowed: space, new lines, single line comments,
/*
and multi-line
comments
*/
<⁄script>

Syntax script

1 2	<script src="url"></script> <script> ... </script> »video

Attributes and Values script (comma separated)

<script	attribute	=	"attribute_value(s)"	Video	Examples
1. specific attributes
1.	async	=	"", , async	» video	<script src="script.js" async="async"> </script>
2.	charset	=	character encoding name	» video	<script src="js_file.js" charset="UTF-8"> </script>
3.	crossorigin	=	"", anonymous, use-credentials	-	<script src="http://domain.com/file.js" crossorigin=""> </script>
4.	defer	=	"", , defer	» video	<script src="script.js" defer="defer"> </script>
5.	type	=	MIME type	» video	<script type="application/javascript"> javascript goes here </script>
6.	src	=	URL	» video	<script src="script.js"> </script>
	All Specific Attributes
2. global attributes
1.	accesskey	=	keyboard key	»img	<script accesskey="h"> ... </script>
2.	class	=	class name	»html »img	<script class="class_name"> ... </script>
3.	contenteditable	=	"", , true, false	»html	<script contenteditable="true"> ... </script>
4.	contextmenu	=	menu id value	»html	<script contextmenu="menu_id_value"> ... </script>
5.	data-*	=	value	-	<script data-http-error="404"> ... </script>
6.	dir	=	ltr, rtl, auto	»html	<script dir="ltr"> ... </script>
7.	draggable	=	true, , false	»img	<script draggable="false"> ... </script>
8.	dropzone	=	copy, move, link, string:, file:	-	<script dropzone="copy"> ... </script>
9.	hidden	=	"", , hidden	»html »img	<script hidden="hidden"> ... </script>
10.	id	=	id name	»html »img	<script id="unique_id_name"> ... </script>
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	<script lang="en"> ... </script>
17.	spellcheck	=	"", , true, false	»html	<script spellcheck="true"> ... </script>
18.	style	=	CSS property:value	»html »img	<script style="color:red"> ... </script>
19.	tabindex	=	integer	»img	<script tabindex="3"> ... </script>
20.	title	=	text	»html »link »style »abbr »dfn »img »meter	<script title="html page"> ... </script>
21.	translate	=	"", yes, no	»html »img	<script translate="yes"> ... </script>
	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

For more information about the script element, please see the specs: W3C ⁄ WHATWG