1 / 143

HTML5 Smart Markup for Smarter Websites [FoWD NYC 2011]

Everyone’s going gaga over HTML5 and the plethora of how-tos and demos available on the web are inspirational, but often leave us with more questions than answers. In this session, Aaron Gustafson will focus his attention on HTML5 as a markup language, provide you with a solid context for its enhanced semantics, and show you simple, effective ways you can put it to use on your site today.

AaronGustafson
Download Presentation

HTML5 Smart Markup for Smarter Websites [FoWD NYC 2011]

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. Smart Markup for Smarter Websites Aaron Gustafson @aarongustafson slideshare.net/AaronGustafson

  2. This is not a consensus-based approach — there’s no guarantee that everyone will be happy! There is also no voting. — WHATWG process

  3. <time>

  4. <time>

  5. Use <time> anyway.

  6. In case of conflict, consider users over authors over implementors over specifiers over theoretical purity. — HTML design principle

  7. June 2004 WhatWG begins work on Web Applications 1.0 2014 HTML5 Standard? May 2011 HTML5 to Last Call 2007 Work begins at W3C 2004 2014

  8. fault tolerance n. a system’s ability to continue to operate when it encounters and unexpected error.

  9. Browsers ignore what they don’t understand

  10. FUTURE OF WEB DESIGN NYC 2011 Fault tolerance <p>HTML5 introduces several <em>really</em> useful elements and a ton of new APIs.</p> <p>Please fill out the form below. <strong>Note: all fields are required.</strong></p> <p>I like to work with markup languages because <strong>they are simple and easy to read</strong>. They also have that certain <i lang="fr" title="I don&#8217;t know what">je ne sais quoi</i>.</p>

  11. FUTURE OF WEB DESIGN NYC 2011 Fault tolerance HTML5 introduces several really useful elements and a ton of new APIs. Please fill out the form below. Note: all fields are required. I like to work with markup languages because they are simple and easy to read. They also have that certain je ne sais quoi.

  12. FUTURE OF WEB DESIGN NYC 2011 Fault tolerance <video poster=”poster.png”> <source src=”video.m4v”/> <source src=”video.webm”/> <source src=”video.ogv”/> <img src=”poster.png” alt=””/> <ul> <li><a href="video.m4v">Download MP4</a></li> <li><a href="video.webm">Download WebM</a></li> <li><a href="video ogv">Download Ogg</a></li> </ul> </video>

  13. FUTURE OF WEB DESIGN NYC 2011 Fault tolerance <img src=”poster.png” alt=””/> <ul> <li><a href="video.m4v">Download MP4</a></li> <li><a href="video.webm">Download WebM</a></li> <li><a href="video ogv">Download Ogg</a></li> </ul>

  14. FUTURE OF WEB DESIGN NYC 2011 Fault tolerance <input type="date" name="dob"/> I get it! I don’t get it :-(

  15. You are already using HTML5

  16. HTML5 == HTML 4

  17. HTML5 == HTML 3

  18. HTML5 == HTML 2

  19. HTML5 == HTML 1

  20. HTML5 == HTML 0

  21. FUTURE OF WEB DESIGN NYC 2011 HTML 4.01 html meta head base link style title bdo body dl dt map ol ul dd dfn li b script noscript p object param div cite i small iframe pre address area img q samp br a code abbr kbd var hr menu sup textarea ins option del sub span strong input select optgroup label form fieldset legend button u em blockquote table h1 h2 h3 h4 h5 h6 caption tbody thead col colgroup tfoot tr th td

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

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

  24. What’s the easiest way to “switch” a site to HTML5?

  25. FUTURE OF WEB DESIGN NYC 2011 Switching to HTML5 <!DOCTYPE html>

  26. Simplifcation

  27. FUTURE OF WEB DESIGN NYC 2011 Simplifcation <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <html lang="en">

  28. FUTURE OF WEB DESIGN NYC 2011 Simplifcation <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta charset="utf-8" />

  29. FUTURE OF WEB DESIGN NYC 2011 Simplifcation <link rel="stylesheet" href="style-original.css" type="text/css" /> <style type=”text/css”> /* … */ </style> <script type=”text/javascript” src=”myscript.js”></script> <link rel="stylesheet" href="style-original.css" /> <style> /* … */ </style> <script src=”myscript.js”></script>

  30. Redefnition

  31. FUTURE OF WEB DESIGN NYC 2011 Redefnition 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>

  32. FUTURE OF WEB DESIGN NYC 2011 Redefnition 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 that is borrowedor 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> <p>I like to work with markup languages because <strong>they are simple and easy to read</strong>. They also have that certain <i lang="fr" title="I don&#8217;t know what">je ne sais quoi</i>.</p>

  33. FUTURE OF WEB DESIGN NYC 2011 Redefnition 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>

  34. FUTURE OF WEB DESIGN NYC 2011 Redefnition The small element Represents so-called “fne print” (e.g. disclaimers, caveats, etc.).

  35. FUTURE OF WEB DESIGN NYC 2011 Redefnition The hr element Represents a paragraph-level thematic break.

  36. Organization

  37. FUTURE OF WEB DESIGN NYC 2011 Organization <section> <!-- pretty much anything can go here --> </section> <article> <!-- pretty much anything can go here --> </article>

  38. section

  39. section > article

  40. article

More Related