Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

Take Your Markup to 11

Take Your Markup to 11

Advanced HTML techniques, including semantic markup, HTML5 structural elements, microformats, microdata and ARIA Landmark Roles

Emily Lewis

August 07, 2013
Tweet

More Decks by Emily Lewis

Other Decks in Technology

Transcript

  1. Web Designer Web Developer emilylewisdesign.com Author, Microformats Made Simple microformatsmadesimple.com

    Co-author, HTML5 Cookbook shop.oreilly.com/product/0636920016038.do Managing Editor, Web Standards Sherpa webstandardssherpa.com Co-host, CTRL+CLICK CAST ctrlclickcast.com Email: [email protected] Blog: ablognotlimited.com Twitter: @emilylewis
  2. If you can figure out how to do something interesting

    or unique or noteworthy, people will find you and pay you extra because you're not like everyone else ... you're different. - Seth Godin “ Source: http://youtu.be/JJj_WHCdLtQ?t=3m31s
  3. Web Storage Geolocation Offline Web Apps Transforms Transitions Multiple Backgrounds

    Gradients Rounded Corners SVG Canvas Native Media PHP Objective-C C++ Python Ruby Java JavaScript
  4. Markup, One Louder • Semantics for machine readability • Accessible

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

    the content itself, not the presentation • Elements used for their intended purpose* • Valid*
  6. POSH Benefits • Web standards • Portability for devices •

    Common standard for teams • Easier troubleshooting & maintenance • More accessible • Leaner markup = lighter-weight pages
  7. 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
  8. 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
  9. POSH Basics • 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
  10. • 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
  11. POSH Resources • Keep it Clean: Your Blog and Clean

    HTML webteacher.ws/2012/12/03/keep-it-clean-your-blog-and-clean-html/ • POSH - Plain Old Semantic HTML 456bereastreet.com/archive/200711/posh_plain_old_semantic_html/ • Meaningful Markup: POSH and Beyond msdn.microsoft.com/en-us/magazine/ff770012.aspx • The Beauty of Semantic Markup ablognotlimited.com/articles/tag/Beauty+of+Semantic+Markup+series/ • Our Pointless Pursuit of Semantic Value coding.smashingmagazine.com/2011/11/11/our-pointless-pursuit-of-semantic-value/ comment-page-1/
  12. HTML5 • Backwards and forward compatible • New and redefined

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

    tag names • Optional quotes for attributes • Optional values for attributes • Optional closed empty elements
  14. Block-level Links <h1><a href="/">Emily Lewis Design</a></h1> <p class=”tagline”><a href="/">Beauty Isn’t

    Skin Deep</a></p> <a href="/"><img src="logo.png" alt="Emily Lewis Design" /></a> <a href="/"> <h1>Emily Lewis Design</h1> <p class=”tagline”>Beauty Isn’t Skin Deep</p> <img src="logo.png" alt="Emily Lewis Design" /> </a> Before Now
  15. Semantic Structure • <section> • <header> • <footer> • <main>

    • <nav> • <aside> • <article> • <figure> ? HTML5 Sectioning Element Flowchart html5doctor.com/resources/#flowchart
  16. Making the Move <div class="header"> <h1><a href="/">The Law Office of

    Jimbob Smith</a></h1> <a href="/"><img src="logo.png" alt="Jimbob Legal"/></a> </div> <ul class="primary-nav"> <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> <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> </header> After
  18. Making the Move <header class="header"> <a href="/"> <h1>The Law Office

    of Jimbob Smith</h1> <img src="logo.png" alt="Jimbob Legal" /> </a> <nav> <ul class="header"> <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> </header> After
  19. HTML5 Tips • Use as much or as little as

    you want • Be aware of browser limitations • display: block • document.createElement czonline.net/blog/2011/03/22/using-html5-semantic-elements-today/ • HTML5 Enabling Script remysharp.com/2009/01/07/html5-enabling-script/ • Working Draft, “living standard” • Experiment and educate
  20. HTML5 Resources • HTML5 for Web Designers www.abookapart.com/products/html5-for-web-designers • HTML5

    Doctor html5doctor.com • The Importance of HTML5 Sectioning Elements coding.smashingmagazine.com/2013/01/18/the-importance-of-sections/ • Further examples on using the main element iandevlin.com/blog/2013/02/html5/further-examples-on-using-the-main-element • The Truth About HTML5 truthabouthtml5.com
  21. Microformats • HTML design patterns for describing common content like:

    • People, organizations and places • Events • Hyperlinks • Blog posts • Reviews
  22. Microformats Benefits • Semantics for machine readability • More meaningful

    search results & better findability • User experience enhancements • Encourages consistency and standards • Minimal development effort • No need for software or special technologies • Enables sharing and re-use of your web content elsewhere
  23. hCard <dl> <dt>Emily Lewis</dt> <dd> <ul> <li><a href="http://emilylewisdesign.com"> Emily Lewis

    Design</a></li> <li>Albuquerque, <abbr title="New Mexico">NM</ abbr> 87107</li> <li><a href="mailto:[email protected]"> [email protected]</a></li> </ul> </dd> </dl> Before
  24. hCard <dl class="vcard"> <dt class="fn">Emily Lewis</dt> <dd> <ul> <li><a href="http://emilylewisdesign.com"

    class="url">Emily Lewis Design</a></li> <li class="adr"><span class="locality">Albuquerque </span>, <abbr title="New Mexico" class="region">NM</ abbr> <span class="postal-code">87107</span></li> <li><a href="mailto:[email protected]" class="email">[email protected]</a></li> </ul> </dd> </dl> After
  25. hCard <dl class="vcard"> <dt class="fn">Emily Lewis</dt> <dd> <ul> <li><a href="http://emilylewisdesign.com"

    class="url">Emily Lewis Design</a></li> <li class="adr"><span class="locality">Albuquerque </span>, <abbr title="New Mexico" class="region">NM</ abbr> <span class="postal-code">87107</span></li> <li><a href="mailto:[email protected]" class="email">[email protected]</a></li> </ul> </dd> </dl> After
  26. 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/ • Microformats extension for Chrome chrome.google.com/extensions/detail/oalbifknmclbnmjlljdemhjjlkmppjjl • SafariMicroformats plugin for Safari zappatic.net/projects/safarimicroformats
  27. Microformats Resources • microformats.org • microformats2 microformats.org/wiki/microformats2 • microformats2 &

    HTML5 - The Evolution of Web Data tantek.com/presentations/2013/04/microformats2/ • Extending HTML5 - Microformats html5doctor.com/microformats/ • Getting Semantic With Microformats ablognotlimited.com/articles/tag/Getting+Semantic+series/
  28. 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
  29. Should you use microdata? • Availability and quality of parsers,

    tools, resources • More complex than microformats • schema.org • Supported by major search engines • Narrow vocabularies
  30. Microdata Resources • Schema-org, microformats and more science please fberriman.com/2011/12/01/schema-org-microformats-and-more-science-please/

    • Future-Ready Content alistapart.com/article/future-ready-content • Extending HTML5 - Microdata html5doctor.com/microdata/ • Microformats, HTML5 and Microdata ablognotlimited.com/articles/microformats-html5-microdata
  31. ARIA • Set of guidelines from WAI for accessible, rich

    internet applications • Includes Landmark Roles to indicate document structure and aid navigation • Attribute Selectors FTW! msdn.microsoft.com/en-us/magazine/gg619394.aspx
  32. Landmark Roles • role="banner" • role="navigation" • role="main" • role="search"

    • role="form" • role="complementary" • role="contentinfo" • role="application"
  33. Landmark Roles • role="banner" • role="navigation" • role="main" • role="search"

    • role="form" • role="complementary" • role="contentinfo" • role="application"
  34. Landmark Roles • role="banner" • role="navigation" • role="main" • role="search"

    • role="form" • role="complementary" • role="contentinfo" • role="application" overlap with <nav> overlap <aside> overlap <footer> overlap with <main>
  35. Adding Roles <div class="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
  36. 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 role="navigation"> <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
  37. 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
  38. ARIA Resources • ARIA Gone Wild slideshare.net/jared_w_smith/aria-gone-wild • Using WAI-ARIA

    Landmarks – 2013 blog.paciellogroup.com/2013/02/using-wai-aria-landmarks-2013/ • Using WAI-ARIA in HTML w3.org/TR/2013/WD-aria-in-html-20130214/ • Web Accessibility & WAI-ARIA Primer msdn.microsoft.com/en-us/magazine/ff743762.aspx
  39. Going to 11 • Use what works for you, your

    projects and your clients • Stay up-to-date on changes • Love your craft • Question and be flexible • Experiment, test and decide for yourself
  40. Quality is never an accident. It is always the result

    of intelligent effort. - John Ruskin “ ”