some notes on html5

7/28/2019 Some Notes on HTML5

1/67

Some notes on HTML5

John R Hudson

31st August 2011

Contents

1 Introduction 4

I Setting things up 5

2 Using modernizr to test for HTML5 elements 5

2.1 Elements supported by modernizr . . . . . . . . 5

3 HTML5 semantic elements 6

3.1 Making the new semantic elements block ele-ments in older browsers . . . . . . . . . . . . . 6

3.2 Remy Sharps HTML enabling script to enable

IE to style new semantic elements . . . . . . . 6

II HTML 8

4 The Doctype declaration 8

5 The root element 8

5.1 html . . . . . . . . . . . . . . . . . . . . . . . . 8

6 The document metadata 106.1 head . . . . . . . . . . . . . . . . . . . . . . . . 106.2 title . . . . . . . . . . . . . . . . . . . . . . . . 106.3 base . . . . . . . . . . . . . . . . . . . . . . . . 106.4 link . . . . . . . . . . . . . . . . . . . . . . . . . 106.5 meta . . . . . . . . . . . . . . . . . . . . . . . . 126.6 style . . . . . . . . . . . . . . . . . . . . . . . . 12

7 Scripting 13

7.1 script . . . . . . . . . . . . . . . . . . . . . . . 13The author would welcome notification of any errors or possible misunderstandings.First presented at the meeting of Bradford GNU/LUG sponsored by Dick Thomas on Wednesday, 31 August 2011.

1
mailto:[email protected]://remysharp.com/2009/01/07/html5-enabling-script/http://bradlug.co.uk/http://www.xpd259.co.uk/http://www.xpd259.co.uk/http://bradlug.co.uk/http://remysharp.com/2009/01/07/html5-enabling-script/mailto:[email protected]


2/67

7.2 noscript . . . . . . . . . . . . . . . . . . . . . . 13

8 Sectioning elements 158.1 body . . . . . . . . . . . . . . . . . . . . . . . . 15

8.2 section . . . . . . . . . . . . . . . . . . . . . . . 15

8.3 nav . . . . . . . . . . . . . . . . . . . . . . . . . 16

8.4 article . . . . . . . . . . . . . . . . . . . . . . . 168.5 aside . . . . . . . . . . . . . . . . . . . . . . . . 16

8.6 h1--h6 . . . . . . . . . . . . . . . . . . . . . . . 16

8.7 hgroup . . . . . . . . . . . . . . . . . . . . . . . 168.8 header . . . . . . . . . . . . . . . . . . . . . . . 17

8.9 footer . . . . . . . . . . . . . . . . . . . . . . . 17

8.10 address . . . . . . . . . . . . . . . . . . . . . . 17

9 The sectioning roots 18

10 Grouping elements 18

10.1 p . . . . . . . . . . . . . . . . . . . . . . . . . . 1810.2 hr . . . . . . . . . . . . . . . . . . . . . . . . . 18

10.3 pre . . . . . . . . . . . . . . . . . . . . . . . . . 18

10.4 blockquote . . . . . . . . . . . . . . . . . . . . . 1810.5 ol . . . . . . . . . . . . . . . . . . . . . . . . . . 18

10.6 ul . . . . . . . . . . . . . . . . . . . . . . . . . . 19

10.7 li . . . . . . . . . . . . . . . . . . . . . . . . . . 19

10.8 dl . . . . . . . . . . . . . . . . . . . . . . . . . . 19

10.9 figure . . . . . . . . . . . . . . . . . . . . . . . 19

10.10div . . . . . . . . . . . . . . . . . . . . . . . . . 19

11 Text level semantics 2011.1 a . . . . . . . . . . . . . . . . . . . . . . . . . . 20

11.2 em . . . . . . . . . . . . . . . . . . . . . . . . . 21

11.3 strong . . . . . . . . . . . . . . . . . . . . . . . 21

11.4 small . . . . . . . . . . . . . . . . . . . . . . . . 2111.5 s . . . . . . . . . . . . . . . . . . . . . . . . . . 2111.6 cite . . . . . . . . . . . . . . . . . . . . . . . . . 21

11.7 q . . . . . . . . . . . . . . . . . . . . . . . . . . 2111.8 dfn . . . . . . . . . . . . . . . . . . . . . . . . . 21

11.9 abbr . . . . . . . . . . . . . . . . . . . . . . . . 2211.10time . . . . . . . . . . . . . . . . . . . . . . . . 2211.11code . . . . . . . . . . . . . . . . . . . . . . . . 22

11.12var . . . . . . . . . . . . . . . . . . . . . . . . . 2211.13samp . . . . . . . . . . . . . . . . . . . . . . . . 2211.14kbd . . . . . . . . . . . . . . . . . . . . . . . . 22

11.15sub and sup . . . . . . . . . . . . . . . . . . . . 2211.16i . . . . . . . . . . . . . . . . . . . . . . . . . . 2311.17b . . . . . . . . . . . . . . . . . . . . . . . . . . 23

11.18mark . . . . . . . . . . . . . . . . . . . . . . . . 2311.19ruby, rt and rp . . . . . . . . . . . . . . . . . . 23

11.20bdi and bdo . . . . . . . . . . . . . . . . . . . . 2311.21span . . . . . . . . . . . . . . . . . . . . . . . . 2311.22br . . . . . . . . . . . . . . . . . . . . . . . . . 23

11.23wbr . . . . . . . . . . . . . . . . . . . . . . . . 23

12 Editing elements 2412.1 ins and del . . . . . . . . . . . . . . . . . . . . 24

13 Embedded content 2413.1 img . . . . . . . . . . . . . . . . . . . . . . . . . 24

13.2 iframe . . . . . . . . . . . . . . . . . . . . . . . 25

13.3 embed . . . . . . . . . . . . . . . . . . . . . . . 2513.4 object . . . . . . . . . . . . . . . . . . . . . . . 26

13.5 param . . . . . . . . . . . . . . . . . . . . . . . 26

2


3/67

13.6 video . . . . . . . . . . . . . . . . . . . . . . . . 26

13.7 audio . . . . . . . . . . . . . . . . . . . . . . . . 2913.8 source . . . . . . . . . . . . . . . . . . . . . . . 3013.9 track . . . . . . . . . . . . . . . . . . . . . . . . 31

13.10canvas . . . . . . . . . . . . . . . . . . . . . . . 3113.11map . . . . . . . . . . . . . . . . . . . . . . . . . 31

13.12area . . . . . . . . . . . . . . . . . . . . . . . . 31

14 Tabular data 3314.1 table . . . . . . . . . . . . . . . . . . . . . . . . 3314.2 caption . . . . . . . . . . . . . . . . . . . . . . 33

14.3 colgroup . . . . . . . . . . . . . . . . . . . . . . 3314.4 col . . . . . . . . . . . . . . . . . . . . . . . . . 3314.5 tbody . . . . . . . . . . . . . . . . . . . . . . . 33

14.6 thead . . . . . . . . . . . . . . . . . . . . . . . 3314.7 tfoot . . . . . . . . . . . . . . . . . . . . . . . . 3314.8 tr . . . . . . . . . . . . . . . . . . . . . . . . . . 33

14.9 td . . . . . . . . . . . . . . . . . . . . . . . . . 3414.10th . . . . . . . . . . . . . . . . . . . . . . . . . 34

15 Forms 3415.1 form . . . . . . . . . . . . . . . . . . . . . . . . 35

15.2 fieldset . . . . . . . . . . . . . . . . . . . . . . . 3515.3 legend . . . . . . . . . . . . . . . . . . . . . . . 35

15.4 label . . . . . . . . . . . . . . . . . . . . . . . . 3515.5 input . . . . . . . . . . . . . . . . . . . . . . . . 3615.6 button . . . . . . . . . . . . . . . . . . . . . . . 40

15.7 select . . . . . . . . . . . . . . . . . . . . . . . . 41

15.8 datalist . . . . . . . . . . . . . . . . . . . . . . 4115.9 optgroup . . . . . . . . . . . . . . . . . . . . . . 41

