11 markupTake your                                             to Some rights reserved   Denver HTML5 Users Group   May 23...
Web Designer       Writer     Instructoremilylewisdesign.comCo-Founder & Co-Manager, Webuquerquewebuquerque.comAuthor, Mic...
Tonight, it’s all aboutMarkup
?
Transforms                    Canvas                           GeolocationMultiple Backgrounds                 Web Storage...
JOB
Good HTML• Foundation of today’s web• Can make a perfectly great web site  with nothing else• Easy to learn & implement
Great Markup• Semantics for machine readability• Accessible for all users• Development efficiencies• Syndication• SEO and ...
http://www.flickr.com/photos/nickwheeleroz/2220008689/
To reach this level of greatness, you have to        Go to 11
POSHPlain Old Semantic HTML
POSH• Markup that has meaning• Markup that describes the content itself,  not the presentation• Elements used for their in...
Not POSH    <table>     <tr>      <td><a    href="/">Home</a></td>         <td><a   href="/products/">Products</a></td>   ...
POSH FTW   <ul>    <li><a    href="/">Home</a></li>      <li><a   href="/products/">Products</a></li>      <li><a   href="...
POSH Tips• Use <h1>-<h6> for headings & to define  content outline• Use <table> for tabular data, not layout• List element...
POSH Benefits• Web standards• Portability for devices• Common standard for teams• Easier troubleshooting & maintenance• Mo...
*
Flexibility vs. Pedantry• Use the right technology for the job• Pave the cowpaths• Our Best Practices Are Killing Us  stub...
HTML5    5
More than Markup• Rich media (<canvas>, <audio>, <video>)• Interactive <form> enhancements• APIs for application development
HTML5• Backwards and forward compatible• New and redefined semantic elements• Obsolete presentational elements• Flexible a...
Is it for you?
Simplified DOCTYPEBefore   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0   Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/   ...
Flexible Style• All coding styles are valid • Uppercase tag names • Optional quotes for attributes • Optional values for a...
Block-level LinksBefore   <h1><a href="/">Emily Lewis Design</a></h2>   <h2><a href="/">Beauty Isn’t Skin Deep</a></h2>   ...
Semantic Structure• <section>• <header>• <footer>• <nav>• <aside>• <article>
Site Layout
HTML5 Structure
Making the MoveBefore<div id="header">   <h1><a href="/">The Law Office of Jimbob Smith</a></h1>    <a href="/"><img src="...
Making the MoveAfter<header>  <a href="/">    <h1>The Law Office of Jimbob Smith</h1>    <img src="logo.png" alt="Jimbob L...
HTML5 Tips• Use as much or as little as you want• Be aware of browser limitations • display: block • document.createElemen...
More Meaning WithMicroformats
Microformats• HTML design patterns for describing  common content like: • People, organizations and places • Events • Hype...
Microformats Benefits• Semantics for machine readability• User experience enhancements• More meaningful search results & b...
hCardBefore   <dl>     <dt>Emily Lewis</dt>     <dd>      <ul>        <li><a href="http://www.ablognotlimited.com">   A Bl...
hCardAfter   <dl class="vcard">     <dt class="fn">Emily Lewis</dt>     <dd>      <ul>        <li><a href="http://www.ablo...
Downloadable vcard• H2VX Contacts Conversion Service  h2vx.com/vcf/• Operator add-on for Firefox  addons.mozilla.org/en-US...
HTML5 Likes Machine Readability Too Microdata
MicrodataBefore   <dl>      <dt><a href="http://ablognotlimited.com">Emily   Lewis</a></dt>      <dd>Web Designer</dd>    ...
MicrodataAfter   <dl itemscope itemtype="http://data-vocabulary.org/   Person">      <dt itemprop="name"><a href="http:// ...
To use or not ...• Yes, I’m biased• Not as many parsers available• More complex than microformats• You don’t have to choose
2 Stones, 1 Bird<dl class="vcard" itemscope itemtype="http://data-vocabulary.org/Person">   <dt class="fn" itemprop="name"...
ARIA Roles
ARIA• Set of guidelines from WAI for  accessible, rich internet applications• Includes Document Landmark Roles to  indicat...
Landmark Roles• role="banner"• role="navigation"    not needed on <nav>• role="main"• role="search"• role="article"• role=...
Adding RolesXHTML<div id="header" role="banner">   <h1><a href="/">The Law Office of Jimbob Smith</a></h1>    <a href="/">...
Adding RolesHTML5<header role="banner">  <a href="/">    <h1>The Law Office of Jimbob Smith</h1>    <img src="logo.png" al...
Going to 11• Use what works for you, your projects  and your clients (not “all or nothing”)• Experiment, test and decide f...
Resources                                  AKA Self-Pimpage• Meaningful Markup: POSH and Beyond  msdn.microsoft.com/en-us/...
Questions?
Thanks!emily@emilylewisdesign.com @emilylewis
Take Your Markup to 11
Take Your Markup to 11
Upcoming SlideShare
Loading in …5
×

