This document discusses HTML5 semantics, accessibility, and forms. It begins with an overview of HTML5 and its new semantic elements like section, article, header, footer, nav, aside, figure, and details. It also covers new form elements and adjustments to existing elements like b, i, em, strong, small, cite, menu, and hr. The document provides examples and illustrations of how to properly use these new and updated elements to improve semantics, accessibility, and organization of content.
4. The pr ocess is
ong oing, ho wever,
so w atch yo ur step
4
5. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010
Then & now
<fig>
<img src="photo.jpeg" alt=""/>
<caption>Photo of Albert Einstein</caption>
</fig>
The original concept in HTML3: http://www.w3.org/MarkUp/html3/figures.html 5
6. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010
Then & now
<div class="figure">
<img class="image" src="photo.jpeg" alt=""/>
<p class="caption">Photo of Albert Einstein</p>
</div>
The original “figure” microformat. 6
7. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010
Then & now
<figure>
<img src="photo.jpeg" alt=""/>
<legend>Photo of Albert Einstein</legend>
</figure>
The original HTML5 figure. 7
8. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010
Then & now
<div class="figure">
<img class="image" src="photo.jpeg" alt=""/>
<p class="captionlegend">Photo of Albert Einstein</p>
</div>
The revised (and now draft) “figure” microformat: http://microformats.org/wiki/figure 8
9. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010
Then & now
<figure>
<img src="photo.jpeg" alt=""/>
<figcaption>Photo of Albert Einstein</figcaption>
</figure>
The current (dare I say final?) HTML5 figure. 9
10. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010
Oldies but goodies
html
meta head link style
title base body dl dt dd
bdo script noscript map dfn b
object param p div ul ol li cite
iframe address area img br a small
pre code abbr kbd var q samp hr menu
textarea ins del sub sup span strong
select option optgroup label input
form fieldset legend button i em
blockquote h1 h2 h3 h4 h5 h6
table caption col colgroup
thead tbody tfoot tr
th td
10
11. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010
New & revisited
html
meta head link style
title base body dl dt dd section article
bdo script noscript map dfn b aside details summary
object param p div ul ol li cite canvas audio video
iframe address area img br a small nav figure figcaption
pre code abbr kbd var q samp hr menu header footer command
textarea ins del sub sup span strong time source datalist
select option optgroup label input output ruby progress
form fieldset legend button i em mark hgroup meter
blockquote h1 h2 h3 h4 h5 h6 wbr keygen embed
table caption col colgroup rt rp
thead tbody tfoot tr
th td
11
12. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010
Our focus today
html
meta head link style
title base body dl dt dd section article
bdo script noscript map dfn b aside details summary
object param p div ul ol li cite canvas audio video
iframe address area img br a small nav figure figcaption
pre code abbr kbd var q samp hr menu header footer command
textarea ins del sub sup span strong time source datalist
select option optgroup label input output ruby progress
form fieldset legend button i em mark hgroup meter
blockquote h1 h2 h3 h4 h5 h6 wbr keygen embed
table caption col colgroup rt rp
thead tbody tfoot tr
th td
12
14. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010
b and i are back
The b element
Represents a span of text offset from its surrounding content, but of no
extra importance.
<p>This presentation is about <b>HTML5</b>.</p>
The i element
Represents a span of text in an alternate voice or mood.
<p>The <code>b</code> and <code>i</code> elements
have been legitimized in HTML5. <i>Go figure.</i></p>
14
15. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010
em and strong got adjusted
The em element
Represents a span of text text with emphatic stress.
<p>HTML5 introduces several <em>really</em> useful elements
and a ton of new APIs.</p>
The strong element
Represents a span of text of great importance.
<p>Please fill out the form below. <strong>Note: all
fields are required.</strong></p>
15
16. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010
small turned to the dark side
The small element
Represents so-called “fine print” (e.g. disclaimers, caveats, etc.).
16
17. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010
cite got clarified
The cite element
The title of a cited work (e.g. a book, magazine, or journal).
<p>In <cite>Web Form Design</cite>, Luke Wroblewski draws on
original research, his considerable experience at Yahoo! and
eBay, and the perspectives of many of the field’s leading
designers to show you everything you need to know about
designing effective and engaging Web forms.</p>
17
18. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010
menu got resurrected
The menu element
Represents a list of commands.
<menu>
<li><a id="bold">Bold</a></li>
<li><a id="italic">Italic</a></li>
<li><a id="underline">Underline</a></li>
</menu>
or
<menu>
<command icon="/i/icons/b.png" label="Bold"/>
<command icon="/i/icons/i.png" label="Italic"/>
<command icon="/i/icons/u.png" label="Underline"/>
</menu>
18
19. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010
hr found meaning
The hr element
Represents a paragraph-level thematic break.
19
20. HTML5 offers many
new op tions for
building documents 20
21. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010
Organization: section & article
The section element
Represents a section of a document, typically with a title or heading.
<section>
<!-- pretty much anything can go here -->
</section>
The article element
Represents a section of content that forms an independent part of a
document or site.
<article>
<!-- pretty much anything can go here -->
</article>
21
28. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010
Organization: header & footer
The header element
Represents the header of a section.
<header>
<!-- titles, etc. go here -->
</header>
The footer element
Represents the footer of a section.
<footer>
<!-- meta/supplementary information goes here -->
</footer>
28
42. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010
Organization: aside
The aside element
Demarcates content that is tangentially related to the primary content.
<article>
<!-- main content -->
<aside>
<!-- something related -->
</aside>
</article>
42
45. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010
Organization: details
The details element
A UI control for hiding optional content. Must contain a summary element,
followed by other content.
<details>
<summary>This is the visible description</summary>
<p>This content would be hidden by default.</p>
</details>
It’s not implemented in any browser yet, this is just an example of how it could work. (Ripped from http://2010.full-frontal.org). 45
46. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010
Organization: figure
The figure element
A unit of content (typically referenced by the primary content) that is
self-contained. May contain a figcaption element and other content.
<figure id="fig-1">
<img src="photo.jpeg" alt=""/>
<figcaption>Photo of Albert Einstein</figcaption>
</figure>
<figure id="fig-2">
<table>
<caption>2011 Forecast Earnings</caption>
<!-- a bunch of data -->
</table>
</figure>
46
48. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010
Implicit sectioning
<h1> HTML5
<p> HTML5 is currently under development...
<p> Like its immediate predecessors, HTML...
<h2> W3C standardization process
<p> The Web Hypertext Application...
<p> The HTML5 specification...
<p> According to the W3C timetable...
<p> Ian Hickson, editor of the HTML5...
<h2> Markup
<p> HTML5 introduces a number of...
<p> The HTML5 syntax is no longer...
1 HTML5
1.1 W3C standardization process
1.2 Markup
A snippet of the Wikipedia entry on HTML5: http://en.wikipedia.org/wiki/HTML5 48
49. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010
Explicit sectioning
<h1> HTML5
<p> HTML5 is currently under development...
<p> Like its immediate predecessors, HTML...
<h2> W3C standardization process
section
<p> The Web Hypertext Application...
<p> The HTML5 specification...
<p> According to the W3C timetable...
<p> Ian Hickson, editor of the HTML5...
section
<h2> Markup
<p> HTML5 introduces a number of...
<p> The HTML5 syntax is no longer...
1 HTML5
1.1 W3C standardization process
1.2 Markup
A snippet of the Wikipedia entry on HTML5: http://en.wikipedia.org/wiki/HTML5 49
50. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010
Explicit sectioning
<h1> HTML5
<p> HTML5 is currently under development...
<p> Like its immediate predecessors, HTML...
<h1> W3C standardization process
section
<p> The Web Hypertext Application...
<p> The HTML5 specification...
<p> According to the W3C timetable...
<p> Ian Hickson, editor of the HTML5...
section
<h1> Markup
<p> HTML5 introduces a number of...
<p> The HTML5 syntax is no longer...
1 HTML5
1.1 W3C standardization process
1.2 Markup
A snippet of the Wikipedia entry on HTML5: http://en.wikipedia.org/wiki/HTML5 50
51. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010
Explicit sectioning
<h1> HTML5
<p> HTML5 is currently under development...
<p> Like its immediate predecessors, HTML...
<h4> W3C standardization process
section
<p> The Web Hypertext Application...
<p> The HTML5 specification...
<p> According to the W3C timetable...
<p> Ian Hickson, editor of the HTML5...
section
<h6> Markup
<p> HTML5 introduces a number of...
<p> The HTML5 syntax is no longer...
1 HTML5
1.1 W3C standardization process
1.2 Markup
A snippet of the Wikipedia entry on HTML5: http://en.wikipedia.org/wiki/HTML5 51
52. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010
Section management
Sectioning elements
Create explicit sections in an outline.
๏ section (obviously)
๏ article
๏ aside
๏ footer
๏ header
๏ nav
52
53. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010
Outline limitations
<h1> Title
<h2> Subtitle
<p> Text content continues...
<p> Text content continues...
<p> Text content continues...
<p> Text content continues...
<p> Text content continues...
<p> Text content continues...
<p> Text content continues...
1 Title
1.1 Subtitle
53
54. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010
Enter the hgroup
hgroup
<h1> Title
<h2> Subtitle
<p> Text content continues...
<p> Text content continues...
<p> Text content continues...
<p> Text content continues...
<p> Text content continues...
<p> Text content continues...
<p> Text content continues...
1 Title
54
55. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010
Section management
Sectioning roots
Establish a new outline.
๏ body (obviously)
๏ blockquote
๏ details
๏ fieldset
๏ figure
๏ td
55
56. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010
Rooted sections
<h1> Title
<p> Text content continues...
<p> Text content continues...
<h2> Section heading
<p> Text content continues...
<blockquote>
<h2> Rooted heading
<p> Text content continues...
<p> Text content continues...
<p> Text content continues...
<p> Text content continues...
1 Title
1.1 Section heading
56
59. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010
Multimedia
audio
video
canvas
(plus object & embed)
Stick around to hear Molly speak on these.
59
60. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010
Nailing down a time
The time element
Represents a date and/or time.
60
63. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010
Nailing down a time
The time element
Represents a date and/or time.
<time>October 25, 2010 8:11 PM</time>
63
64. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010
Nailing down a time
The time element
Represents a date and/or time.
<time>October 25, 2010 8:11 PM</time>
<time datetime="2010-11-26T01:11:00-05:00">
October 25, 2010 8:11 PM</time>
64
65. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010
Nailing down a time
The time element
Represents a date and/or time.
<time>October 25, 2010 8:11 PM</time>
<time datetime="2010-11-26T01:11:00-05:00">
October 25, 2010 8:11 PM</time>
<time datetime="2010-11-26T01:11:00-05:00"
pubdate="pubdate">October 25, 2010 8:11 PM</time>
65
66. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010
Highlighting content
The mark element
Represents a a run of text in one document marked or highlighted for
reference purposes, due to its relevance in another context.
<ol id="search-results">
<li>
<h3><a href="...">Web Upgrade <mark>HTML5</mark>
May Weaken Privacy</a></h3>
<p>The new language, <mark>HTML5</mark>, could give
marketers access to many more details about users'
online activities.</p>
</li>
</ol>
66
73. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010
All the site’s a play...
The role attribute
Defines the part an element is playing (assuming it’s different than the
semantics would otherwise imply).
<section id="main" role="main">
<!-- The primary content for the page would go here -->
</section>
73
93. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010
Widget states
B B
(off) (on)
<span>
<img src="bold-off.png" alt="bold" />
</span>
<span>
<img src="bold-on.png" alt="bold" />
</span>
93
94. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010
Widget states
B B
(off) (on)
<span>
<img src="bold-off.png" alt="not bold" />
</span>
<span>
<img src="bold-on.png" alt="bold" />
</span>
94
95. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010
Widget states
B B
(off) (on)
<span role="button" aria-pressed="false">
<img src="bold-off.png" alt="not bold" />
</span>
<span role="button" aria-pressed="true">
<img src="bold-on.png" alt="bold" />
</span>
95
96. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010
Widget states
aria-busy
aria-checked
aria-disabled
aria-expanded
aria-grabbed
aria-hidden
aria-invalid
aria-pressed
aria-selected
aria-valuenow (the W3C defines this as a “property”)
aria-valuetext (ditto)
96
97. you can
Wit h HT ML5 e fo rms
mo re u sabl
b uild 97
98. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010
New input types: dates & times
datetime
A UI control for selecting a date & time that includes timezone information.
datetime-local
A UI control for selecting a date & time that does not include timezone information.
date
A UI control for selecting a date with access to all date components
(day, month and year).
month
A UI control for selecting a date that provides access to month and year only.
time
A UI control for selecting a time that does not include timezone information.
week
A UI control for selecting a date that provides access to week and year only.
98
99. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010
New input types: dates & times
Safari
Opera
<input type="date" name="dob"/>
99
100. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010
New input types: numbers
number
A UI control for selecting a number.
range
A UI control for selecting an imprecise number.
100
102. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010
New input types
email
A UI control for entering an email.
url
A UI control for entering a URL.
tel
A UI control for entering a telephone number.
102
104. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010
New input types: search
search
A UI control for plain text editing of one or more search terms.
my search terms x
104
105. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010
New input types: color
color
A UI control for selecting a color.
#EC4D0E
105
106. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010
UI controls
autocomplete
Tells the User Agent whether or not the value should be stored.
autofocus
Tells the User Agent to bring focus to the form control on page load.
form
An id reference to the form to which a given control belongs.
required
Indicated the form control must be provided a value.
placeholder
Offers users a short hint about the required value.
106
107. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010
Value controls
min & max
Lower and upper boundary for an element value (dates, time, and numbers only).
step
The granularity of values allowed (dates, time, and numbers only).
<input type="range" min="1" max="11" step="0.5" .../>
107
108. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010
Value controls
pattern
A regular expression pattern that the User Agent should validate the input against.
<input type="text"
pattern="d{6}w{3}"
placeholder="6 digits followed by 3 letters"
.../>
108
109. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010
Value controls
list
An id reference to a datalist element containing acceptable values.
<input type="text" list="countries" name="country"/>
<datalist id="countries">
<option>Afghanistan</option>
<option>Åland Islands</option>
<!-- ... -->
</datalist>
109
111. 5 Semantics
HTML
Accessibility
&Forms
Aaron Gustafson
112. HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010
Slides available at
http://slideshare.net/AaronGustafson
This presentation is licensed under
Creative Commons
Attribution-Noncommercial-Share Alike 3.0
flickr Photo Credits
“2008 06 11 - 3257 - Washington DC - N Portal Dr at 16th St.” by thisisbossi
“IMG_6200” by pcutler
“Construction material” by raisin bun
“TOC” by D'Arcy Norman
“Dual Samsung Monitors” by steve-uk
112