15.10option . . . . . . . . . . . . . . . . . . . . . . . 42

15.11textarea . . . . . . . . . . . . . . . . . . . . . . 4215.12keygen . . . . . . . . . . . . . . . . . . . . . . . 4215.13output . . . . . . . . . . . . . . . . . . . . . . . 4215.14progress . . . . . . . . . . . . . . . . . . . . . . 4315.15meter . . . . . . . . . . . . . . . . . . . . . . . 43

16 Interactive elements 4316.1 details . . . . . . . . . . . . . . . . . . . . . . . 4316.2 summary . . . . . . . . . . . . . . . . . . . . . 4416.3 menu . . . . . . . . . . . . . . . . . . . . . . . . 4416.4 command . . . . . . . . . . . . . . . . . . . . . 4416.5 A note about commands . . . . . . . . . . . . . 44

17 Comments 45

18 Notes on attributes 45

III HTML5 elements 48

19 Notes on some HTML5 elements 4819.1 Application cache . . . . . . . . . . . . . . . . . 4819.2 Canvas scripting . . . . . . . . . . . . . . . . . 4819.3 Microdata . . . . . . . . . . . . . . . . . . . . . 50

A HTML elements by groups 56A.1 Metadata elements . . . . . . . . . . . . . . . . 56A.2 Flow elements . . . . . . . . . . . . . . . . . . . 57A.3 Sectioning elements . . . . . . . . . . . . . . . . 58

A.4 Heading elements . . . . . . . . . . . . . . . . . 58A.5 Phrasing elements . . . . . . . . . . . . . . . . 58A.6 Embedding elements . . . . . . . . . . . . . . . 59

3


4/67

A.7 Interactive elements . . . . . . . . . . . . . . . 59

B Example of a DOM tree for some HTML text 60

C Video MIME types 62

D Canvas context attributes 64

E Omitting end tags 67

1 Introduction

These notes are taken from HTML Up and Running (Pilgrim, 2010) and HTML: living standard (Hickson, 2011). They areintended as a quick reference for designing web pages and not as a replacement for reading the source documentation.

Note that:

you dont have to change anything you have written in the past to get HTML5 to work

by the addition of a couple of Javascript scripts your HTML5 site will run on any browser

HTML5 offers significant enhancements to mobile phone users experience without sacrificing compatibility with olderbrowsers.

4


5/67

Part I

Setting things up

2 Using modernizr to test for HTML5 elements

When modernizr.min.js runs, it creates a set of Boolean properties for each element that it can detect. So the script:

if(Modernizr.){

}else{

}

will execute the first condition if the Boolean property for is true and the second if it is not.

2.1 Elements supported by modernizr

applicationcache see Application cache onpage 48; n.b. the DOM prop erty is calledwindow.applicationCache

canvas see Canvas scripting on page 48

canvastext (n.b. a browser may support canvas butnot canvastext)

geolocation (n.b. this is not regarded as part ofHTML5 by Hickson (2011))

history

localstorage n.b. the DOM ob ject is called

window.localStorage

input. accepts as , among otherthings,

autofocus see Autofocus on page 39

placeholder see input on page 36

inputtypes. see input on page 36

video see video; to test for specific formats, see Mod-ernizr script to test for video formats on page 27

webworkers n.b. the DOM object is called

window.Worker

5


6/67

Note: Microdata are not supported by modernizr; test for microdata using:

function supports_microdata_api() {

return !!document.getItems;

}

3 HTML5 semantic elements

3.1 Making the new semantic elements block elements in older browsers

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {

display:block;

}

3.2 Remy Sharps HTML enabling script to enable IE to style new semantic elements

6
http://remysharp.com/2009/01/07/html5-enabling-script/http://remysharp.com/2009/01/07/html5-enabling-script/


7/67

3.2.1 Remy Sharps hosted version

My Weblog

Script to style a single semantic element

article {

display: block; border: 1px solid red

}

document.createElement("article");

Notes: Such scripts are discouraged; element styles should be defined in a CSS.When used within an element, enclose the statements within .

7


8/67

Part II

HTML

4 The Doctype declaration1

triggers HTML5 standards mode; it should have no characters before it, in particular no white space; otherwise, somebrowsers will ignore it. In the absence of this declaration, the page will be rendered in HTML5 quirks mode.

5 The root element

5.1 html

Contains only the and elements and normally has the lang= attribute.2 It may also have the manifest= attribute giving the location of the application cache manifest (see Application cache), for example,

If using the manifest= attribute, add, in this case,

AddType text/cache-manifest .manifest

to the Apache htaccess file.

The element should only include document or application elements.

Figure 1 sets out and attempts to represent the key relationships, if any, between most of the elements in sections 5 to 16.

For details of conformance to the expectations of assistive technology products (ARIA), see Hickson (2011, p. 104108).1Table 1 on page 14 offers a template for an HTML5 page.2For the full list of language tags, see http://www.iana.org/assignments/language-subtag-registry

8
http://www.iana.org/assignments/language-subtag-registryhttp://www.iana.org/assignments/language-subtag-registry


9/67

or

...

XOR

(if no )

(if list attribute is set)

KEY

sectioning roots

grouping elements

embedded content

table elements

Figure 1: HTML5 elements

9


10/67

6 The document metadata

In general elements should not cross typographical paragraphboundaries; where this is not clear use explicit
ele-ments to define the boundaries typographically. Tags shouldalso be nested and should not overlap each other.
6.1 head

Must be the first element in the element and containthe element.

6.2 title

A required element in the element and in most childdocuments; there should be only one per document

and it should describe the contents of the document unam-biguously, even if the headings are ambiguous, for example,because they are humorous or assume prior knowledge.

6.3 base

There must be one element in the containingeither a href or a target attribute or both; the href attrib-ute must define the documents base URL; the target attrib-ute defines the browsing context for the purpose of resolving

hyperlinks.

6.4 link

The element defines external resources available tothe document; it must have

either a rel or an itemprop attribute and an href=" " attribute which defines the source of the

external material and is mandatory; for example,

points to the rules for the page and must be read. The relattribute may be one of3

rel="alternate"

1. rel="alternate" links to an alternate represent-ation of the current document.

2. where rel="alternate" is combined withtype="application/rss+xml" ortype="application/atom+xml" it links to a syn-dication feed; for example,

points to something external to the page which canbe read; the href attribute is specified relative to

the URL in the element.3The rel=external, rel=nofollow, rel=norefferer and rel=start attributes mentioned by Pilgrim (2010, p. 38f) are not accepted by

Hickson (2011) in this context; the first three are accepted in the context of the and elements.

10


11/67

3. rel="alternate stylesheet" modifies the linkcreated by rel="stylesheet"; in this case, ittakes the mandatory attribute title= indic-ating, for example, a different presentation of thematerial or a different language.

rel="author" links to a document describing the cur-

rent documents author

rel="bookmark" links to the nearest ancestor element or section in the absence of an element

rel="help" creates a hyperlink to context sensitive helpfor the page as a whole

rel="icon" creates a lyperlink to an icon on an externalresource which represents the current document; it maytake the attribute sizes= containing one or morespace separated sizes for the available icons and where

any indicates a scalable icon, for example, SVG rel="license" creates a hyperlink to a licence docu-

ment; the author must indicate whether it is applic-able to the whole document or to an element within thedocument; the legacy value copyright is treated in thesame way

rel="next" creates a hyperlink to the next documentin the series to which the current document belongs

rel="pingback" creates a hyperlink to the address ofthe pingback server that handles pingbacks to the cur-

rent document rel="prefetch" mandates pre-emptive caching

rel="prev" creates a hyperlink to the previous docu-

ment in the series to which the current document be-longs; the legacy value previous is treated in the sameway

rel="search" creates a hyperlink to a resource whichcan be used to search the current document

rel="sidebar" specifies that the link is intended tobe shown in the browsers sidebar or other secondarybrowsing context

rel="stylesheet" links to a stylesheet

rel="tag" links to an address which gives a tag describ-ing the current document

The other attributes may be

media= specifies the media, for example,

media=print points to a page laid out for printing;the default is all

