Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Take Your Markup to Eleven

39c8ef13c693c8d143679be9e3d8cf02?s=47 Emily Lewis
October 04, 2011

Take Your Markup to Eleven

Presentation for the Denver HTML5 Users Group on advanced HTML techniques.

Focuses, specifically, on semantic markup (POSH), new HTML5 structural elements, microformats, microdata and ARIA landmark roles

39c8ef13c693c8d143679be9e3d8cf02?s=128

Emily Lewis

October 04, 2011
Tweet

More Decks by Emily Lewis

Other Decks in Technology

Transcript

  1. Some rights reserved Take your markupto 11 Denver HTML5 Users

    Group May 23, 2011
  2. Web Designer Writer Instructor emilylewisdesign.com Co-Founder & Co-Manager, Webuquerque webuquerque.com

    Author, Microformats Made Simple microformatsmadesimple.com Co-author, HTML5 Cookbook Email: emily@emilylewisdesign.com Blog: ablognotlimited.com Twitter: @emilylewis
  3. Markup Tonight, it’s all about

  4. None
  5. ?

  6. Offline Web Apps

  7. Offline Web Apps Transforms

  8. Offline Web Apps Transforms Native Media

  9. Offline Web Apps Transforms Canvas Native Media

  10. Offline Web Apps Transforms Gradients Canvas Native Media

  11. Offline Web Apps Transforms Multiple Backgrounds Gradients Canvas Native Media

  12. Web Storage Offline Web Apps Transforms Multiple Backgrounds Gradients Canvas

    Native Media
  13. Web Storage Offline Web Apps Transforms Multiple Backgrounds Gradients SVG

    Canvas Native Media
  14. Web Storage Offline Web Apps Transforms Transitions Multiple Backgrounds Gradients

    SVG Canvas Native Media
  15. Web Storage Geolocation Offline Web Apps Transforms Transitions Multiple Backgrounds

    Gradients SVG Canvas Native Media
  16. Web Storage Geolocation Offline Web Apps Transforms Transitions Multiple Backgrounds

    Gradients Rounded Corners SVG Canvas Native Media
  17. None
  18. None
  19. J O B

  20. Good HTML • Foundation of today’s web • Can make

    a perfectly great web site with nothing else • Easy to learn & implement
  21. Great Markup • Semantics for machine readability • Accessible for

    all users • Development efficiencies • Syndication • SEO and findability • User experience enhancements
  22. http://www.flickr.com/photos/nickwheeleroz/2220008689/

  23. Go to 11 To reach this level of greatness, you

    have to
  24. None
  25. POSH Plain Old Semantic HTML

  26. POSH • Markup that has meaning • Markup that describes

    the content itself, not the presentation • Elements used for their intended purpose* • Valid*
  27. Not POSH <table> <tr> <td><a href="/">Home</a></td> <td><a href="/products/">Products</a></td> <td><a href="/services/">Services</a></td>

    <td><a href="/about/">About</a></td> </tr> </table> <blockquote> <p>I need me some indented text!</p> </blockquote> Also Not POSH
  28. POSH FTW <ul> <li><a href="/">Home</a></li> <li><a href="/products/">Products</a></li> <li><a href="/services/">Services</a></li> <li><a

    href="/about/">About</a></li> </ul> <p>I need me some indented text!</p> p:first-child {text-indent: 25px;} POSH & CSS
  29. POSH Tips • Use <h1>-<h6> for headings & to define

    content outline • Use <table> for tabular data, not layout • List elements (<ol>, <ul>, <dl>) for lists • Drop presentational elements (<u>, <big>, <center>) in favor of CSS • Semantic class and id naming
  30. POSH Benefits • Web standards • Portability for devices •

    Common standard for teams • Easier troubleshooting & maintenance • More accessible • Leaner markup = lighter-weight pages
  31. *

  32. • Use the right technology for the job • Pave

    the cowpaths • Our Best Practices Are Killing Us stubbornella.org/content/2011/04/28/our-best-practices-are-killing-us/ • Understanding HTML5 Validation impressivewebs.com/understanding-html5-validation/ Flexibility vs. Pedantry
  33. HTML5

  34. HTML5 5

  35. More than Markup • Rich media (<canvas>, <audio>, <video>) •

    Interactive <form> enhancements • APIs for application development
  36. HTML5 • Backwards and forward compatible • New and redefined

    semantic elements • Obsolete presentational elements • Flexible and simplified syntax
  37. Is it for you?

  38. Simplified DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/

    xhtml1-strict.dtd"> <!DOCTYPE html> Before Now
  39. Flexible Style • All coding styles are valid • Uppercase

    tag names • Optional quotes for attributes • Optional values for attributes • Optional closed empty elements
  40. Block-level Links <h1><a href="/">Emily Lewis Design</a></h2> <h2><a href="/">Beauty Isn’t Skin

    Deep</a></h2> <a href="/"><img src="logo.png" alt="Emily Lewis Design" /></a> <a href="/"> <h1>Emily Lewis Design</h1> <h2>Beauty Isn’t Skin Deep</h2> <img src="logo.png" alt="Emily Lewis Design" /> </a> Before Now
  41. Semantic Structure • <section> • <header> • <footer> • <nav>

    • <aside> • <article>
  42. Site Layout

  43. HTML5 Structure

  44. Making the Move <div id="header"> <h1><a href="/">The Law Office of

    Jimbob Smith</a></h1> <a href="/"><img src="logo.png" alt="Jimbob Legal"/></a> </div> <ul> <li><a href="/News/">News</a></li> <li><a href="/Services/">Services</a></li> <li><a href="/Resources/">Resources</a></li> <li><a href="/About/">About</a></li> </ul> Before
  45. Making the Move <header> <a href="/"> <h1>The Law Office of

    Jimbob Smith</h1> <img src="logo.png" alt="Jimbob Legal" /> </a> </header> <nav> <ul> <li><a href="/News/">News</a></li> <li><a href="/Services/">Services</a></li> <li><a href="/Resources/">Resources</a></li> <li><a href="/About/">About</a></li> </ul> </nav> After
  46. HTML5 Tips • Use as much or as little as

    you want • Be aware of browser limitations • display: block • document.createElement • HTML5 Enabling Script remysharp.com/2009/01/07/html5-enabling-script/ • Remember, it is a Working Draft (“living standard”) • Experiment and educate
  47. Microformats More Meaning With

  48. Microformats • HTML design patterns for describing common content like:

    • People, organizations and places • Events • Hyperlinks • Blog posts • Reviews
  49. Microformats Benefits • Semantics for machine readability • User experience

    enhancements • More meaningful search results & better findability • Encourages consistency and standards • Minimal development effort • No need for software or special technologies
  50. hCard <dl> <dt>Emily Lewis</dt> <dd> <ul> <li><a href="http://www.ablognotlimited.com"> A Blog

    Not Limited</a></li> <li>Albuquerque, <abbr title="New Mexico">NM</ abbr> 87106</li> <li><a href="mailto:emily@ablognotlimited.com"> emily@ablognotlimited.com</a></li> </ul> </dd> </dl> Before
  51. hCard <dl class="vcard"> <dt class="fn">Emily Lewis</dt> <dd> <ul> <li><a href="http://www.ablognotlimited.com"

    class="url">A Blog Not Limited</a></li> <li class="adr"><span class="locality">Albuquerque </span>, <abbr title="New Mexico" class="region">NM</ abbr> <span class="postal-code">87106</span></li> <li><a href="mailto:emily@ablognotlimited.com" class="email">emily@ablognotlimited.com</a></li> </ul> </dd> </dl> After
  52. Downloadable vcard • H2VX Contacts Conversion Service h2vx.com/vcf/ • Operator

    add-on for Firefox addons.mozilla.org/en-US/firefox/addon/operator/ • Tails Export Add-on for Firefox addons.mozilla.org/en-US/firefox/addon/tails-export/ • Michromeformats extension for Chrome chrome.google.com/extensions/detail/oalbifknmclbnmjlljdemhjjlkmppjjl • SafariMicroformats plug-in for Safari zappatic.net/projects/safarimicroformats
  53. Microdata HTML5 Likes Machine Readability Too

  54. Microdata <dl> <dt><a href="http://ablognotlimited.com">Emily Lewis</a></dt> <dd>Web Designer</dd> <dd>Albuquerque, <abbr title="New

    Mexico" class="region">NM</abbr>87106</dd> </dl> Before
  55. Microdata <dl itemscope itemtype="http://data-vocabulary.org/ Person"> <dt itemprop="name"><a href="http:// ablognotlimited.com" itemprop="url">Emily

    Lewis</a></ dt> <dd itemprop="title">Web Designer</dd> <dd itemprop="address" itemscope itemtype="http:// data-vocabulary.org/Address"><span itemprop="locality">Albuquerque</span>, <abbr title="New Mexico" itemprop="region">NM</abbr> <span itemprop="postal-code">87106</span></dd> </dl> After
  56. To use or not ... • Yes, I’m biased •

    Not as many parsers available • More complex than microformats • You don’t have to choose
  57. 2 Stones, 1 Bird <dl class="vcard" itemscope itemtype="http://data- vocabulary.org/Person"> <dt

    class="fn" itemprop="name"><a href="http:// ablognotlimited.com" itemprop="url">Emily Lewis</a></ dt> <dd class="title" itemprop="title">Web Designer</ dd> <dd class="adr" itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address"><span class="locality" itemprop="locality">Albuquerque</ span>, <abbr title="New Mexico" class="region" itemprop="region">NM</abbr> <span class="postal-code" itemprop="postal-code">87106</span></dd> </dl>
  58. ARIA Roles

  59. ARIA • Set of guidelines from WAI for accessible, rich

    internet applications • Includes Document Landmark Roles to indicate document structure and aid navigation • Attribute Selectors FTW! Understanding CSS Selectors: msdn.microsoft.com/en-US/scriptjunkie/gg619394.aspx
  60. Landmark Roles • role="banner" • role="navigation" • role="main" • role="search"

    • role="article" • role="complementary" • role="contentinfo" not needed on <nav> not needed on <aside> not needed on <footer>
  61. Adding Roles <div id="header" role="banner"> <h1><a href="/">The Law Office of

    Jimbob Smith</a></h1> <a href="/"><img src="logo.png" alt="Jimbob Legal"/></a> </div> <ul role="navigation"> <li><a href="/News/">News</a></li> <li><a href="/Services/">Services</a></li> <li><a href="/Resources/">Resources</a></li> <li><a href="/About/">About</a></li> </ul> XHTML
  62. Adding Roles <header role="banner"> <a href="/"> <h1>The Law Office of

    Jimbob Smith</h1> <img src="logo.png" alt="Jimbob Legal" /> </a> </header> <nav> <ul> <li><a href="/News/">News</a></li> <li><a href="/Services/">Services</a></li> <li><a href="/Resources/">Resources</a></li> <li><a href="/About/">About</a></li> </ul> </nav> HTML5
  63. Going to 11 • Use what works for you, your

    projects and your clients (not “all or nothing”) • Experiment, test and decide for yourself • Stay up-to-date on changes
  64. Resources AKA Self-Pimpage • Meaningful Markup: POSH and Beyond msdn.microsoft.com/en-us/scriptjunkie/ff770012.aspx

    • The Beauty of Semantic Markup ablognotlimited.com/articles/tag/Beauty+of+Semantic+Markup+series/ • Getting Semantic With Microformats ablognotlimited.com/articles/tag/Getting+Semantic+series/ • Web Accessibility & WAI-ARIA Primer msdn.microsoft.com/en-us/scriptjunkie/ff743762.aspx • Microformats, HTML5 and Microdata ablognotlimited.com/articles/microformats-html5-microdata • Using HTML5’s Semantic Tags Today msdn.microsoft.com/en-us/scriptjunkie/gg454786.aspx
  65. Questions?

  66. Thanks! emily@emilylewisdesign.com @emilylewis http://slidesha.re/lZpo91