Take Your Markup to Eleven

Some rights reserved Take your markupto 11 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: [email protected] Blog: ablognotlimited.com Twitter: @emilylewis

Markup Tonight, it’s all about

Offline Web Apps

Offline Web Apps Transforms

Offline Web Apps Transforms Native Media

Offline Web Apps Transforms Canvas Native Media

Offline Web Apps Transforms Gradients Canvas Native Media

Offline Web Apps Transforms Multiple Backgrounds Gradients Canvas Native Media

Web Storage Offline Web Apps Transforms Multiple Backgrounds Gradients Canvas
Native Media

Web Storage Offline Web Apps Transforms Multiple Backgrounds Gradients SVG
Canvas Native Media

Web Storage Offline Web Apps Transforms Transitions Multiple Backgrounds Gradients
SVG Canvas Native Media

Web Storage Geolocation Offline Web Apps Transforms Transitions Multiple Backgrounds
Gradients SVG Canvas Native Media

Web Storage Geolocation Offline Web Apps Transforms Transitions Multiple Backgrounds
Gradients Rounded Corners SVG Canvas Native Media

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/

Go to 11 To reach this level of greatness, you
have to

POSH Plain Old Semantic HTML

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> <blockquote> <p>I need me some indented text!</p> </blockquote> Also Not POSH

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

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

• 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/ Flexibility vs. Pedantry

HTML5 5

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

Is it for you?

Simplified DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/
xhtml1-strict.dtd"> <!DOCTYPE html> Before Now

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 <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> <a href="/"> <h1>Emily Lewis Design</h1> <h2>Beauty Isn’t Skin Deep</h2> <img src="logo.png" alt="Emily Lewis Design" /> </a> Before Now

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

Site Layout

HTML5 Structure

Making the Move <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> Before

Making the Move <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> After

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

Microformats More Meaning With

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 <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:[email protected]"> [email protected]</a></li> </ul> </dd> </dl> Before

hCard <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:[email protected]" class="email">[email protected]</a></li> </ul> </dd> </dl> After

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

Microdata HTML5 Likes Machine Readability Too

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

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

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 Roles

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" • role="main" • role="search"
• role="article" • role="complementary" • role="contentinfo" not needed on <nav> not needed on <aside> not needed on <footer>

Adding Roles <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"> <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> XHTML

Adding Roles <header role="banner"> <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> HTML5

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

Questions?

Thanks! [email protected] @emilylewis http://slidesha.re/lZpo91

Take Your Markup to Eleven

Take Your Markup to Eleven

More Decks by Emily Lewis

Other Decks in Technology

Featured

Transcript