hreflang=" " defines the language of the external ma-terial

type=" " specifies the MIME type of the resource; thisis currently redundant in the element as thereis only one type text/css; it may become useful ifsomeone develops a new type of stylesheet. Note thatentering an invalid MIME type will cause some browsersto ignore the entire statement.

title=" " optional but, if link rel="stylesheet", itdefines the alternative stylesheet sets.

11


12/67

6.5 meta

The meta element represents various kinds ofmetadata that cannot be expressed using the title,base, link, style, and script elements (Hickson,2011, p. 123).

It may take one of the following attributes:

charset= this should always be UTF-8 for newlycreated documents; it should always be specified be-cause leaving it out creates security vulnerabilities

http-equiv= use of this attribute is discouraged asthere are alternative ways of achieving what it does; itmay take the attributes:

content-language n.b. use the lang= attrib-ute instead

content-type n.b. use charset= instead

default-style the alternative stylesheet set

refresh refreshes the page every n seconds wheren is specified in content=

set-cookie n.b. use HTTP headers instead

itemprop= see Microdata on page 50

name= may have as its attributes

application-name in which case content= should hold the name of the Web application that

created the website author

description

generator in which case content= should holdthe software that created the page

keywords in which case content= should con-tain a comma separated list of key words; n.b.many search engines ignore this attribute becauseit has historically been used to spam search engine

results

Other than for the charset attribute the content= at-tribute holds the data relating to each attribute.

The mechanism is intendedto enable authors to register extensions to the predefined setof metadata names.

6.6 style

In the element it is an alternative to a statement (page 10), for ex-ample,

body{color: black; background: white;}

em{font-style: normal; color: red;}

It may take the following attributes:

media= the default is all

scoped is a Boolean attribute which, if set, means thatthe style is only applied to the parent and child docu-ments, not to the whole document

12


13/67

title= defines alternative stylesheet sets

type= the default value is text/css

However, the use of statements is de-precated in favour of statements other than for rapid prototyping prior to removalto a stylesheet.

7 Scripting

7.1 script

The element may take the following attributes:

src= URL for a source file; if there is one, the fol-lowing attributes may also be applied:

async Boolean attribute; when set the externalscript is executed as it is fetched; n.b. many older

browsers do not recognise this attribute defer Boolean attribute; when set the external

script is executed when the browser has finishedparsing the whole page

charset= only if the type= attribute

is not specified, i.e. the default value istext/javascript

Where the src= attribute is defined, any other ele-ments in the element are ignored.

type= the default value is text/javascript; wheretype= does not hold the default value, it can be used

to handle inline or server side scripts.

7.2 noscript

For legacy reasons the noscript element is best avoided.

13


14/67

Table 1: An HTML5 templage

Page title

$(document).bind(autofocus_ready, function() {

if (!("autofocus" in document.createElement("input"))) {

$("#q").focus();

}

});

...

14


15/67

Navigation

AsideArticle

Footer

Header

Figure 2: The key elements in the element (thanks to David Fisher (2010))

8 Sectioning elements

8.1 body

There is only one in a document.

Five of the HTML5 semantic elements (section 3 on page 6)play a key role in the layout of the element (see fig-ure 2 on this page).

8.2 section

The element is a general section of a document orapplication; it should normally be used within an element or for the sections of a where is

not appropriate but not for very short pieces of content wherea would be more appropriate. One criterion for distin-guishing and is that a elementmight appear in a table of contents but a element wouldnot.

A element within a element is an appropri-ate container for an whereas, within a element, if might share the same elements.

It must be one of alert, alertdialog, application, contentinfo,dialog, document, log, main, marquee, region, search, orstatus.

15


16/67

8.3 nav

The element is normally a major section which containsnavigation links to other pages or other parts of the page; a element is an appropriate container for an and/or elements. A element containing a

group of minor links may also appear within another section-ing element, for example, the element or the element may be omitted completely in favour of using the element only where there only a few such links.

8.4 article

The element is normally a self-contained compos-ition which could easily be detached from its context. Typic-

ally an element will include a giving thepublication date and a element giving details of theauthor. A nested might include comments on thearticle. It must be article, document, application or main.

8.5 aside

The element contains content that is tangentially re-lated to what is around it. It must be a note, complementaryor a search.

8.6 h1--h6

The elements represent a hierarchy of headingswithin any type of section in a document.

8.7 hgroup

The element allows you to group elements within an element so that they do not take effect outsidethat element, for example,

My Weblog

A lot of effort went into making this effortless.

...

It should normally be used where there is more than one level of -- elements within an element in order to avoidunexpected interactions with -- elements in other elements.

16


17/67

8.8 header

The element is intended to provide a heading foranother sectioning element; it represents a section within an-other sectioning element rather than being a free-standingsection itself. It normally contains an or ele-ment and may include a table of contents, search form, logo ornavigational aids. A header can come in any type of sectionincluding an element. It must be a banner.

8.9 footer

A element is intended to provide content informa-tion relating to the nearest sectioning element, such as author,

copyright information and links; it represents a section withinanother sectioning element rather than being a free-standingsection itself. A document may have multiple ele-ments related to the and to individual sectioning ele-ments within the document.

The element is not intended to hold footnotes

for which the title= attribute of the relevant elementis usually most appropriate for short footnotes and the element for longer ones. Alternatively, the, or elements can be usedor the footnotes included in cells at the foot of a table.

8.10 address

An element contains contact information relating to the nearest section statement. It must not contain any othertype of information and it would normally appear within a element, for example,

For more details, contact

John Smith.

17


18/67

9 The sectioning roots

Six elements are considered sectioning roots, that is, any child sections and headings within these elements do not contributeto the outlines of their ancestors:

blockquote

body

details

fieldset

figure

td

10 Grouping elements

10.1 p

The

element represents a paragraph. If should normallybe used to represent conversations but should not be usedinstead of a more appropriate element.

10.2 hr

The element provides a separator between two para-graphs indicating a thematic change between the content ofthe paragraphs which cannot be expressed in any other way.

10.3 pre

The element allows the introduction of pre-formatted

text into a document; it would typically be used with the, or elements but could, for example,be used to display specifically formatted poetry.

10.4 blockquote

The element contains content from anothersource and may have a cite= attribute containing theURL of the source. should not be used torepresent conversations;

should be used instead

10.5 ol

The element contains an intentionally ordered list. Itshould not be used for lists where the order is immaterial. Itmay have the attributes:

reversed a Boolean attribute; when set, the list is out-put in descending order

start= takes an integer as the start value of the list

type= where the attribute may be

1 decimal numbers; the default

18


19/67

a lowercase latin alphabet

A uppercase latin alphabet

i lowercase roman numerals

I uppercase roman numerals

But, if the first element contains a value= attribute

that can be parsed, this will be used in preference to anythingelse and each subsequent element will be numbered onemore, or one less if the reversed attribute has been set, inthe absence of a value= attribute in the element that can beparsed.

The child elements are always elements. They must beone of directory, list, listbox, menu, menubar, tablist, toolbar,tree.

10.6 ul

The element contains a list where the order is imma-terial. The child elements are always elements. Theymust be one of directory, list, listbox, menu, menubar, tablist,toolbar, tree.

10.7 li

The element contains a list item within a , or element. When within an element, if may havethe attribute value= where the value is an integer which givesthe element an ordinal value.

When within an or element, they must be one oflistitem, menuitemcheckbox, menuitemradio, option, tab, ortreeitem.

10.8 dl

The element contains a datalist consisting of associated (term) and (definition) elements. Associations maybe one to one, one to many or many to one allowing multipledefinitions of a term and multiple terms for one definition. Toindicate that the term in the element is being formallydefined in the element, enclose it in a elementwithin the element.

10.9 figure

The element contains content which can be dis-

played separately from the element of which it is a part, suchas illustrations, diagrams, photos or code listings (cf. float inLATEX). It may contain a element providing acaption for the content.

10.10 div

The element is the element of last resort and shouldonly be used to distinguish content where there is no altern-ative element available. It is normally rendered as a blockbox and cannot be placed within a element which isconsidered as an inline box.

