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

39c8ef13c693c8d143679be9e3d8cf02?s=128

Emily Lewis

August 07, 2013
Tweet

Transcript

  1. Some rights reserved markup 11 to Take your

  2. 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: emily@emilylewisdesign.com Blog: ablognotlimited.com Twitter: @emilylewis
  3. emilylewisdesign.com/TakeYourMarkupTo11

  4. 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
  5. Don’t Be Average

  6. None
  7. 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
  8. Source: http://youtu.be/EbVKWCpNFhY

  9. Source: http://youtu.be/EbVKWCpNFhY

  10. 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
  11. POSH Plain Old Semantic HTML

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

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

    Common standard for teams • Easier troubleshooting & maintenance • More accessible • Leaner markup = lighter-weight pages
  14. 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
  15. 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
  16. 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
  17. None
  18. • 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
  19. 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/
  20. HTML5 5

  21. HTML5 • Backwards and forward compatible • New and redefined

    semantic elements • Obsolete presentational elements • Flexible and simplified syntax
  22. 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
  23. Flexible Style • All coding styles are valid • Uppercase

    tag names • Optional quotes for attributes • Optional values for attributes • Optional closed empty elements
  24. 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
  25. Semantic Structure • <section> • <header> • <footer> • <main>

    • <nav> • <aside> • <article> • <figure> ? HTML5 Sectioning Element Flowchart html5doctor.com/resources/#flowchart
  26. Site Layout

  27. HTML5 Structure

  28. 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
  29. 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
  30. 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
  31. 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
  32. 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
  33. Microformats More Meaning With

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

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

    search results & better findability
  36. 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
  37. 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:emily@emilylewisdesign.com"> emily@emilylewisdesign.com</a></li> </ul> </dd> </dl> Before
  38. 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:emily@emilylewisdesign.com" class="email">emily@emilylewisdesign.com</a></li> </ul> </dd> </dl> After
  39. 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:emily@emilylewisdesign.com" class="email">emily@emilylewisdesign.com</a></li> </ul> </dd> </dl> After
  40. 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
  41. 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/
  42. Microdata HTML5 Likes Machine Readability Too

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

    Mexico" class="region">NM</abbr>87107</dd> </dl> Before
  44. 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
  45. Should you use microdata? • Availability and quality of parsers,

    tools, resources • More complex than microformats • schema.org • Supported by major search engines • Narrow vocabularies
  46. 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
  47. ARIA Landmarks Accessible Rich Internet Applications

  48. 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
  49. Landmark Roles • role="banner" • role="navigation" • role="main" • role="search"

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

    • role="form" • role="complementary" • role="contentinfo" • role="application"
  51. 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>
  52. 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
  53. 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
  54. 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
  55. 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
  56. 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
  57. Quality is never an accident. It is always the result

    of intelligent effort. - John Ruskin “ ”
  58. Questions? emily@emilylewisdesign.com @emilylewis emilylewisdesign.com/TakeYourMarkupTo11/