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
8. Good HTML
⢠Foundation of todayâs web
⢠Can make a perfectly great web site
with nothing else
⢠Easy to learn & implement
9. Great Markup
⢠Semantics for machine readability
⢠Accessible for all users
⢠Development efficiencies
⢠Syndication
⢠SEO and findability
⢠User experience enhancements
14. POSH
⢠Markup that has meaning
⢠Markup that describes the content itself,
not the presentation
⢠Elements used for their intended purpose*
⢠Valid*
15. 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>
16. 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;}
17. 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
18. POSH Benefits
⢠Web standards
⢠Portability for devices
⢠Common standard for teams
⢠Easier troubleshooting & maintenance
⢠More accessible
⢠Leaner markup = lighter-weight pages
20. 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/
22. More than Markup
⢠Rich media (<canvas>, <audio>, <video>)
⢠Interactive <form> enhancements
⢠APIs for application development
23. HTML5
⢠Backwards and forward compatible
⢠New and redefined semantic elements
⢠Obsolete presentational elements
⢠Flexible and simplified syntax
25. 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>
26. Flexible Style
⢠All coding styles are valid
⢠Uppercase tag names
⢠Optional quotes for attributes
⢠Optional values for attributes
⢠Optional closed empty elements
27. Block-level Links
Before
<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>
31. Making the Move
Before
<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>
33. 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
35. Microformats
⢠HTML design patterns for describing
common content like:
⢠People, organizations and places
⢠Events
⢠Hyperlinks
⢠Blog posts
⢠Reviews
36. 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
37. hCard
Before
<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>
38. hCard
After
<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>
39. 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
41. Microdata
Before
<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>
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. To use or not ...
⢠Yes, Iâm biased
⢠Not as many parsers available
⢠More complex than microformats
⢠You donât have to choose
44. 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>
46. 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
47. 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>
48. Adding Roles
XHTML
<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>
50. 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
51. 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