19


20/67

11 Text level semantics

11.1 a

The element creates a placeholder for a hyperlink whichis activated by href= which may have the attributes

target= which activates a browsing context ping= contains the URLs of resources that are in-

terested in knowing if the user follows the hyperlink;authors are encouraged to use this rather than HTTPredirects or Javascript because it can be disabled by theuser

rel= make take the values:

alternate links to an alternate representation ofthe current document; if the type= attributeis not the same as the type= attribute of the

parent element, this will be an alternative formatfor the content of the current document.

author links to a document describing the currentsections author

bookmark creates a hyperlink to the nearest an-cestor element or section in the absenceof an element

external creates a hyperlink to an external site

help creates a hyperlink to context sensitive helpfor the parent element

license creates a hyperlink to a licence document;the author must make clear the element to whichit applies; the legacy value copyright is treated in

the same way

next creates a hyperlink to the next document inthe series to which the current document belongs

nofollow the link is not endorsed by the au-

thor/publisher of the current document

noreferrer requires the user agent not to send anHTTP Referer [sic] header with the link

prefetch mandates pre-emptive caching

prev creates a hyperlink to the previous documentin the series to which the current document be-longs; the legacy value previous is treated in thesame way

search creates a hyperlink to a resource which canbe used to search the current document

sidebar specifies that the link is intended to beshown in the browsers sidebar or other secondarybrowsing context

tag creates a hyperlink to an address which givesa tag describing the current document

media= defines the media for which the linked con-tent is designed; the default value is all

hreflang= defines the language of the linked con-tent

type= gives the MIME type of the linked contentIt may contain another element as long as that element con-tains no interactive content. See also section 16.5 on page 44.

20


21/67

11.2 em

The element emphasises the content it encloses; it shouldnot be used for italics or to indicate importance for which and respectively are more appropriate.

11.3 strong

The element marks the content it encloses as im-portant.

11.4 small

The element indicates side content such as disclaim-ers, caveats, legal restrictions, or copyrights which are not

part of the main content. It might fall within an element. It should not be used for styling extended sectionsof text.

11.5 s

The element indicates content that has been supersededby new content, for example, a reduction in a price. It shouldnot be used for edited text for which should be used.

11.6 cite

The element contains the title only of a work, i.e.,within a citation, it should only enclose the title of the work,not the whole citation. Where a element is inside a element, its content must be a URL.

11.7 q

The element contains a direct quotation from a sourcewhich may be specified as a URL in a element.

elements replace the quotation marks round a direct quota-tion and may be nested. Quotation marks may be used toenclose content which is not a direct quotation.

11.8 dfn

The element holds the term which is being defined in a

, or element. That may be in a title= attribute but, if it contains an element, that must contain a title= attribute giving the term being definedinstead, for example,

GDO

21


22/67

11.9 abbr

The element contains an abbreviation and may con-tain its expansion as a title= attribute. It is not intendedto hold all abbreviations but those which might need to beclarified or annotated.

11.10 time

The element normally holds a machine-readabletimestamp of the form yyyy-mm-dd which may be extendedwith Thh:mm:ss-hh:mm where T introduces the time and - theoffset from UTC, either as the content of the element or inthe form of the attribute:

datatime= in which case the element may havehuman-readable text content, for example,

October 22, 2009

It may also have the attribute:

pubdate a Boolean attribute indicating that the time isthe time of publication of the nearest ancestor element.

Alternatively, it may be used to hold date and time contentwhich is to be styled by a styling agent.

11.11 code

The element contains computer code; its language canbe specified with the class= attribute, where the attrib-ute begins language-.

11.12 var

The element holds a variable; it is intended for usein prose contexts; MathML should be used for mathematicalexpressions.

11.13 samp

The element represents the output from a piece ofcomputer code.

11.14 kbd

The element contains keyboard input which may con-tain further elements representing keys to be pressed;when inside a element, it represents input echoed bythe system; when it encloses a element, the element represents menu choices.

11.15 sub and sup

The and elements contain content in sub- or su-

perscript position; they are intended for use in prose contextsand may be used with the element but MathML shouldbe used for mathematical expressions.

22


23/67

11.16 i

The element is used to differentiate content which is dif-ferent from the main content, for example, words in a foreignlanguage or stage directions in a play; it may or may notbe rendered as italic and should not be used where the element is more appropriate; it may take the attributes:

class= to indicate the grounds for the differenti-ation

lang= where used to differentiate a language

11.17 b

The element is used to differentiate stylistically contentwhich is not different from the main content, for example,the various speakers in a conversation; it may or may not berendered as bold; it may take the attribute:

class= to indicate the grounds for the differenti-ation

Otherwise, it should generally be used as a last resort wherethe use of , , or is inappro-priate.

11.18 mark

The element indicates content from a third partysource which was not highlighted in any other way in the

original but has been highlighted by the author of the cur-rent content. Use with the class= attribute forsyntax highlighting.

11.19 ruby, rt and rp

The , and elements are used to annotatecertain east Asian languages; see Hickson (2011, pp. 193194).

11.20 bdi and bdoThe and elements contain bidirectional content;see Hickson (2011, pp. 194196).

11.21 span

The element is considered as an inline box and holdscontent which is required to be marked with one of the at-tributes:

class=

dir= lang=

It should be used with the class= attribute for syntaxhighlighting. It cannot contain a element.

11.22 br

The
element represents a line break. It should only beused where other elements would not automatically create aline break anyway.

11.23 wbr

The element represents an optional line break wherethe normal algorithms for line breaks would not work.

23


24/67

12 Editing elements

12.1 ins and del

The and elements contain material that has been added or deleted since the original document was created;they may take the attributes:

cite= containing a URL pointing to a document explaining the change datetime= to indicate when the insertion or deletion took place

The content they enclose should not cross paragraph boundaries. Where the content of elements is to be modified, a element should contain all the content of the element to be deleted and a new element whose content iscontained within an element should be inserted after it.

13 Embedded content

13.1 img4

The element is a container for an image; it must have a src= attribute and should have an alt= attributeproviding a textual alternative to the image; this should not be the equivalent of a title= attribute, which may be usedto provide supplementary information, but something which directly replaces the image. The alt= attribute may beempty if it is adjacent to text which provides the same information.

The source image must be a single page but may be animated; may take the following additional attributes:

usemap where the image has an associated image map

ismap a Boolean attribute indicating that there is an ancestor element which provides access to aserver side image map

width=

height=

4See page 50 for the use of images in the Canvas element.

24


25/67

An element should be inside a element along with a element where it is the content ratherthan just an illustration to the content, for example,

My home town is .

If the image is not specific to any of the content of the page but purely decorative, it should be included in the CSS.

Note: Placing SVG images in an element is discouraged because it offers no fallback image (Bah, 2011, p. 412); usethe element instead.

13.2 iframe

The element represents a nested browsing contextand must be an application, document or image but is primar-ily intended for text; it should have a srcdoc= attributegiving the content of the page which the nested browsing con-text is to contain and a src= attribute giving the addressof the page; this also acts as a fallback for browsers which do

not support the srcdoc= attribute. It may also have theattributes:

name=

sandbox a Boolean attribute which may take any of thespace separated attributes

allow-same-origin

allow-top-navigation

allow-forms

allow-scripts

each of which change aspects of the sandboxing;allowing both the attributes allow-scripts andallow-same-origin to be set negates the sandbox. The

MIME type should be text/html-sandboxed; notehowever that potentially hostile files with this MIMEtype can still be served from the server hosting the element.

seamless a Boolean attribute which allows browsing ofthe element to be seamless with browsing the rest of thepage content; this can be updated dynamically

width=

height=

Note: Placing SVG images in an element is dis-couraged because it offers no fallback (Bah, 2011, p. 411-12);use the element instead.

13.3 embed

The element offers an integration point for an ex-

ternal, non-HTML element; it must be an application, doc-ument or image. It should normally have a src= attrib-ute and a type= attribute and may have width= and

25


26/67

height= attributes; the src= attribute may have at-tributes which are passed as parameters to a plugin.

