Take Your Markup to Eleven

markup
Take your
to

Some rights reserved February 2, 2011 Webuquerque

Freelance Web Designer
http://emilylewisdesign.com

Webuquerque Co-Founder & Co-Manager
http://webuquerque.com

Author, Microformats Made Simple
http://microformatsmadesimple.com

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

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

HTML Can be awesomer
• Semantics for machine readability
• Accessible for all users
• Development efficiencies
• Syndication
• SEO and findability
• User experience enhancements

To reach this level of awesome, you have to go

One Louder

Plain Old Semantic Markup

POSH

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

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

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

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>

POSH FTW
<ul id="nav">

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

The “Future” Is Now

HTML5

HTML5 Is More Than Markup
• Rich media (<canvas>, <audio>, <video>)
• Interactive <form> enhancements
• APIs for application development

HTML5 Is
• Backwards and forward compatible
• New semantic elements
• Obsolete presentational elements
• Flexible and simplified syntax
But is it for you?

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>

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

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>

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
• Remember it is a Working Draft (“living
standard”)
• Experiment and educate

More Meaning With

Microformats

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

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

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>

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>

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

HTML5 Likes Machine Readability Too

Microdata

Microdata COnTAcT Info
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 COnTAcT Info
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>

Microdata TO use or NoTt
• Yes, I’m biased
• Not as many parsers available
• It is a bit more complex than
microformats
• You don’t have to choose

Two Stones, One 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 Is
• Set of guidelines from WAI for
accessible, rich internet applications
• Includes Document Landmark Roles to
indicate document structure and aid
navigation

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

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

Thanks!
P.S. I’d love your feedback!
http://speakerrate.com/talks/5471-take-your-markup-to-eleven

Take Your Markup to Eleven

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (14)

More from Emily Lewis

More from Emily Lewis (10)

Recently uploaded

Recently uploaded (20)

Take Your Markup to Eleven