element is normally a child of a element; it provides • where or ; see a caption for an input method which is either: formenctype=" " type="submit" type="image" Forms on page 36 • its first descendant input method element or: • formmethod=" " where type="submit" or type="image"; see • the element whose id=" " attribute value matches the value of Forms on page 36 the for=" " attribute of the element • formnovalidate where type="submit" or type="image"; see It may take the attribute: Forms on page 36 • form=" " which explicitly associates the element with • formtarget=" " where type="submit" or type="image"; see the " " attribute of its form owner. name= Forms on page 36 • height= where type="image" 13.3 input • list=" " where type=" " is anything except hidden, The element is an input method which may have a button, password, checkbox or radio; if the multiple attribute is combobox, slider, spinbox or textbox role depending on its attributes set, takes the value of the id=" " of a element in which may include: the same document • accept=" " where type="file"; contains a hint, in the form of • max= where type=" " is a date, time, number or range; with a case-insensitive comma separated list, as to acceptable file- dates, times must be a string valid for the type=" " attribute; types whether as a MIME type, with one of the forms audio/*, with ranges the default is 100 video/* or image/* or with a string beginning with . such • maxlength= for use with any text field including passwords; as .pdf, ideally, each MIME type should be accompanied by a specifies the maximum code point length of the entry corresponding string beginning with . • min= where type=" " is a date, time, number or range; with • alt=" " where type="image"; provides a textual input for those dates, times must be a string valid for the type=" " attribute; who cannot access the image button with ranges, the default is 0; it also defines the step base
40 • minlength= for use with any text field including passwords; element, it applies to all those in the button group; specifies the minimum code point length of the entry the property aria-required is true if required is true • multiple a Boolean attribute for use where the list=" " at- • size=" " for use with text including passwords; the default is tribute is set or type="email" or type="file"; enables comma 20 characters separated email addresses filenames or selections from a range • src=" " for use with image buttons or from a element pointed to by the list=" " at- • step=" " where type=" " is a date, time, number or range; the tribute to be submitted default datetime and time steps, always expressed in seconds, • name=" " provides a key for the value of an element, are 60 seconds and the default date, week, month and number each key within a particular form should be unique except where steps are 1; a number step must be an integer unless the value type="radio" when all elements in a radio group must have the of min= is not an integer; where step="any" there is no step same key value • pattern=" " for use with any text field including passwords; • title=" " specifies for the user the available patterns when the permits the use of Javascript regular expressions, for example, pattern=" " attribute is set to enforce patterns of data entry in URL, email or telephone • type=" " which may take the attributes: fields; there must be a title=" " attribute specifying for the user the available patterns – hidden for input not to be provided by the user; the prop- erty aria-hidden is true if hidden is true • placeholder=" " contains the text that will appear in a textbox where value=" " is empty or absent; for use with any text field – text one line of plain text (the default and the fallback for including passwords and where type="number", for example, browsers that do not recognise one or more of the other types); it can normally be omitted; the ARIA attribute to sources; the AREA attribute role="combobox" may be set if there are suggestions as to sources and the list at- tribute is specified; in this case the property It is not an alternative to the element; the value of aria-owns holds this value the title=" " attribute should be displayed after the user has commenced an entry. – search generates a textbox for one line of plain text with an integral clear contents button; the following ARIA at- • readonly a Boolean attribute for use where type=" " is any- tributes may be set: thing except hidden, checkbox, radio, range or color; the property aria-readonly is true if readonly is true; unlike ∗ role="textbox" if there are no suggestions as to an element whose the disabled attribute is set, users can in- sources; teract with an element whose readonly attribute is set ∗ role="searchbox" if there are suggestions as to • required a Boolean attribute for use where type=" " is sources; anything except hidden, range or color; if applied to one ∗ role="combobox" if there are suggestions as to sources
41 and the list attribute is specified; in this case the – month generates a month picker using yyyy-mm property aria-owns holds this value – week generates a week picker using yyyy-Wn – tel intended for telephone numbers; the ARIA attribute – time generates a time picker using hh:mm:ss role="textbox" may be set if there are no suggestions as – datetime-local generates a date/time picker based on to sources; the AREA attribute role="combobox" may be local time using yyyy-mm-dd [T]hh:mm:ss set if there are suggestions as to sources and the list at- – intended for the use of floating point num- tribute is specified; in this case the property aria-owns number holds this value bers in spinboxes; it is not intended for number strings such as credit card numbers but otherwise it is worth – tel-national where only telephone numbers from a par- converting all number input elements to this type be- ticular country are acceptable cause it prompts smartphone browsers to offer a re- – url the ARIA attribute role="textbox" may be set if stricted keyboard containing numerals and symbols only there are no suggestions as to sources; the AREA attrib- or a spinbox; those that do not recognise it will de- ute role="combobox" may be set if there are suggestions fault to text anyway and display any value=" " attrib- as to sources and the list attribute is specified; in this ute that has been set. It may take the ARIA attribute case the property aria-owns holds this value; it is worth role="spinbox" in which case aria-valuemax is set to the converting all url input elements to this type because it maximum value, aria-valuemin to the minimum value prompts some mobile phone browsers to offer a restricted and aria-valuenow to the number entered keyboard containing alphnumerics, / and . only; those – range intended for sliders; if a browser does not render that do not recognise it will default to text anyway it as a slider, it will default to text anyway; if any of – email accepts more than one email address if the the values are unspecified, it takes the default values for multiple attribute is set; the ARIA attribute the min=, max= and value=" " attributes; it may take the role="textbox" may be set if there are no suggestions ARIA attribute role="slider" if the attribute multiple as to sources; the AREA attribute role="combobox" may is not specified in which case aria-valuemax is set to the be set if there are suggestions as to sources and the list maximum value, aria-valuemin to the minimum value attribute is specified; in this case the property aria-owns and aria-valuenow to the value selected holds this value; it is worth converting all email input – color an sRGB colour in 8 bit red, green and blue; elements to this type because it prompts some mobile without a value, it is intended to generate a colour picker phone browsers to offer a restricted keyboard containing but this is as yet unsupported alphnumerics, @ and . only; those that do not recognise – checkbox a set of zero or more values from a predefined it will default to text anyway list; the property aria-checked may be mixed if its state – password echoes dots instead of characters as the user is indeterminate, true or false; it takes the ARIA attrib- types; the ARIA attribute role="textbox" may be set ute role="checkbox" – date generates a date picker using yyyy-mm-dd – radio an enumerated value; there must always be more
42 than one such element and each element in the attributes min= and max= may also hold a global date- group must have the same value for the name=" " attrib- time values in which case any value in step=" " represent ute; the property aria-checked may be true or false; it seconds. takes the ARIA attribute role="radio". Similar considerations apply to the other date and time – file opens an "open file" dialogue in order to upload a file related values. or more than one file if the multiple attribute is set; the – a floating point number where type="number" or accept=" " attribute may be used to limit the files which type="range"; in the latter case, the attributes min="" are acceptable and max= may also hold floating point numbers in which – submit makes the element a command ini- case the value of step=" " defaults to 1 unless min= is not tiating submission; it may take the ARIA attribute an integer. role="button" – an sRGB colour where type="color" – image makes selecting a coordinate within the image a – the value associated with an element where command initiating submission; it needs a src=" " and type="checkbox" or type="radio" an alt=" " attribute providing a textual input for those who cannot access the image; it may also have dimen- • width= where type="image". sion attributes; it normally takes the ARIA attribute See also section 14.4 on page 47. role="button". – reset makes the element a command reset- 13.4 button ting the entire form; it may take the ARIA attribute role="button" The element always defines a command; it may take the – button requires a value=" " attribute as a label; it makes following attributes: the element a command; the ARIA attribute • autofocus see autofocus on page 38 role=" " may take one of the values: • disabled; the property aria-disabled is true if disabled is ∗ button; the default true • value=" " may contain: • form=" " explicitly associates the element with the id=" " attribute of its form owner – the text that accompanies the input method;; this must be • formaction=" " where type="submit", see Forms on page 36 consistent with any label where type="submit" and may be a label where type="button" • formenctype=" " where type="submit", see Forms on page 36 – the URL where type="url" • formmethod=" " where type="submit", see Forms on page 36 – a comma separated list of email addresses where • formnovalidate where type="submit", see Forms on page 36 type="email" • formtarget=" " where type="submit", see Forms on page 36 – a valid global date and time if the type="datetime"; the • name=" " a name for the button
43 • type=" " make take the attributes: – reset resets the form – button does nothing but may be associated with an ac- – submit submits the form (the default attribute) tion, for example,
Show hint • value=" " provides the element’s label A element cannot contain a < textarea> element.
It only takes the ARIA attribute role="button" in the unlikely case deselects all the others; if it is set and the items within the that the content of the element does not make it clear that it is a list are static, the property aria-multiselectable will be set element. to true; otherwise it will be set to false even there is more See also section 14.4 on page 47. than one choice. • name=" " a name for the group of form associated elements 13.5 select • required a Boolean attribute indicating that the user must se- lect an option; if this is true, the property aria-required will The element is an input method which controls the se- be set to true lection of options from a number of child elements or • size limits the number of options to show the user; the default elements within a child element; it may have is 1 unless multiple is set when it is 4. the attributes: Where the element only contains elements and • autocomplete=" " may take the values on (the default), off or the multiple attribute is not set but the required option is, the a variety of other values; see page on page 37 first element will be designated as the placeholder option. • disabled; the property aria-disabled is true if disabled is It normally takes the ARIA attribute role="listbox". true • form=" " explicitly associates the element with the 13.6 datalist id=" " attribute of its form owner • multiple a Boolean attribute which permits the selection of The element contains a number of elements;18 multiple options; when it is omitted, only one child it is the child of a element whose element has the element may be selected; selecting another element list attribute. 18These may be wrapped in a element for the benefit of browsers which do not support the element.
44 It takes the ARIA attribute role="listbox" provided the property • autocomplete see autocomplete on page 37 aria-multiselectable is set to false. • cols= specifies the character width of the text area (the default is 20) 13.7 optgroup • dirname=" " see Forms on page 36 • ; the property is if is The element is a child of a element and con- disabled aria-disabled true disabled tains a group of elements; it must have the label="" true attribute giving the name of the group of elements and • form=" " explicitly associates the
45 13.10 output • value= a floating point number value representing the meas- urement made, normally generated by a script The element contains the result of a calculation or user and it may have the attributes: action; it may take the attributes: • min= the lower bound of the measurement (the default is 0) • for=" " specifies the value of the id=" " of the element with which the element is associated • max= the upper bound of the measurement (the default is 1) • form=" " explicitly associates the element with the • low= specifies the low boundary of the range (the default is id=" " attribute of its form owner, if any min) • name=" " a name for the element. • high= specifies the high boundary of the range (the default is It takes the ARIA attribute role="status". max) • optimum= specifies the optimum point on the range (the default 13.11 progress is the midpoint). The element may be used in contexts where machine- The element has a progress bar role; it may have the readable data is used. attribute: It may take the ARIA attributes: • max= a floating point number value representing the completion • role=alert where it displays important, and usually time- of the task sensitive, information or and, if it is a determinate progress bar, the attribute • role=status where it displays advisory information not im- • value= a floating point number value representing the progress portant enough to justify an alert. made, normally generated by script The progress bar will be created using a script or other embedded code. Note: the element should not be used to record progress for which the element is more appropriate. It normally takes the ARIA attribute role="progressbar" and, if the progress bar is determinate, aria-valuemax will be set to the maximum value, aria-valuemin to the minimum value and 13.13 fieldset aria-valuenow to the current value. The element contains, optionally, a element N.B. The element should not be used as a gauge for followed by a group of form control elements grouped under a name; which the element is more appropriate. it may take the attributes: • the property is if is 13.12 meter disabled aria-disabled true disabled true The element contains a scalar measurement within a known • form=" " explicitly associates the element with the range; it must have the attribute: name=" " attribute of its form owner
46 • name=" " a unique name which can be accessed in Javascript 13.14 legend with form.. The element must be the first child of a ele- ment and contains its caption. It does not inherit the disabled It takes the ARIA attribute role="group". attribute from its parent element and so always displays the caption.
14 Interactive elements
14.1 details It normally takes the ARIA attribute role="dialog"; use aria-labelledby=" " if a visible label is present or aria-label=" The element enables the user to obtain further informa- " if not. tion; it normally contains a element acting as a legend for the details. It may have the attribute 14.4 A note about commands • open a Boolean attribute which may be set if the details are to be shown to the user along with the summary; in this case the An element defines a command if it is: property is set to . aria-expanded true • an element with an href=" " attribute that is neither It is not appropriate for material which should go in footnotes. disabled nor checked • a element that is neither disabled nor checked 14.2 summary • an element whose type=" " attribute is submit, reset, image, button, radio or checkbox and where the other attrib- The element contains a summary, caption or legend for a utes relevant to each type are consistent with that type element. • an < option> element which is a child of a element and whose value=" " attribute, if present, is not empty 14.3 dialog • a < legend> element, where there is no other or A element contains something with which the user may element within the < fieldset> element, whose interact. It should have the attribute open, a Boolean attribute spe- accesskey=" " attribute is not empty and which is not checked cifying whether it is open to the user; it should always be true but, • any other element whose accesskey=" " attribute is not empty if it is not present, the property aria-hidden is set to true. and which is neither disabled nor checked.
47 15 Scripting
Authors are encouraged to use scripts only when there is no other if used, it is recommended that strict access precautions are alternative. taken to prevent port scans • integrity=" " provides integrity metadata; must not be spe- 15.1 script cified when embedding a module script or when the src="" attribute is not present The
E.2 Scripts for encoding video ## Theora/Vorbis/Ogg
78 you@localhost$ ffmpeg2theora --videobitrate 200 --max_size 320x240 --output pr6.ogv pr6.dv ## H.264/AAC/MP4 you@localhost$ HandBrakeCLI --preset "iPhone & iPod Touch" --vb 200 --width 320 --two-pass --turbo --optimize --input pr6.dv --output pr6.mp4 ## VP8/Vorbis/WebM you@localhost$ ffmpeg -pass 1 -passlogfile pr6.dv -threads 16 -keyint_min 0 -g 250 -skip_threshold 0 -qmin 1 -qmax 51 -i pr6.dv -vcodec libvpx -b 204800 -s 320x240 -aspect 4:3 -an -f webm -y NUL you@localhost$ ffmpeg -pass 2 -passlogfile pr6.dv -threads 16 -keyint_min 0 -g 250 -skip_threshold 0 -qmin 1 -qmax 51 -i pr6.dv -vcodec libvpx -b 204800 -s 320x240 -aspect 4:3 -acodec libvorbis -ac 2 -y pr6.webm
F Video MIME types
These examples of using the element to specify video MIME types are from Hickson(2020, 4.8.2).
H.264 Constrained baseline profile video (main and extended video compatible) level 3 and Low-Complexity AAC audio in MP4 container
H.264 Extended profile video (baseline-compatible) level 3 and Low-Complexity AAC audioMP4 container
H.264 Main profile video level 3 and Low-Complexity AAC audio in MP4 container
H.264 ‘High’ profile video (incompatible with main, baseline, or extended profiles) level 3 and Low-Complexity AAC audio in MP4 container
MPEG-4 Visual Simple Profile Level 0 video and Low-Complexity AAC audio in MP4 container
79 MPEG-4 Advanced Simple Profile Level 0 video and Low-Complexity AAC audio in MP4 container
MPEG-4 Visual Simple Profile Level 0 video and AMR audio in 3GPP container
Theora video and Vorbis audio in Ogg container
Theora video and Speex audio in Ogg container
Vorbis audio alone in Ogg container
Speex audio alone in Ogg container
FLAC audio alone in Ogg container
Dirac video and Vorbis audio in Ogg container
80 G Omitting end tags
Void elements, < area>, , < br>,
, , , , The end tag of a element may be omitted it is immediately , , , , , < track> and < wbr> followed by a or element. have no end tags. The end tag of a element may be omitted if it is immediately The end tags of an or a
element can be omitted if followed by one of the following elements or it is the last element they are not followed by a comment. within the parent element where the parent element is not an , The end tags of a , or element may , , , , or element: be omitted if the element is not immediately followed by a space , , , , , character or a comment. ,
, , , , , The end tags of the following elements may be omitted if they are , , , , , , , followed by another element of the same type or are the last element , , ,
, , , within the parent element: The end tag of a element may be omitted if it is immediately , , followed by a or element. The end tags of the following elements may be omitted if they are followed by another element of the same type or another element The end tag of a element may be omitted if it is immedi- (specified in parentheses) or are the last element within the parent ately followed by a or element or if there is no more element: content in the parent element. ( ), (), (), < option> (), The end tag of a element may be omitted if there is no more ( ), < td> (), ( ) content in the parent element.H Making the new HTML semantic elements block elements in older browsers
Remy Sharp developed an HTML enabling script23 to enable IE to style the new semantic elements You can download the latest versions of the HTML enabling script and run the screen version with, for example,
My Weblog or change html5shiv.js to html5shiv-printshiv.js if you expect people will need to print your pages or you can download it with Modernizr.82 I Modernizr
Modernizr is a Javascript library to test for HTML and CSS ele- I.1 Elements supported by modernizr ments. For production use, go to the Modernizr Download page and create a customized version containing only the elements you Modernizr supports a wide range of HTML and CSS elements, among are using in your website together with Remy Sharp’s script24 and them, yepnope.js (now included in Modernizr as Monernizr.load) if you • applicationcache which is now deprecated want to incorporate alternative Javascript resources when an element • canvas see canvas on page 49 is not supported by a particular browser; for example: • canvastext (n.b. a browser may support canvas but not canvastext) Modernizr.load({ test: Modernizr.geolocation, • geolocation see Some notes on Javascript yep : ’geo.js’, • history see Some notes on Javascript nope: ’geo-polyfill.js’ • input. see input on page 40 }); • inputtypes. see input on page 40 tests for the geolocation API and, if it is not available, loads an al- • localstorage see Some notes on Javascript ternative API. • video see video on page 29; There is also a developer’s version containing all the elements which • webGL see WebGL context on page 50 would not normally be suitable for production use. • webworkers see Some notes on Javascript
Note: Microdata are not supported by modernizr; test for microdata using: function supports_microdata_api() { return !!document.getItems; }
The document is licensed under the Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License
24Note that current versions of this script no longer support earlier versions of IE. Adapt the script on page 81 if you need to support earlier versions of IE.
83