Take Your Markup to Eleven

Take your

markup
Some rights reserved

to

11

Web Designer

Web Developer

emilylewisdesign.com

Author, Microformats Made Simple
microformatsmadesimple.com

Co-author, HTML5 Cookbook
shop.oreilly.com/product/0636920016038.do

Managing Editor, Web Standards Sherpa
webstandardssherpa.com

Co-host, CTRL+CLICK CAST
ctrlclickcast.com

Email:
Blog:
Twitter:

emily@emilylewisdesign.com
ablognotlimited.com
@emilylewis

emilylewisdesign.com/TakeYourMarkupTo11

Source: http://youtu.be/JJj_WHCdLtQ?t=3m31s

“

If you can ﬁgure out how to do
something interesting or unique or
noteworthy, people will ﬁnd you and
pay you extra because you're not like
everyone else ... you're different.
- Seth Godin

C++

Transforms

PHP

Canvas

Geolocation
Multiple Backgrounds
Web Storage
Native Media
Java

Ruby

JavaScript

Rounded Corners

Ofﬂine Web Apps
Transitions

Gradients
Python

SVG

Objective-C

Source: http://youtu.be/EbVKWCpNFhY

Markup, One Louder
•
•
•
•
•
•
•

Semantics for machine readability
Accessible for all users
Development efﬁciencies
Syndication
SEO and ﬁndability
User experience enhancements
Solid foundation for advanced techniques

POSH
•
•

Markup that has meaning

•
•

Elements used for their intended purpose*

Markup that describes the content itself, not the
presentation

Valid*

POSH Benefits
•
•
•
•
•
•

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

Not POSH
<table>
! <tr>
! ! <td><a
<td><a
<td><a
<td><a
! </tr>
</table>

href="/">Home</a></td>
href="/products/">Products</a></td>
href="/services/">Services</a></td>
href="/about/">About</a></td>

Also Not POSH
<blockquote>
<p>I need me some indented text!</p>
</blockquote>

POSH FTW
<ul>
! <li><a
<li><a
<li><a
<li><a
</ul>

href="/">Home</a></li>
href="/products/">Products</a></li>
href="/services/">Services</a></li>
href="/about/">About</a></li>

POSH & CSS
<p>I need me some indented text!</p>
p:first-child {text-indent: 25px;}

POSH Basics
•

Use <h1>-<h6> for headings & to deﬁne
content outline

•
•
•

Use <table> for tabular data, not layout

•

Semantic class and id naming

List elements (<ol>, <ul>, <dl>) for lists
Drop presentational elements (<u>, <big>,
<center>) in favor of CSS

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/

POSH Resources
• Keep it Clean: Your Blog and Clean HTML
webteacher.ws/2012/12/03/keep-it-clean-your-blog-and-clean-html/

• POSH - Plain Old Semantic HTML
456bereastreet.com/archive/200711/posh_plain_old_semantic_html/

• Meaningful Markup: POSH and Beyond
msdn.microsoft.com/en-us/magazine/ff770012.aspx

• The Beauty of Semantic Markup
ablognotlimited.com/articles/tag/Beauty+of+Semantic+Markup+series/

• Our Pointless Pursuit of Semantic Value
coding.smashingmagazine.com/2011/11/11/our-pointless-pursuit-of-semantic-value/
comment-page-1/

HTML5
•
•
•
•

Backwards and forward compatible
New and redeﬁned semantic elements
Obsolete presentational elements
Flexible and simpliﬁed 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></h1>
<p class=”tagline”><a href="/">Beauty Isn’t Skin
Deep</a></p>
<a href="/"><img src="logo.png" alt="Emily Lewis
Design" /></a>

Now
<a href="/">
<h1>Emily Lewis Design</h1>
<p class=”tagline”>Beauty Isn’t Skin Deep</p>
<img src="logo.png" alt="Emily Lewis Design" />
</a>

Semantic Structure
•
•
•
•

<section>

• <nav>

<header>

• <aside>

<footer>

• <article>

<main>

• <figure>

?

HTML5 Sectioning Element Flowchart
html5doctor.com/resources/#ﬂowchart

Making the Move
Before
<div class="header">
<h1><a href="/">The Law Office of Jimbob Smith</a></h1>
<a href="/"><img src="logo.png" alt="Jimbob Legal"/></a>
</div>
<ul class="primary-nav">
<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>
<nav>
<ul>
</ul>
</nav>
</header>

Making the Move
After
<header class="header">
<a href="/">
</a>
<nav>
<ul class="header">
</ul>
</nav>
</header>

HTML5 Tips
•
•

Use as much or as little as you want
Be aware of browser limitations
•

display: block

•

document.createElement
czonline.net/blog/2011/03/22/using-html5-semantic-elements-today/

•
•
•

HTML5 Enabling Script
remysharp.com/2009/01/07/html5-enabling-script/

Working Draft, “living standard”
Experiment and educate

HTML5 Resources
• HTML5 for Web Designers
www.abookapart.com/products/html5-for-web-designers

• HTML5 Doctor
html5doctor.com

• The Importance of HTML5 Sectioning Elements
coding.smashingmagazine.com/2013/01/18/the-importance-of-sections/

• Further examples on using the main element
iandevlin.com/blog/2013/02/html5/further-examples-on-using-the-main-element

• The Truth About HTML5
truthabouthtml5.com

More Meaning With

Microformats

Microformats
•

