Take Your Markup to Eleven


Published on

Presentation for Webuquerque's February 2011 event discusses advanced HTML techniques.

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

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Take Your Markup to Eleven

  1. markupTake your to Some rights reserved February 2, 2011 Webuquerque
  2. Freelance Web Designerhttp://emilylewisdesign.comWebuquerque Co-Founder & Co-Managerhttp://webuquerque.comAuthor, Microformats Made Simplehttp://microformatsmadesimple.comEmail: emily@emilylewisdesign.comBlog: http://ablognotlimited.comTwitter: @emilylewis
  3. HTML is awesome• Foundation of today’s web• Can make a perfectly great web site with nothing else• Valid http://validator.w3.org/• Comparatively easy to learn & implement
  4. But it’s oftenoverlooked
  5. HTML Can be awesomer• Semantics for machine readability• Accessible for all users• Development efficiencies• Syndication• SEO and findability• User experience enhancements
  6. To reach this level of awesome, you have to go One Louder
  7. Plain Old Semantic Markup POSH
  8. POSH Is• Markup that has meaning• Markup that describes the content itself, not the presentation• Elements used for their intended purpose
  9. POSH BenefiTs• Web standards• Portability for devices• Common standard for teams• Easier troubleshooting & maintenance• More accessible• Leaner markup = lighter weight pages
  10. 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
  11. 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>Also not POSH <div> <p><a href="/">Home</a></p> <p><a href="/products/">Products</a></p> <p><a href="/services/">Services</a></p> <p><a href="/about/">About</a></p> </div>
  12. POSH FTW<ul id="nav"> <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>
  13. The “Future” Is NowHTML5
  14. HTML5 Is More Than Markup• Rich media (<canvas>, <audio>, <video>)• Interactive <form> enhancements• APIs for application development
  15. HTML5 Is• Backwards and forward compatible• New semantic elements• Obsolete presentational elements• Flexible and simplified syntax But is it for you?
  16. DOCTYPE FLExible SynTaXBefore <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd">Now <!DOCTYPE html>
  17. Style FLExible SynTaX• All coding styles are valid • Uppercase tag names • Optional quotes for attributes • Optional values for attributes • Optional closed empty elements
  18. Links & Block ContentBefore <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>Now <a href="/"> <h1>Emily Lewis Design</h1> <h2>Beauty Isn’t Skin Deep</h2> <img src="logo.png" alt="Emily Lewis Design" /> </a>
  19. Semantic Structure• <section>• <header>• <footer>• <nav>• <aside>• <article>
  20. Site Layout
  21. HTML5 Structure
  22. Making the MoveBefore<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>
  23. Making the MoveAfter<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>
  24. HTML5 Tips• Use as much or as little as you want• Be aware of browser limitations • display: block • document.createElement• Remember it is a Working Draft (“living standard”)• Experiment and educate
  25. More Meaning WithMicroformats
  26. Microformats Are• HTML design patterns for describing common content like: • People, organizations and places • Events • Hyperlinks • Blog posts • Reviews
  27. Microformats BENEFITS• Semantics• User experience enhancements• More meaningful search results & better findability• Encourages consistency and standards• Minimal development effort• No need for software or special technologies
  28. hCard COnTAcT InfoBefore <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>
  29. hCard COnTAcT InfoAfter <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>
  30. hCard DIY Demos• Downloadable business card • H2VX Contacts Conversion Service • Operator add-on for Firefox • Tails Export Add-on for Firefox • Michromeformats extension for Chrome • SafariMicroformats plug-in for Safari
  31. HTML5 Likes Machine Readability Too Microdata
  32. Microdata COnTAcT InfoBefore <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>
  33. Microdata COnTAcT InfoAfter <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>
  34. Microdata TO use or NoTt• Yes, I’m biased• Currently, no machines can parse• It is a bit more complex than microformats• You don’t have to choose
  35. Two Stones, One 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" itemscopeitemtype="http://data-vocabulary.org/Address"><spanclass="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>
  36. ARIA Roles
  37. ARIA Is• Set of guidelines from WAI for accessible, rich internet applications• Includes Document Landmark Roles to indicate document structure and aid navigation
  38. Landmark Roles• role="banner"• role="navigation" not needed on <nav>• role="main"• role="search"• role="article"• role="complementary" not needed on <aside>• role="contentinfo" not needed on <footer>
  39. Adding RolesXHTML<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>
  40. Adding RolesHTML5<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>
  41. Going to eleven• 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
  42. Resources and self pimpage• Meaningful Markup: POSH and Beyond• The Beauty of Semantic Markup series• Getting Semantic With Microformats series• Web Accessibility & WAI-ARIA Primer• Microformats, HTML5 and Microdata• Using HTML5’s Semantic Tags Today
  43. Questions?
  44. Thanks! P.S. I’d love your feedback!http://speakerrate.com/talks/5471-take-your-markup-to-eleven