Presentation for Webuquerque's February 2011 event discusses advanced HTML techniques.
Focuses, specifically, on semantic markup (POSH), new HTML5 structural elements, microformats, microdata and ARIA landmark roles.
3. HTML is awesome
• Foundation of today’s web
• Can make a perfectly great web site
with nothing else
• Valid http://validator.w3.org/
• Comparatively easy to learn &
implement
5. HTML Can be awesomer
• Semantics for machine readability
• Accessible for all users
• Development efficiencies
• Syndication
• SEO and findability
• User experience enhancements
6. To reach this level of awesome, you have to go
One Louder
9. POSH Is
• Markup that has meaning
• Markup that describes the content
itself, not the presentation
• Elements used for their intended
purpose
10. POSH BenefiTs
• Web standards
• Portability for devices
• Common standard for teams
• Easier troubleshooting & maintenance
• More accessible
• Leaner markup = lighter weight pages
11. 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
12. 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
<div>
<p><a href="/">Home</a></p>
<p><a href="/products/">Products</a></p>
<p><a href="/services/">Services</a></p>
<p><a href="/about/">About</a></p>
</div>
15. HTML5 Is More Than Markup
• Rich media (<canvas>, <audio>, <video>)
• Interactive <form> enhancements
• APIs for application development
16. HTML5 Is
• Backwards and forward compatible
• New semantic elements
• Obsolete presentational elements
• Flexible and simplified syntax
But is it for you?
17. DOCTYPE FLExible SynTaX
Before
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/
xhtml1-strict.dtd">
Now
<!DOCTYPE html>
18. Style FLExible SynTaX
• All coding styles are valid
• Uppercase tag names
• Optional quotes for attributes
• Optional values for attributes
• Optional closed empty elements
19. Links & Block Content
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>
23. 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>
24. Making the Move
After
<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>
25. HTML5 Tips
• Use as much or as little as you want
• Be aware of browser limitations
• display: block
• document.createElement
• Remember it is a Working Draft (“living
standard”)
• Experiment and educate
27. Microformats Are
• HTML design patterns for describing
common content like:
• People, organizations and places
• Events
• Hyperlinks
• Blog posts
• Reviews
28. Microformats BENEFITS
• Semantics
• User experience enhancements
• More meaningful search results &
better findability
• Encourages consistency and standards
• Minimal development effort
• No need for software or special
technologies
29. hCard COnTAcT Info
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>
30. hCard COnTAcT Info
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>
31. hCard DIY Demos
• Downloadable business card
• H2VX Contacts Conversion Service
• Operator add-on for Firefox
• Tails Export Add-on for Firefox
• Michromeformats extension for
Chrome
• SafariMicroformats plug-in for Safari
38. ARIA Is
• Set of guidelines from WAI for
accessible, rich internet applications
• Includes Document Landmark Roles to
indicate document structure and aid
navigation
39. 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>
42. Going to eleven
• 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
43. Resources and self pimpage
• Meaningful Markup: POSH and Beyond
• The Beauty of Semantic Markup series
• Getting Semantic With Microformats
series
• Web Accessibility & WAI-ARIA Primer
• Microformats, HTML5 and Microdata
• Using HTML5’s Semantic Tags Today