Your SlideShare is downloading. ×
0
Take Your Markup to Eleven
Take Your Markup to Eleven
Take Your Markup to Eleven
Take Your Markup to Eleven
Take Your Markup to Eleven
Take Your Markup to Eleven
Take Your Markup to Eleven
Take Your Markup to Eleven
Take Your Markup to Eleven
Take Your Markup to Eleven
Take Your Markup to Eleven
Take Your Markup to Eleven
Take Your Markup to Eleven
Take Your Markup to Eleven
Take Your Markup to Eleven
Take Your Markup to Eleven
Take Your Markup to Eleven
Take Your Markup to Eleven
Take Your Markup to Eleven
Take Your Markup to Eleven
Take Your Markup to Eleven
Take Your Markup to Eleven
Take Your Markup to Eleven
Take Your Markup to Eleven
Take Your Markup to Eleven
Take Your Markup to Eleven
Take Your Markup to Eleven
Take Your Markup to Eleven
Take Your Markup to Eleven
Take Your Markup to Eleven
Take Your Markup to Eleven
Take Your Markup to Eleven
Take Your Markup to Eleven
Take Your Markup to Eleven
Take Your Markup to Eleven
Take Your Markup to Eleven
Take Your Markup to Eleven
Take Your Markup to Eleven
Take Your Markup to Eleven
Take Your Markup to Eleven
Take Your Markup to Eleven
Take Your Markup to Eleven
Take Your Markup to Eleven
Take Your Markup to Eleven
Take Your Markup to Eleven
Take Your Markup to Eleven
Take Your Markup to Eleven
Take Your Markup to Eleven
Take Your Markup to Eleven
Take Your Markup to Eleven
Take Your Markup to Eleven
Take Your Markup to Eleven
Take Your Markup to Eleven
Take Your Markup to Eleven
Take Your Markup to Eleven
Take Your Markup to Eleven
Take Your Markup to Eleven
Take Your Markup to Eleven
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Take Your Markup to Eleven

33,319

Published on

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

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

Published in: Technology, Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
33,319
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Take your markup Some rights reserved to 11
  • 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: Blog: Twitter: emily@emilylewisdesign.com ablognotlimited.com @emilylewis
  • 3. emilylewisdesign.com/TakeYourMarkupTo11
  • 4. Source: http://youtu.be/JJj_WHCdLtQ?t=3m31s “ 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
  • 5. Don’t Be Average
  • 6. C++ Transforms PHP Canvas Geolocation Multiple Backgrounds Web Storage Native Media Java Ruby JavaScript Rounded Corners Offline Web Apps Transitions Gradients Python SVG Objective-C
  • 7. Source: http://youtu.be/EbVKWCpNFhY
  • 8. Source: http://youtu.be/EbVKWCpNFhY
  • 9. 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
  • 10. POSH Plain Old Semantic HTML
  • 11. POSH • • Markup that has meaning • • Elements used for their intended purpose* Markup that describes the content itself, not the presentation Valid*
  • 12. POSH Benefits • • • • • • Web standards Portability for devices Common standard for teams Easier troubleshooting & maintenance More accessible Leaner markup = lighter-weight pages
  • 13. Not POSH <table> ! <tr> ! ! <td><a <td><a <td><a <td><a ! </tr> </table> href="/">Home</a></td> href="/products/">Products</a></td> href="/services/">Services</a></td> href="/about/">About</a></td> Also Not POSH <blockquote> <p>I need me some indented text!</p> </blockquote>
  • 14. POSH FTW <ul> ! <li><a <li><a <li><a <li><a </ul> href="/">Home</a></li> href="/products/">Products</a></li> href="/services/">Services</a></li> href="/about/">About</a></li> POSH & CSS <p>I need me some indented text!</p> p:first-child {text-indent: 25px;}
  • 15. POSH Basics • Use <h1>-<h6> for headings & to define content outline • • • Use <table> for tabular data, not layout • Semantic class and id naming List elements (<ol>, <ul>, <dl>) for lists Drop presentational elements (<u>, <big>, <center>) in favor of CSS
  • 16. 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/
  • 17. 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/
  • 18. HTML5 5
  • 19. HTML5 • • • • Backwards and forward compatible New and redefined semantic elements Obsolete presentational elements Flexible and simplified syntax
  • 20. Simplified DOCTYPE Before <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd"> Now <!DOCTYPE html>
  • 21. Flexible Style • All coding styles are valid • • • • Uppercase tag names Optional quotes for attributes Optional values for attributes Optional closed empty elements
  • 22. Block-level Links Before <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> Now <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>
  • 23. Semantic Structure • • • • <section> • <nav> <header> • <aside> <footer> • <article> <main> • <figure> ? HTML5 Sectioning Element Flowchart html5doctor.com/resources/#flowchart
  • 24. Site Layout
  • 25. HTML5 Structure
  • 26. Making the Move Before <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>
  • 27. Making the Move After <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>
  • 28. Making the Move After <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>
  • 29. 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
  • 30. 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
  • 31. More Meaning With Microformats
  • 32. Microformats • HTML design patterns for describing common content like: • • • • • People, organizations and places Events Hyperlinks Blog posts Reviews
  • 33. Microformats Benefits • • Semantics for machine readability More meaningful search results & better findability
  • 34. 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
  • 35. hCard Before <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>
  • 36. hCard After <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>
  • 37. hCard After <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>
  • 38. Downloadable vcard • H2VX Contacts Conversion Service • Operator add-on for Firefox • Tails Export add-on for Firefox • Microformats extension for Chrome • SafariMicroformats plugin for Safari h2vx.com/vcf/ addons.mozilla.org/en-US/firefox/addon/operator/ addons.mozilla.org/en-US/firefox/addon/tails-export/ chrome.google.com/extensions/detail/oalbifknmclbnmjlljdemhjjlkmppjjl zappatic.net/projects/safarimicroformats
  • 39. 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/
  • 40. HTML5 Likes Machine Readability Too Microdata
  • 41. Microdata Before <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>
  • 42. Microdata After <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>
  • 43. Should you use microdata? • Availability and quality of parsers, tools, resources • • More complex than microformats schema.org • • Supported by major search engines Narrow vocabularies
  • 44. 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
  • 45. ARIA Landmarks Accessible Rich Internet Applications
  • 46. 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
  • 47. Landmark Roles • • • • • • • • role="banner" role="navigation" role="main" role="search" role="form" role="complementary" role="contentinfo" role="application"
  • 48. Landmark Roles • • • • • • • • role="banner" role="navigation" role="main" role="search" role="form" role="complementary" role="contentinfo" role="application"
  • 49. Landmark Roles • • • • • • • • role="banner" role="navigation" role="main" overlap with <nav> overlap with <main> role="search" role="form" role="complementary" role="contentinfo" role="application" overlap <aside> overlap <footer>
  • 50. Adding Roles XHTML <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>
  • 51. Adding Roles HTML5 <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>
  • 52. Adding Roles HTML5 <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>
  • 53. 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
  • 54. 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
  • 55. “ Quality is never an accident. It is always the result of intelligent effort. - John Ruskin ”
  • 56. Questions? emily@emilylewisdesign.com @emilylewis emilylewisdesign.com/TakeYourMarkupTo11/

×