Take Your Markup to 11

11
markup
Take your
to

Some rights reserved Denver HTML5 Users Group May 23, 2011

Web Designer Writer Instructor
emilylewisdesign.com

Co-Founder & Co-Manager, Webuquerque
webuquerque.com

Author, Microformats Made Simple
microformatsmadesimple.com

Co-author, HTML5 Cookbook

Email: emily@emilylewisdesign.com
Blog: ablognotlimited.com
Twitter: @emilylewis

Tonight, it’s all about

Markup

Transforms Canvas
Geolocation
Multiple Backgrounds
Web Storage
Native Media Rounded Corners

Offline Web Apps
Transitions
Gradients SVG

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 findability
• User experience enhancements

http://www.flickr.com/photos/nickwheeleroz/2220008689/

To reach this level of greatness, you have to

Go to 11

POSH
• Markup that has meaning
• Markup that describes the content itself,
not the presentation
• Elements used for their intended purpose*
• Valid*

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>

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;}

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

POSH Benefits
• Web standards
• Portability for devices
• Common standard for teams
• Easier troubleshooting & maintenance
• More accessible
• Leaner markup = lighter-weight pages

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/

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 and simplified syntax

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>

Flexible Style
• All coding styles are valid
• Uppercase tag names
• Optional quotes for attributes
• Optional values for attributes
• Optional closed empty elements

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>

Semantic Structure
• <section>
• <header>
• <footer>
• <nav>
• <aside>
• <article>

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>

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>
</ul>
</nav>

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

More Meaning With

Microformats

Microformats
• HTML design patterns for describing
common content like:
• People, organizations and places
• Events
• Hyperlinks
• Blog posts
• Reviews

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

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>

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>

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

HTML5 Likes Machine Readability Too

Microdata

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>

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>

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"><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>

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

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>

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">
</ul>

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>
</ul>
</nav>

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

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

Thanks!
emily@emilylewisdesign.com @emilylewis

Take Your Markup to 11

More Related Content

What's hot

Similar to Take Your Markup to 11

More from Emily Lewis

Recently uploaded

Take Your Markup to 11