1 / 112

HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

We'll cover all of the new tags, such as article and section and how best to implement them, along with ARIA attributes to enhance the accessibility of your pages. Webforms introduce new field types and built-in validation, saving you time due to not having to implement your own JavaScript validation.

AaronGustafson
Download Presentation

HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. & 5 Semantics Accessibility Forms HTML Aaron Gustafson

  2. HTML5 provides more control 2

  3. Paves the cowpaths we’ve carved on the web 3

  4. The process is ongoing, however, so watch your step 4

  5. HTML5: Semantics, Accessibility & Forms Then&now HTML5 Online Conference — 1 November 2010 <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 Then&now HTML5 Online Conference — 1 November 2010 <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 Then&now HTML5 Online Conference — 1 November 2010 <figure> <img src="photo.jpeg" alt=""/> <legend>Photo of Albert Einstein</legend> </figure> The original HTML5figure. 7

  8. HTML5: Semantics, Accessibility & Forms Then&now HTML5 Online Conference — 1 November 2010 <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 Then&now HTML5 Online Conference — 1 November 2010 <figure> <img src="photo.jpeg" alt=""/> <figcaption>Photo of Albert Einstein</figcaption> </figure> The current (dare I say final?) HTML5figure. 9

  10. HTML5: Semantics, Accessibility & Forms Oldies but goodies HTML5 Online Conference — 1 November 2010 html head base meta link style title bdo body dl dt map ol ul dd dfn li b script noscript p cite small object param div address area iframe pre img q samp br a var abbr hr menu code kbd sup textarea strong ins option del sub span select optgroup label input em form fieldset legend button i blockquote table thead h1 h2 h3 h4 h5 h6 caption tbody col colgroup tfoot tr th td 10

  11. HTML5: Semantics, Accessibility & Forms New&revisited HTML5 Online Conference — 1 November 2010 html head base meta link style title bdo article details body dl dt map ol ul dd dfn li section b aside canvas nav script noscript p summary video audio figure footer header cite small object param div address area iframe pre img q samp br figcaption a var abbr hr menu code kbd command datalist time source sup textarea strong ins option del sub span select optgroup label input em output ruby progress form fieldset legend button i mark wbr meter hgroup keygen rt blockquote table thead h1 h2 h3 h4 h5 h6 embed caption tbody col colgroup tfoot rp tr th td 11

  12. HTML5: Semantics, Accessibility & Forms Our focus today HTML5 Online Conference — 1 November 2010 html head base meta link style title bdo article details body dl dt map ol ul dd dfn li section b aside canvas nav script noscript p summary video audio figure footer header cite small object param div address area iframe pre img q samp br figcaption a var abbr hr menu code kbd command datalist time source sup textarea strong ins option del sub span select optgroup label input em output ruby progress form fieldset legend button i mark wbr meter hgroup keygen rt blockquote table thead h1 h2 h3 h4 h5 h6 embed caption tbody col colgroup tfoot rp tr th td 12

  13. Cha-cha-cha-changes... 13

  14. HTML5: Semantics, Accessibility & Forms and are back b i HTML5 Online Conference — 1 November 2010 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 and got adjusted em strong HTML5 Online Conference — 1 November 2010 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 turned to the dark side small HTML5 Online Conference — 1 November 2010 The small element Represents so-called “fine print” (e.g. disclaimers, caveats, etc.). 16

  17. HTML5: Semantics, Accessibility & Forms got clarified cite HTML5 Online Conference — 1 November 2010 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 got resurrected menu HTML5 Online Conference — 1 November 2010 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 found meaning hr HTML5 Online Conference — 1 November 2010 The hr element Represents a paragraph-level thematic break. 19

  20. HTML5 offers many new options for building documents 20

  21. HTML5: Semantics, Accessibility & Forms Organization: & HTML5 Online Conference — 1 November 2010 article section 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

  22. HTML5: Semantics, Accessibility & Forms Organization: & HTML5 Online Conference — 1 November 2010 article section 22

  23. HTML5: Semantics, Accessibility & Forms Organization: & HTML5 Online Conference — 1 November 2010 article section section 23

  24. HTML5: Semantics, Accessibility & Forms Organization: & HTML5 Online Conference — 1 November 2010 article section section > article 24

  25. HTML5: Semantics, Accessibility & Forms Organization: & HTML5 Online Conference — 1 November 2010 article section 25

  26. HTML5: Semantics, Accessibility & Forms Organization: & HTML5 Online Conference — 1 November 2010 article section article 26

  27. HTML5: Semantics, Accessibility & Forms Organization: & HTML5 Online Conference — 1 November 2010 article section article > section 27

  28. HTML5: Semantics, Accessibility & Forms Organization: & HTML5 Online Conference — 1 November 2010 footer header 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

  29. HTML5: Semantics, Accessibility & Forms Organization: & HTML5 Online Conference — 1 November 2010 footer header 29

  30. HTML5: Semantics, Accessibility & Forms Organization: & HTML5 Online Conference — 1 November 2010 footer header header 30

  31. HTML5: Semantics, Accessibility & Forms Organization: & HTML5 Online Conference — 1 November 2010 footer header 31

  32. HTML5: Semantics, Accessibility & Forms Organization: & HTML5 Online Conference — 1 November 2010 footer header footer 32

  33. HTML5: Semantics, Accessibility & Forms Organization: & HTML5 Online Conference — 1 November 2010 footer header article 33

  34. HTML5: Semantics, Accessibility & Forms Organization: & HTML5 Online Conference — 1 November 2010 footer header article > header 34

  35. HTML5: Semantics, Accessibility & Forms Organization: & HTML5 Online Conference — 1 November 2010 footer header article 35

  36. HTML5: Semantics, Accessibility & Forms Organization: & HTML5 Online Conference — 1 November 2010 footer header article > footer 36

  37. HTML5: Semantics, Accessibility & Forms Organization:nav HTML5 Online Conference — 1 November 2010 The nav element Demarcates a group of navigational links. <nav> <ol> <li><a href="#details">Details</a></li> <li><a href="#lodging">Lodging</a></li> <li><a href="#location">Location</a></li> <li><a href="#topics">Topics</a></li> <li><a href="#contact">Contact Us</a></li> </ol> <p><a href="register">Register Now</a> <b>Only 5 spaces left</b></p> </nav> 37

  38. HTML5: Semantics, Accessibility & Forms Organization:nav HTML5 Online Conference — 1 November 2010 38

  39. HTML5: Semantics, Accessibility & Forms Organization:nav HTML5 Online Conference — 1 November 2010 nav 39

  40. HTML5: Semantics, Accessibility & Forms Organization:nav HTML5 Online Conference — 1 November 2010 40

  41. HTML5: Semantics, Accessibility & Forms Organization:nav HTML5 Online Conference — 1 November 2010 nav 41

  42. HTML5: Semantics, Accessibility & Forms Organization:aside HTML5 Online Conference — 1 November 2010 The aside element Demarcates content that is tangentially related to the primary content. <article> <!-- main content --> <aside> <!-- something related --> </aside> </article> 42

  43. HTML5: Semantics, Accessibility & Forms Organization:aside HTML5 Online Conference — 1 November 2010 43

  44. HTML5: Semantics, Accessibility & Forms Organization:aside HTML5 Online Conference — 1 November 2010 aside 44

  45. HTML5: Semantics, Accessibility & Forms Organization:details HTML5 Online Conference — 1 November 2010 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 Organization:figure HTML5 Online Conference — 1 November 2010 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

  47. Document outlines in HTML5 47

  48. HTML5: Semantics, Accessibility & Forms Implicit sectioning HTML5 Online Conference — 1 November 2010 <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 Explicit sectioning HTML5 Online Conference — 1 November 2010 <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... section 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 Explicit sectioning HTML5 Online Conference — 1 November 2010 <h1> HTML5 <p> HTML5 is currently under development... <p> Like its immediate predecessors, HTML... <h1> 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... section 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

More Related