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

Take Your Markup to Eleven

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

Emily Lewis

October 04, 2011

More Decks by Emily Lewis

Other Decks in Technology


  1. Web Designer Writer Instructor emilylewisdesign.com Co-Founder & Co-Manager, Webuquerque webuquerque.com

    Author, Microformats Made Simple microformatsmadesimple.com Co-author, HTML5 Cookbook Email: [email protected] Blog: ablognotlimited.com Twitter: @emilylewis
  2. ?

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

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

    all users • Development efficiencies • Syndication • SEO and findability • User experience enhancements
  5. POSH • Markup that has meaning • Markup that describes

    the content itself, not the presentation • Elements used for their intended purpose* • Valid*
  6. 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
  7. 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
  8. 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
  9. POSH Benefits • Web standards • Portability for devices •

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

  11. • 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
  12. More than Markup • Rich media (<canvas>, <audio>, <video>) •

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

    semantic elements • Obsolete presentational elements • Flexible and simplified syntax
  14. Flexible Style • All coding styles are valid • Uppercase

    tag names • Optional quotes for attributes • Optional values for attributes • Optional closed empty elements
  15. 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
  16. 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
  17. 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
  18. 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
  19. Microformats • HTML design patterns for describing common content like:

    • People, organizations and places • Events • Hyperlinks • Blog posts • Reviews
  20. 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
  21. 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:[email protected]"> [email protected]</a></li> </ul> </dd> </dl> Before
  22. 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:[email protected]" class="email">[email protected]</a></li> </ul> </dd> </dl> After
  23. 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
  24. 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
  25. To use or not ... • Yes, I’m biased •

    Not as many parsers available • More complex than microformats • You don’t have to choose
  26. 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>
  27. 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
  28. 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>
  29. 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
  30. 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
  31. 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
  32. 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