Some notes on HTML

John R Hudson∗

9th January 2021

Contents 6 Sectioning elements 12 6.1 body...... 12 6.2 article...... 13 1 Introduction4 6.3 section...... 13 1.1 Thanks...... 5 6.4 nav...... 14 6.5 aside...... 14 2 Security5 6.6 h1--h6 ...... 14

1 6.7 hgroup...... 14 3 The DOCTYPE declaration 6 6.8 header...... 15 6.9 footer...... 15 4 The root element6 6.10 address...... 15 4.1 ...... 6 7 Grouping elements 16 5 The document metadata8 7.1 p...... 16 5.1 head...... 8 7.2 hr...... 16 5.2 title...... 8 7.3 pre...... 16 5.3 base...... 8 7.4 blockquote...... 16 5.4 link...... 8 7.5 ol...... 17 5.5 meta...... 11 7.6 ul...... 17 5.6 style...... 12 7.7 menu...... 17 ∗The author would welcome notification of any errors or possible misunderstandings. 1Table 1 on page 9 offers a simple template for an HTML page. For an evolving template, go to the HTML5 Boilerplate.

1 7.8 li...... 17 10 Embedded content 24 7.9 dl, dt, dd...... 18 10.1 picture...... 24 7.10 figure...... 18 10.2 source...... 24 7.11 main...... 18 10.3 img...... 26 7.12 div...... 19 10.4 iframe...... 27 10.5 embed...... 28 8 Text level semantics 19 10.6 object...... 28 8.1 a...... 19 10.7 param...... 29 8.2 em...... 20 10.8 video...... 29 8.3 strong...... 21 10.9 audio...... 30 8.4 small...... 21 10.10 track...... 31 8.5 s...... 21 10.11 map...... 31 8.6 cite...... 21 10.12 area...... 31 8.7 q...... 21 8.8 dfn...... 21 11 Foreign elements 33 8.9 abbr...... 22 11.1 math...... 33 8.10 ruby, rt and rp...... 22 11.2 svg...... 33 8.11 data...... 22 8.12 time...... 22 12 Tabular data 34 8.13 code...... 22 12.1 table...... 34 8.14 var...... 22 12.2 caption...... 34 8.15 samp...... 22 12.3 colgroup...... 34 8.16 kbd...... 22 12.4 col...... 34 8.17 sub and sup...... 22 12.5 thead...... 34 8.18 i...... 23 12.6 tbody...... 34 8.19 b...... 23 12.7 tfoot...... 34 8.20 u...... 23 12.8 tr...... 34 8.21 mark...... 23 12.9 th...... 35 8.22 bdi and bdo...... 23 12.10 td...... 35 8.23 span...... 23 8.24 br...... 23 13 Forms 36 8.25 wbr...... 24 13.1 ...... 39 13.2 label...... 40 9 Editing elements 24 13.3 input...... 40 9.1 ins and del...... 24 13.4 ...... 43

2 13.5 select...... 44 18.2 ARIA attributes...... 59 13.6 datalist...... 44 18.3 Other notes on attributes...... 65 13.7 optgroup...... 45 13.8 option...... 45 A HTML APIs 67 13.9 textarea...... 45 B HTML elements by groups 67 13.10 output...... 46 B.1 elements...... 67 13.11 progress...... 46 B.2 Flow elements...... 68 13.12 meter...... 46 B.3 Sectioning elements...... 69 13.13 fieldset...... 46 B.4 Heading elements...... 69 13.14 legend...... 47 B.5 Phrasing elements...... 71 14 Interactive elements 47 B.6 Embedding elements...... 72 14.1 details...... 47 B.7 Interactive elements...... 73 14.2 summary...... 47 B.8 Palpable content...... 73 14.3 dialog...... 47 B.9 Script supporting elements...... 74 14.4 A note about commands...... 47 C Example of a DOM tree for some HTML text 75 15 Scripting 48 D Media types and media groups 77 15.1 script...... 48 D.1 Media types...... 77 15.2 ...... 48 D.2 Media groups...... 77 15.3 template...... 48 15.4 slot...... 49 E Detecting and encoding video formats 78 15.5 canvas...... 49 E.1 Example script for falling back on flowplayer..... 78 E.2 Scripts for encoding video...... 78 16 Microdata 51 16.1 Introduction...... 51 F Video MIME types 79 16.2 Microdata attributes...... 53 16.3 The vcard vocabulary...... 53 G Omitting end tags 81 16.4 The vevent vocabulary...... 55 H Making the new HTML semantic elements block ele- 17 Comments 56 ments in older browsers 81

18 Notes on attributes 57 I Modernizr 83 18.1 Global attributes...... 57 I.1 Elements supported by modernizr...... 83

3 1 Introduction

These notes are taken from HTML Up and Running (Pilgrim, 2010), HTML: living standard (Hickson, 2011, 2013, 2014, 2015, 2018)2 and Accessible Rich Internet Applications (WAI-ARIA) 1.1. They are intended as a quick reference for designing web pages and not as a replacement for reading the source documentation which is regularly updated. Note that: • you don’t 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 (see appendicesH andI); • any element or attribute you may have seen previously which is not listed is likely to be obsolete; • HTML5 offers significant enhancements to tablet and smartphone users’ experience without sacrificing compatibility with older browsers. Since 2013 this document has also included the recommended ARIA assistive technology attributes for each element; these are described in section 18.2 on page 59.

2The W3C specification differs in a number of ways from this specification. See section 1.2 of Hickson(2013).

4 1.1 Thanks

Thanks to the following for their feedback on this and/or earlier versions.

Alice Kaerast

2 Security

The main sources of security breaches are: • not validating user input; • cross-site scripting (XSS); • SQL injection: in particular, do not allow arbitrary attributes or or the insertion of a element by a script; • cross-site request forgery (CSRF): check origin headers on all requests; • clickjacking, often by the insertion of an