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

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Take Your Markup to Eleven

Similar a Take Your Markup to Eleven (20)

Más de Emily Lewis

Más de Emily Lewis (14)

Último

Último (20)

Take Your Markup to Eleven