Note: Placing SVG images in an element is dis-couraged because it offers no fallback (Bah, 2011, p. 411);use the element instead.

13.4 object

The element represents an external resource, whichmay be treated as an image, as a nested browsing context, oras an external resource to be processed by a plugin; it mustbe an application, document or image. It should have one orboth of the attributes:

data= specifying the source [= scr= ]

type= specifying the MIME type of the resource

and may have the attributes:

name= which should be a valid browsing context

usemap a Boolean attribute which, when the element represents an image, indicates that an imagemap exists

form= which associates the object with the id= attribute of its form owner

width=

height=

The element should normally be used to hold SVGimages because, if the browser cannot render the SVG image,it will normally render any other content between and (Bah, 2011, pp. 410f), for example,

13.5 param

The element is always a child element of an

element and defines the parameters to be passed to a plugininvoked by the element; each element musthave a name= and a value= attribute.

13.6 video

The element is a media element used for playingvideos; it must be an application and may take the followingattributes:

src= the address of the media resource

audio= if specified, can only take the attributemuted

26


27/67

autoplay a Boolean attribute which instructs thebrowser to start playing as soon as it can do so without

needing to stop; n.b. it should be preferred to a scriptso that the user can block autoplay with a script suchas (Pilgrim, 2010, p. 111):

var arVideos = document.getElementsByTagName(video);

for (var i = arVideos.length - 1; i >= 0; i--) {

var elmVideo = arVideos[i]; elmVideo.autoplay = false;

}

. controls a Boolean attribute which, when set, indic-

ates that the browser should provide the necessary con-trols

loop a Boolean attribute which indicates that the me-

dia element should seek the start of the media resourcewhen it reaches the end

poster= points to an alternative image, normally asingle frame from the video, to be displayed if the videocannot be played

preload= is overridden if the autoplay attribute isset; it may take the attributes:

none

metadata loads the metadata but not the content

auto the default; loads the source

width=

height=

13.6.1 Modernizr script to test for video formats

if (Modernizr.video) {

if (Modernizr.video.webm){

}else if (Modernizr.video.ogg) {

27


28/67

}else if (Modernizr.video.h264){

}

}

13.6.2 Example script for falling back on flowplayer

Download video as MP4, WebM, or

Ogg.

var v = document.getElementById("movie");

v.onclick = function() {

if (v.paused) {

v.play();

} else {

v.pause();

28


29/67

}

};

13.6.3 Scripts for encoding video

## Theora/Vorbis/Ogg

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

13.7 audio

The element is a media element used for playingsound; it must be an application and may take the followingattributes:


autoplay a Boolean attribute which instructs thebrowser to start playing as soon as it can do so withoutneeded to stop; n.b. it should be preferred to a scriptso that the user can block autoplay if desired

controls a Boolean attribute that, when set, indicates

that the browser should provide the necessary controls

loop a Boolean attribute which indicates that the me-dia element should seek the start of the media resourcewhen it reaches the end

preload= is overridden if the autoplay attribute isset; it may take the attributes:

none

metadata loads the metadata but not the content

auto the default; loads the source

29


30/67

13.8 source

The element is a child of a media element intended to specify one of a number of alternative media sources for theelement to enable the browser to determine whether it can play it and only download it if it can; it takes the attributes


type= which takes the attribute

codecs=

media= which, if unspecified, is set to all

For example5,

where

can be

mp4

webm

ogg

can be

avc1.42E01E

vp8

theora

can be

mp4a.40.2

vorbis

Further examples are given in appendix C on page 62.

Additionally, add the following lines to httpd.conf if usingan Apache server, because not all browsers interpret the videoMIME types correctly:

AddType video/ogg .ogv

AddType video/mp4 .mp4

AddType video/webm .webm

5A bug in some iPads means that they only see the first entry; so the MP4 source should always come first.

30


31/67

13.9 track

The element is a child of a media element intendedto specify external timed text tracks; it takes the attributes:

kind= which may have the attributes

subtitles the default

captions

descriptions for use in the absence of vision, forexample, no screen or a person is blind

chapters for use in navigating

metadata for use from a script


srclang= the language of the track

label= a user readable title for the track

default track to be used in the absence of any otherpreference

13.10 canvas

The element provides a resolution dependent bit-map canvas to enable scripts to render visual images on thefly (section 19.2 on page 48); it should not be used to renderimages for which there is a more suitable element available.It always has two attributes:

width= which defaults to 300

height= which defaults to 150

but should normally also be given the attribute:

id= which enables you to access the canvaswith var _canvas and to manipulate it with_context.

Note: a script may render a bitmap at a different resolutionwithin a canvas.

13.11 map

The element contains elements; it has one at-tribute: name=

13.12 area

The element creates a hyperlink either

1. directly using the attributes:

href=

alt= a textual alternative to the image

in which case the following attributes may be used:

target= which activates a browsing context

ping= contains the URLs of resources that areinterested in knowing if the user follows the hy-perlink; authors are encouraged to use this ratherthan HTTP redirects or Javascript because it canbe disabled by the user

rel= make take the values:

31


32/67

alternate links to an alternate representationof the current document; if the type= at-tribute is not the same as the type= at-tribute of the parent element, this will be analternative format for the content of the cur-rent document

author links to a document describing the cur-rent sections author

bookmark creates a hyperlink to the nearestancestor element or section in theabsence of an element

external creates a hyperlink to an externalsite

help creates a hyperlink to context sensitivehelp for the parent element

license creates a hyperlink to a licence doc-ument; the author must make clear the ele-ment to which it applies; the legacy valuecopyright is treated in the same way

next creates a hyperlink is to the next docu-ment in the series to which the current docu-ment belongs

nofollow the link is not endorsed by the au-thor/publisher of the current document

noreferrer requires the user agent not tosend an HTTP Referer [sic] header with thelink

prefetch mandates pre-emptive caching prev creates a hyperlink to the previous doc-

ument in the series to which the current doc-

ument belongs; the legacy value previous istreated in the same way

search creates a hyperlink to a resource whichcan be used to search the current document

sidebar specifies that the link is intended tobe shown in the browsers sidebar or other sec-

ondary browsing context tag creates a hyperlink to an address which

gives a tag describing the current document

media= defines the media for which the linkedcontent is designed; the default value is all

hreflang= defines the language of the linkedcontent

type= gives the MIME type of the linked con-tent

or

2. by pointing to an area on an image map; it may thenhave the following attributes:

coords= mandatory with shape

shape= may have one of the attributes:

circle where coords=(x,y,r) represents thelocation of the centre in Cartesian coordinatesand the radius of the circle

default (= rect)

poly where coords= contains a minimum

of three paired Cartesian coordinates rect where coords= contains two paired

Cartesian coordinates

32


33/67

14 Tabular data

14.1 table

The element represents data in more than one di-mension; it should not be used for layout purposes for whichCSS should be used. The use of the element isdeprecated.

14.2 caption

The element should be used within a element which is not part of a element, when the element should be used, to give the table atitle.

14.3 colgroup

The element either contains one or more elements or has the span= attribute; it must be within a element, after any element and beforeany , , , or elements.

14.4 col

The element represents one or more columns in atable and may have a span= attribute; it must be within a element which does not have the span= attribute.

14.5 tbody

The element represents a block of rows, not overlap-ping any other block of rows, within a element, afterany , or elements, but onlyif there are no elements in the element.

14.6 thead

The element represents a block of rows, not overlap-ping any other block of rows, consisting of the column headersfollowing any or element and beforeany , or elements.

14.7 tfoot

The element represents a block of rows, not over-lapping any other block of rows, consisting of the columnsummaries following any , or element and before or after any or elements.

14.8 tr

The element represents a row of cells in a ,

or element or in a element follow-ing any , or element if thereis no element.

33


34/67

14.9 td

The element represents a data cell in a element; itmay take the attributes:

colspan= whose value should not cause any overlap

rowspan= whose value should not cause any overlap

headers

A data cell may overlap column groups but not row groups.

14.10 th

The element represents the header cells in a ele-ment; it may take the attributes:

colspan= whose value should not cause any overlap