HTML design patterns for describing common
content like:

•
•
•
•
•

People, organizations and places
Events
Hyperlinks
Blog posts
Reviews

Microformats Benefits
•
•

More meaningful search results & better ﬁndability

Microformats Benefits
•
•
•
•
•
•
•

More meaningful search results & better ﬁndability
User experience enhancements
Encourages consistency and standards
Minimal development effort
No need for software or special technologies
Enables sharing and re-use of your web content
elsewhere

hCard
Before
<dl>
<dt>Emily Lewis</dt>
  <dd>
   <ul>
     <li><a href="http://emilylewisdesign.com">
Emily Lewis Design</a></li>
      <li>Albuquerque, <abbr title="New Mexico">NM</
abbr> 87107</li>
     <li><a href="mailto:emily@emilylewisdesign.com">
emily@emilylewisdesign.com</a></li>
   </ul>
</dd>
</dl>

hCard
After
<dl class="vcard">
<dt class="fn">Emily Lewis</dt>
  <dd>
   <ul>
     <li><a href="http://emilylewisdesign.com"
class="url">Emily Lewis Design</a></li>
      <li class="adr"><span
class="locality">Albuquerque
</span>, <abbr title="New Mexico" class="region">NM</
abbr> <span class="postal-code">87107</span></li>
     <li><a href="mailto:emily@emilylewisdesign.com"
class="email">emily@emilylewisdesign.com</a></li>
   </ul>
</dd>
</dl>

Downloadable vcard
•

H2VX Contacts Conversion Service

•

Operator add-on for Firefox

•

Tails Export add-on for Firefox

•

Microformats extension for Chrome

•

SafariMicroformats plugin for Safari

h2vx.com/vcf/

addons.mozilla.org/en-US/ﬁrefox/addon/operator/

addons.mozilla.org/en-US/ﬁrefox/addon/tails-export/

chrome.google.com/extensions/detail/oalbifknmclbnmjlljdemhjjlkmppjjl

zappatic.net/projects/safarimicroformats

Microformats Resources
• microformats.org
• microformats2
microformats.org/wiki/microformats2

• microformats2 & HTML5 - The Evolution of Web Data
tantek.com/presentations/2013/04/microformats2/

• Extending HTML5 - Microformats
html5doctor.com/microformats/

• Getting Semantic With Microformats
ablognotlimited.com/articles/tag/Getting+Semantic+series/

HTML5 Likes Machine Readability Too

Microdata

Microdata
Before
<dl>
   <dt><a href="http://emilylewisdesign.com">Emily
Lewis</a></dt>
   <dd>Web Designer</dd>
   <dd>Albuquerque, <abbr title="New Mexico"
class="region">NM</abbr>87107</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>

Should you use microdata?
•

Availability and quality of parsers, tools,
resources

•
•

More complex than microformats
schema.org

•
•

Supported by major search engines
Narrow vocabularies

Microdata Resources
• Schema-org, microformats and more science please
fberriman.com/2011/12/01/schema-org-microformats-and-more-science-please/

• Future-Ready Content
alistapart.com/article/future-ready-content

• Extending HTML5 - Microdata
html5doctor.com/microdata/

• Microformats, HTML5 and Microdata
ablognotlimited.com/articles/microformats-html5-microdata

ARIA Landmarks
Accessible Rich Internet Applications

ARIA
•

Set of guidelines from WAI for accessible, rich
internet applications

•

Includes Landmark Roles to indicate document
structure and aid navigation

•

Attribute Selectors FTW!
msdn.microsoft.com/en-us/magazine/gg619394.aspx

Landmark Roles
•
•
•
•
•
•
•
•

role="banner"
role="navigation"
role="main"
role="search"
role="form"
role="complementary"
role="contentinfo"
role="application"

Landmark Roles
•
•
•
•
•
•
•
•

role="banner"
role="navigation"
role="main"

overlap with <nav>
overlap with <main>

role="search"
role="form"
role="complementary"
role="contentinfo"
role="application"

overlap <aside>

overlap <footer>

Adding Roles
XHTML
<div class="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="/">
</a>
</header>
<nav role="navigation">
<ul>
</ul>
</nav>

Adding Roles
HTML5
<header role="banner">
<a href="/">
</a>
</header>
<nav>
<ul>
</ul>
</nav>

ARIA Resources
• ARIA Gone Wild
slideshare.net/jared_w_smith/aria-gone-wild

• Using WAI-ARIA Landmarks – 2013
blog.paciellogroup.com/2013/02/using-wai-aria-landmarks-2013/

• Using WAI-ARIA in HTML
w3.org/TR/2013/WD-aria-in-html-20130214/

• Web Accessibility & WAI-ARIA Primer
msdn.microsoft.com/en-us/magazine/ff743762.aspx

Going to 11
• Use what works for you, your projects and your
clients

• Stay up-to-date on changes
• Love your craft
• Question and be ﬂexible
• Experiment, test and decide for yourself

“

Quality is never an accident.
It is always the result of intelligent effort.
- John Ruskin

”

Questions?
emily@emilylewisdesign.com

@emilylewis

emilylewisdesign.com/TakeYourMarkupTo11/

Take Your Markup to Eleven

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Take Your Markup to Eleven

Similar to Take Your Markup to Eleven (20)

More from Emily Lewis

More from Emily Lewis (14)

Recently uploaded

Recently uploaded (20)

Take Your Markup to Eleven