Take Your Markup to 11

9,999 views

Published on

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

Published in: Technology

Take Your Markup to 11

  1. 11 markupTake your to Some rights reserved Denver HTML5 Users Group May 23, 2011
  2. Web Designer Writer Instructoremilylewisdesign.comCo-Founder & Co-Manager, Webuquerquewebuquerque.comAuthor, Microformats Made Simplemicroformatsmadesimple.comCo-author, HTML5 CookbookEmail: emily@emilylewisdesign.comBlog: ablognotlimited.comTwitter: @emilylewis
  3. Tonight, it’s all aboutMarkup
  4. ?
  5. Transforms Canvas GeolocationMultiple Backgrounds Web Storage Native Media Rounded Corners Offline Web Apps Transitions Gradients SVG
  6. JOB
  7. Good HTML• Foundation of today’s web• Can make a perfectly great web site with nothing else• Easy to learn & implement
  8. Great Markup• Semantics for machine readability• Accessible for all users• Development efficiencies• Syndication• SEO and findability• User experience enhancements
  9. http://www.flickr.com/photos/nickwheeleroz/2220008689/
  10. To reach this level of greatness, you have to Go to 11
  11. POSHPlain 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. 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 <blockquote> <p>I need me some indented text!</p> </blockquote>
  14. 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>POSH & CSS <p>I need me some indented text!</p> p:first-child {text-indent: 25px;}
  15. 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
  16. POSH Benefits• Web standards• Portability for devices• Common standard for teams• Easier troubleshooting & maintenance• More accessible• Leaner markup = lighter-weight pages
  17. *
  18. Flexibility vs. Pedantry• 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/
  19. HTML5 5
  20. More than Markup• Rich media (<canvas>, <audio>, <video>)• Interactive <form> enhancements• APIs for application development
  21. HTML5• Backwards and forward compatible• New and redefined semantic elements• Obsolete presentational elements• Flexible and simplified syntax
  22. Is it for you?
  23. Simplified DOCTYPEBefore <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd">Now <!DOCTYPE html>
  24. Flexible Style• All coding styles are valid • Uppercase tag names • Optional quotes for attributes • Optional values for attributes • Optional closed empty elements
  25. Block-level LinksBefore <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>
  26. Semantic Structure• <section>• <header>• <footer>• <nav>• <aside>• <article>
  27. Site Layout
  28. HTML5 Structure
  29. 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>
  30. 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>
  31. 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
  32. More Meaning WithMicroformats
  33. Microformats• HTML design patterns for describing common content like: • People, organizations and places • Events • Hyperlinks • Blog posts • Reviews
  34. 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
  35. hCardBefore <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>
  36. hCardAfter <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>
  37. 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
  38. HTML5 Likes Machine Readability Too Microdata
  39. MicrodataBefore <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>
  40. MicrodataAfter <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>
  41. To use or not ...• Yes, I’m biased• Not as many parsers available• More complex than microformats• You don’t have to choose
  42. 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" 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>
  43. ARIA Roles
  44. 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
  45. 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>
  46. 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>
  47. 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>
  48. 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
  49. 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
  50. Questions?
  51. Thanks!emily@emilylewisdesign.com @emilylewis

×