rowspan= whose value should not cause any overlap

headers

scope= which may take one of the attributes:

row applies to this row, i.e. may be sub-heading

within a group of rows col applies to this column, i.e. may be sub-

heading within a group of columns

rowgroup

colgroup

auto based on context

A header cell may overlap column groups but not row groups.

15 Forms

The element offers a way of obtaining user data; eachdata item is normally collected by an element de-scribed by and enclosed in a element, both containedin a

element.

Form elements may take the following attributes, where ap-propriate:

autofocus a Boolean attribute which, when set, enablesthe user to begin typing immediately in the selected ele-ment; see Autofocus on page 39

dirname= records the direction in which the user

entered the text and appends that to the input in theform value=direction, for example, if the value ofdirname= was entry, entry=ltr

maxlength= sets the maximum code-point length of thetext when it is submitted

name= a name for the element which, for the element, must contain a unique name for the form; butsee Hickson (2011, p. 410) for special uses of this at-tribute

required a Boolean attribute which, when set, requires

34


35/67

the user to enter a response.

15.1 form

The element contains a collection of form associatedelements; it may take the following attributes:

accept-charset= specifies the encoding of submit-ted material

action= specifies a URL

autocomplete= may take the values on (the de-fault) or off

enctype= make take the attributes

application/x-www-form-urlencoded (the de-fault)

multipart/form-data

text/plain

and the corresponding state.

method= may take the attributes:

get corresponding to HTTP GET (the default)

post corresponding to HTTP POST

name= a unique name for the form

novalidate a Boolean attribute which, if set, indicatesthat the form is not to be validated; used to enable auser to save a partially completed form

target= specifies a browsing context

A element cannot appear inside any phrasing element(see appendix A.5 on page 58).

15.2 fieldset

The element contains a group of form associatedelements grouped under a name; it takes the attributes:

form= explicitly associates the elementwith the id= attribute of its form owner

name= a name for the group of form associated ele-ments

15.3 legend

The element contains a caption for a element.

Where a has an assigned access key and is a childof a which does not have a element oranother element but defines a command, it is a

command.

15.4 label

The element contains an input method and a captionfor it; it may take the attributes:

for= specifies the value of the id= of the inputmethod with which the element is associated;in its absence, it becomes the element to thefirst available input method

form= explicitly associates the elementwith the id= attribute of its form

35


36/67

Where a element has an assigned access key and alabelled control which defines a command, it defines a com-mand.

15.5 input

The element is an input method which may have abutton, combobox, slider, spinbox or textbox role dependingon its attributes which may include:

