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/
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>
32. 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>
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>
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>
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