accept= where type=file contains a hint as toacceptable filetypes either as a MIME type or with oneof the forms audio/*, video/* or image/*

alt= where type= image, provides a textual in-put for those who cannot access the image

autocomplete= may be on, off or missing inwhich case it inherits the default state of the

element which, if not otherwise specified, is on autofocus a Boolean attribute which, when set, enables

the user to begin typing immediately in the selected ele-ment, for example,

See also Autofocus on page 39.

checked when type=checkbox

contextmenu= specifies the id= attribute of a element with the context attribute

dirname= when type=search; see Forms onpage 34


formaction= for use where type=image ortype=submit; specifies a URL; in its absence, theURL specified in the action attribute of the element is used

formenctype= for use where type=image ortype=submit; may take the attributes

application/x-www-form-urlencoded

multipart/form-data

text/plain

and the corresponding state; in its absence, the encod-ing specified in the enctype attribute of the element is used

formmethod= for use where type=image or

type=submit; may take the attributes:



In its absence, the encoding specified in the method at-tribute of the element is used

formnovalidate a Boolean attribute for use wheretype=image or type=submit which, if set, indic-ates that the element is not to be validated; disabled ifnovalidate is set in the element; used to enablea user to save a partially completed form

formtarget= for use where type=image ortype=submit; specifies a browsing context; in its ab-

36


37/67

sence, the target attribute of the element isused

height

list= points to a datalist in the same document;with text input except when type=password

max= for use with dates, times, numbers and ranges;with dates, times must be a string valid for the type= attribute; with ranges the default is 100

maxlength for us with text including passwords; spe-cifies the code point length of the entry

min= for use with dates, times, numbers and ranges;with dates, times must be a string valid for the type= attribute; with ranges, the default is 0; it also definesthe step base

multiple a Boolean attribute for use wheretype=email, type=file or type=list; comma

separated email addresses, filenames or selections froma element may be submitted

name= a name for the element

pattern= for regular expressions in text includingpasswords; there must b e a title= attribute spe-cifying for the user the available patterns

placeholder= contains the text that will appear ina textbox where value= is empty or absent; for usewith text including passwords, for example,

N.B. it is not an alternative to the element.

readonly a Boolean attribute for use with text includ-ing passwords and dates, times

required a Boolean attribute for use with text includ-ing passwords and dates, times

size= for use with text including passwords; the default

is 20 characters src=

step= for use with dates, times, numbers and ranges;the default datetime and time steps, always expressedin seconds, are 60 seconds and the default date, week,month and number steps are 1; a number step must bean integer unless the value of min= is not an integer;where step=any there is no step value

title= for use only with the pattern= attributeto specify for the user the available patterns

type= which may take the attributes: hidden for input not to be provided by the user

password echoes dots instead of characters as theuser types

search generates a textbox for one line of plaintext with an integral clear contents button

text one line of plain text (the default and thefallback for browsers that do not recognise one ormore of the other types); it can normally be omit-ted

email n.b. it is worth converting all email inputelements to this type because it prompts some mo-bile phone browsers to offer a restricted keyboard

37


38/67

containing alphnumerics, @ and . only; those thatdo not recognise it will default to text anyway

tel intended for telephone numbers

url n.b. it is worth converting all url input ele-ments to this type because it prompts some mobilephone browsers to offer a restricted keyboard con-

taining alphnumerics, / and . only; those that donot recognise it will default to text anyway

date generates a date picker

month generates a month picker

week generates a week picker

time generates a time picker

datetime generates a date/time picker

datetime-local generates a date/time pickerbased on local time

button requires a value= attribute as a label;it makes the element a command

checkbox has a Boolean attribute; it makes the element a command of type checkbox

color= an sRGB colour in 8 bit red, green andblue; without a value, it is intended to generate acolour picker but this is as yet unsupported

file opens an open file dialogue in order to up-load a file

image needs a src= and an alt= attribute

providing a textual input for those who cannot ac-cess the image; it may also have dimension attrib-utes; it makes the element a command

number intended for the use of floating point num-bers in spinboxes; it is worth converting all num-ber input elements to this type because it promptssome, for example, mobile phone, browsers to of-fer a restricted keyboard containing numerals andsymbols only or a spinbox; those that do not re-

cognise it will default to text anyway and displayany value= attribute that has been set

range intended for sliders; if a browser does notrender it as a slider, it will default to text any-way; if any of the values are unspecified, it takesthe default values for the min=, max= and value=attributes.

radio can be grouped with other inputs; makesthe element a command of type radio

reset makes the element a command re-setting the entire form

submit makes the element a commandinitiating submission

value= the text that accompanies the input method;the default where type=range is half the differ-ence between the min= and the max= values; wheretype=submit its value should be consistent with this

width

See also section 16.5 on page 44.

38


39/67

15.5.1 Autofocus

When set, the autofocus attribute enables the user to begininteracting immediately with the selected element where it is

an element with the href= attribute

a element with the href= attribute

a element that is not disabled an element whose type= attribute is not

hidden or disabled

a element that is not disabled



an element with a draggable attribute set, if that wouldenable the user agent to allow the user to begin a dragoperations for those elements without the use of a point-ing device

an editing host

a shape that is generated for an element

part of a elements rendering

15.5.2 A script for autofocus with fallback

$(document).bind(autofocus_ready, function() {

if (!("autofocus" in document.createElement("input"))) {$("#q").focus();

}

});

$(document).trigger(autofocus_ready);

39


40/67

15.5.3 Testing for input types

if (!Modernizr.inputtypes.number) {

// no native support for type=number fields

// maybe try Dojo or some other JavaScript framework

}

15.6 button

The element always defines a command; it maytake the following attributes:


formaction= for use only where type=submit;specifies a URL; in its absence, the URL specified inthe action attribute of the element is used; foruse only where type=submit

formenctype= for use only where type=submit;make take the attributes

application/x-www-form-urlencoded

multipart/form-data

text/plain

and the corresponding state; in its absence, the encod-

ing specified in the enctype attribute of the element is used; for use only where type=submit

formmethod= for use only where type=submit;may take the attributes:



In its absence, the encoding specified in the method at-tribute of the element is used; for use only wheretype=submit

formnovalidate for use only where type=submit; aBoolean attribute which, if set, indicates that the ele-ment is not to be validated; disabled if novalidateis set in the element; for use only wheretype=submit; used to enable a user to save a par-tially completed form

formtarget= for use only where type=submit;specifies a browsing context; in its absence, the target

attribute of the element is used; for use onlywhere type=submit

40


41/67

type= make take the attributes:

submit submits the form (the default attribute)

reset resets the form

button does nothing but may be associated with an action, for example,

Show hint

value= provides the elements label

See also section 16.5 on page 44.

15.7 select

The element is an input method which controls theselection of options from a listbox; it may have the attributes:


multiple a Boolean attribute which permits the selec-tion of multiple options; when it is omitted, a singleoption must be selected

name= a name for the group of form associated ele-ments

required a Boolean attribute indicating that the usermust select an option

size limits the number of options to show the user; thedefault is 1 unless multiple is set when it is 4

Where the element only contains ele-ments and the multiple attribute is not set but the requiredoption is, the first element will be designated as theplaceholder option.

15.8 datalist

The element has a list box role; it contains a listof options; it is the child of an element with the listattribute.

15.9 optgroup

The element contains a group of ele-ments; it must have the label= attribute.

41


42/67

15.10 option

The element may be a child of a , an or a element; it must have the at-tribute:

value=

and may have the attributes: label=

selected

Where it is an element in a element, it is a com-mand of type radio if the element has no multipleattribute and type checkbox if it does. See also section 16.5on page 44.

15.11 textarea

The element must be textbox; it may have theattributes:

cols= specifies the character width of the text area (thedefault is 20)

dirname= see Forms on page 34

form= explicitly associates the elementwith the id= attribute of its form

placeholder= if present, contains the text that willappear in the textbox; it should not be used as an al-ternative to a label= attribute

readonly

required

rows= specifies the character height of the text area(the default is 2)

wrap= takes the values soft (the default), in whichcase no newline characters are added when the text issubmitted, or hard in which case the colls= attributemust be specified

15.12 keygen

The element generates a key pair; the private keyis stored in the local keystore and the public key is sent tothe server; it may take the attributes:

challenge


keytype= may take one value rsa (the default)

name= a name for the key

15.13 output

The element contains the result of a calculation; itmay take the attributes:

for= specifies the value of the id= of the elementwith which the element is associated

form= explicitly associates the element

with the id= attribute of its form owner, if any

name= a name for the element

42


43/67

15.14 progress

The element has a progress bar role; it may havethe attributes:

value= a floating point number value representing theprogress made

max= a floating point number value representing thecompletion of the task

form= explicitly associates the elementwith the id= attribute of its form owner, if any

The progress bar will be created using a script or other em-bedded code. The labels= attribute can also be used toprovide a list of the elements labels.

15.15 meter

The element contains a scalar measurement within

a known range; it must have the attribute: value= a floating point number value representing the

measurement made

and it may have the attributes:

min= the lower bound of the measurement (the defaultis 0)

max= the upper bound of the measurement (the defaultis 1)

low= specifies the low boundary of the range (the de-

fault is min)

high= specifies the high boundary of the range (the de-fault is max)

optimum= specifies the optimum point on the range (thedefault is the midpoint)

form= explicitly associates the elementwith the id= attribute of its form owner, if any

title= to specify the units

The labels= attribute can also be used to provide a list

of the elements labels.N.B. the element should not be used to record pro-gress for which the element is available.

16 Interactive elements

16.1 details

The element enables the user to obtain further in-formation; it normally contains a element actingas a legend for the details. It has an open attribute if the

details are to be shown to the user. It is not appropriate formaterial which should go in footnotes.

43


44/67

16.2 summary

The element contains a summary, caption or le-gend for a element.

16.3 menu

The element contains a list of commands; it may havethe attributes:

type= which may take the values:

context in which case there must be an id= attribute

toolbar provides a toolbar containing a list act-ive commands which the user can use immediately;

these may be elements containing or elements or, within a form, form in-put elements

list provides a menu containing or elements containing the commands (thedefault)

label= a heading for the menu

A element may contain an element that defines acommand, a element, and element whose

value= attribute is an empty string, a element, a element, a element, a element oran element.

16.4 command

The element contains a command that the usercan invoke; it must be a child of a element and itmust have the following attribute:

label= which displays the name of the command tothe user

and may have the attributes:

type= which may have the attributes

command where the command initiates a normal ac-tion, such as , , (the default)

checkbox where the command may be toggled

radio where one command may be chosen from alist of options

icon= gives the link to an icon

checked a Boolean attribute only to be used wheretype=checkbox or type=radio to indicate that acommand has already been selected

radiogroup= specifies the group of commands thatwill be invoked where type=radio

title= provides a hint as to the purpose of the com-mand

16.5 A note about commands

An element defines a command if it is:

an element with an href= attribute that isneither disabled nor checked

44


45/67

a element that is neither disabled norchecked

an element whose type= attribute issubmit, reset, image, button, radio or checkbox andwhere the other attributes relevant to each type are con-sistent with that type

an element which is within a element and whose type=radio if the attribute

multiple is not set and type=checkbox if it is

a element

a element which defines a command or a element, where there is no other or element within the element,whose accesskey= attribute is not empty and whichis not checked

any other element whose accesskey= attribute isnot empty and which is neither disabled nor checked

17 Comments

A comment may be inserted with

Note that IE will parse a comment a bug of which Remy Sharps HTML enabling script to enable IE to style new semanticelements takes advantage.

18 Notes on attributes

1. The following global attributes may be specified on anyHTML element

accesskey= specifies one or more space separ-ated keyboard shortcuts which enable the user toselect an option without using a pointing device

class= may contain multiple values separatedby spaces; it is intended to allow people to ex-tend elements by creating their own which will

still be handled by browsers that do not recogniseclass=

45
http://remysharp.com/2009/01/07/html5-enabling-script/http://remysharp.com/2009/01/07/html5-enabling-script/


46/67

contenteditable= specifies that the content iseditable; it takes the attributes true (the defaultunless the next parent element with the attributeset has the attribute false) or false

contextmenu= specifies the id= attribute ofa element with the context attribute

dir= takes the values ltr left to right text

rtl right to left text

auto infers the direction from the first charac-ter of the text

It should be used explicitly rather than in CSS.

draggable= specifies that the content of theelement is draggable; it takes the attributes true,false or auto (the default)

dropzone= specifies how the draggable contentof an element may be dropped; it takes one or moreof the space separated attributes copy, move orlink

hidden a Boolean attribute specifying that thecontent or input is not to be provided for or bythe user; other elements should not point to anelement with the hidden attribute set

id= sets a unique identifier (ensure it isunique!); it must not contain any space characters

itemid see Microdata on page 50

itemprop see Microdata on page 50

itemref see Microdata on page 50

itemscope see Microdata on page 50

itemtype see Microdata on page 50

lang= if this is not specified, the lang attrib-ute of the nearest parent element that has one isassumed to be the language; if no language is spe-cified anywhere in the page, the browser should

fallback on information derived from HTTP head-ers.

spellcheck= specifies that the content of an or element or the content be-ing handled by an editing host will be checked forspelling and grammar; it takes the attributes true(the default unless the next parent element withthe attribute set has the attribute false) or false;n.b. a user may override the setting

style= takes arguments in CSS format for ap-plication to the element

title= other than in an , or element, where it normally carries ad-ditional semantics, contains a hint, comment orfootnote; if its value is empty and the element isnot a element, the title attribute of thenearest parent element that has one is assumed tobe the title

2. All Boolean attributes are true; to indicate a false state,omit the attribute.

3. Some attributes have an invalid value default and a

missing value default which may not be the same.

4. Other special attributes:

46


47/67

data-*= is ignored by browsers; it is intendedfor use only within the page that created the at-tribute, for example, to enable users to search forcontent based on such attributes.

disabled a Boolean attribute indicating that theelement is not enabled at present but might be in

another circumstance Any attribute beginning with x- is guaranteed

never to be added to the formal HTML syntax andcan therefore be used experimentally.

47


48/67

Part III

HTML5 elements

19 Notes on some HTML5 elements

19.1 Application cache

The cache manifest always starts with

CACHE MANIFEST

and may contain up to three sections, FALLBACK, NETWORK and CACHE, for example,

CACHE MANIFEST

FALLBACK:

/ /offline.html

NETWORK:

*CACHE:

/example.css

/example.js

/example.jpg

In this example, the first / in the FALLBACK section is a wildcard for any page the user had already cached; the second entryis an alternative page if that fails. The NETWORK section may contain a list of files from the site which should not be cachedbut * says that anything may be downloaded. The CACHE section contains the files that must be downloaded.

19.2 Canvas scripting

To enable a script to access the element, add the id= attribute, for example,

48


49/67

creates the variable a_canvas which can be located in the DOM with

var a_canvas = document.getElementById("a");

To reset a element, simply declare its width or height, for example,

a_canvas.width= ;

or

a_canvas.width = a_canvas.width;

but note that this does not reset the origin-clean flag; see Hickson (2011, p. 315).

19.2.1 Context

Every canvas can have an associated primary context6 called using, for example:

var a_context = a_canvas.getContext("2d");

To give the context an attribute, add the attribute to the context, for example,

context.fillRect(x, y, width, height);

See appendix D on page 64 for a list of context attributes.

19.2.2 Gradients

A gradient is a variable associated with a particular context, for example,

var my_gradient = context.createLinearGradient(0, 0, 300, 0);

See appendix D on page 64 for the gradient attributes.

6Other types of context may be implemented in due course.

49


50/67

19.2.3 Images

Create an image variable associated with a particular context, for example,

var image = new Image();

image.src = "images/image.png";

Call a function with, for example,

image.onload = function{} {

context.drawImage(image, 0, 0);

};

19.3 Microdata

Microdata annotates the DOM with scoped name/value pairs from custom vocabularies (Pilgrim, 2010, p. 164).

The values are existing values within the HTML5 code; the properties (names) may be ad hoc properties defined only in thecurrent page or properties defined in publicly available machine readable vocabularies such as http://data-vocabulary.org.

In database terms, microdata allows you to associate a value within the website with a field in a database table.

Currently only some search engines use the publicly available vocabularies, the advantage to the user being that the annota-tions enable the search engine to extract the most relevant values from the site for display in a response to a query.

You can only associate an HTML element (and its child elements) with one vocabulary/database table or with a childvocabulary/table of that table; for example, the fields address and geo in http://data-vocabulary.org/Organization(table 3) have child vocabularies/tables. So care needs to be taken in selecting the elements within which to make associations.

Each name/value pair is called an item and every element to be annotated takes the attribute:

itemscope

where the vocabulary is confined to a single page. To declare a publicly available vocabulary, add the attribute itemtype=

which takes a URL pointing to a vocabulary as its value, for example,itemscope itemtype=http:/data-vocabulary.org/Person

50


51/67

Thereafter individual values within an element can be associated with a property/field by adding the attribute:

itemprop=

where itemprop may take an ad hoc property or any of the properties listed in a publicly available table such as those intables 2 to 6.7 The vCard and vEvent vocabularies are hosted at http://microformats.org/profile/hcard and http://

microformats.org/profile/hcalendar#vevent respectively. Details of the properties and descriptions in their vocabulariesare in Hickson (2011, pp. 468476 and 481485); the former is also available from the Microformats Wiki. The vEvent

vocabulary is a child vocabulary of the hcalendar vocabulary.

For example, in

John was born on May 10th 2009.

the ad hoc property birthday takes the value datetime="2009-05-10" whereas in

Linus Torvalds

the property defined as name in http:/data-vocabulary.org/Person takes the value Linus Torvalds.

Where the value of an itemprop property is only part of a string or two properties are combined in a single string, forexample, Chief Software Engineer at the Linux Foundation, use to distinguish them, for example,

Chief Software Engineer at the

Linux Foundation

In order to create sub-properties of a declared property, a further itemscope declaration may be contained within anitemprop assignment; for example,

7If using the Review table (5), note that the Rating table mentioned in Pilgrim (2010, p. 188) no longer appears to be available.

51
http://%20http//microformats.org/profile/hcardhttp://%20http//microformats.org/profile/hcalendar#veventhttp://%20http//microformats.org/profile/hcalendar#veventhttp://microformats.org/wiki/hCardhttp://microformats.org/wiki/hCardhttp://%20http//microformats.org/profile/hcalendar#veventhttp://%20http//microformats.org/profile/hcalendar#veventhttp://%20http//microformats.org/profile/hcard


52/67

Game: Rugby

Code: Union

(15 players)

To take advantage of the sub-properties in the address field in table 2, it is necessary to change the table being used and tomake use of , for example,

19/25 Sunbridge Road

Bradford

BD1 2AY

The same applies to the sub-properties of geo; for example, to make the coordinates of Bradford available, one might putthem in a dummy element:

content= 53.8000

content= -1.7521

To associate ad hoc name/value pairs, an itemscope declaration may be given an id= attribute and an itemref= attribute containing the values of the id= attributes of elements containing itemprop associations, for example,

Game: Rugby

Code: Union

Team size: 15 players

52


53/67

Note that multiple properties may be associated with a single value, for example,

orange

as well as multiple values with a single property.

It is also possible to use global identifiers declared within a vocabulary/table declared with itemtype= by adding theitemid= attribute which takes a global identifier such as an ISBN.

Note that microdata in no way changes the content of a document.

19.3.1 Microdata attributes

Microdata must have the attribute:

itemscope a Boolean attribute which declares an item

and may have the attributes: itemtype= whose value is a URL pointing to a

vocabulary, in which case it may have the attribute

itemid= whose value is a global identifierwithin the vocabulary

itemref= whose, space separated, values are id= attributes of elements

itemprop= associating a property in a vocabularywith a value in an element; if the element is:

a element, this is the value of the its at-tribute

an , , , ,, or element, this isthe value of the URL pointing to the resource

an , or element, this is the valueof the href= attribute

an element, this is the value of thedata= attribute

a element, this is the value of thedatetime= attribute

8See page 50 for the use of images in the Canvas element.

53


54/67

Table 2: http://data-vocabulary.org/Person

Property Description

name (fn) Name

nickname Nickname

photo An image link

title The persons title (for example, Financial Manager)role The persons role (for example, Accountant)

url Link to a web page, such as the persons home page

affiliation (org) The name of an organization with which the person is associated (for example, an employer). If fnand org have the exact same value, Google will interpret the information as referring to a business ororganization, not a person.

friend Identifies a social relationship between the person described and another person.

contact Identifies a social relationship between the person described and another person.

acquaintance Identifies a social relationship between the person described and another person.

address (adr) The location of the person. Can have the subproperties street-address, locality, region,postal-code, and country-name.

Table 3: http://data-vocabulary.org/Organization


name (fn/org) The name of the business. If you use microformats, you should use both fn and org, and ensure thatthese have the same value.

url Link to the organization home page.

address (adr) The location of the business. Can contain the subproperties street-address, locality, region,postal-code, and country-name.

tel The telephone number of the business or organization.

geo Specifies the geographical coordinates of the location. Includes two elements: latitude andlongitude. Optional.

54


55/67

Table 4: http://data-vocabulary.org/Event


summary Required. The name of the event.

url Link to the event details page.

location The location or venue of the event. Can optionally be represent

some notes on html5

Documents