Take Your Markup to 11

Some rights reserved markup 11 to Take your

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: [email protected] Blog: ablognotlimited.com Twitter: @emilylewis

emilylewisdesign.com/TakeYourMarkupTo11

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 “ Source: http://youtu.be/JJj_WHCdLtQ?t=3m31s

Don’t Be Average

Web Storage Geolocation Ofﬂine Web Apps Transforms Transitions Multiple Backgrounds
Gradients Rounded Corners SVG Canvas Native Media PHP Objective-C C++ Python Ruby Java JavaScript

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

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 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 Basics • Use <h1>-<h6> for headings & to deﬁne
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

• 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

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 5

HTML5 • Backwards and forward compatible • New and redeﬁned
semantic elements • Obsolete presentational elements • Flexible and simpliﬁed syntax

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

Semantic Structure • <section> • <header> • <footer> • <main>
• <nav> • <aside> • <article> • <figure> ? HTML5 Sectioning Element Flowchart html5doctor.com/resources/#ﬂowchart

Site Layout

HTML5 Structure

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

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

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

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

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 • More meaningful
search results & better ﬁndability

Microformats Benefits • Semantics for machine readability • 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 <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:[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://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:[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/ﬁrefox/addon/operator/ • Tails Export add-on for Firefox addons.mozilla.org/en-US/ﬁrefox/addon/tails-export/ • Microformats extension for Chrome chrome.google.com/extensions/detail/oalbifknmclbnmjlljdemhjjlkmppjjl • SafariMicroformats plugin for Safari 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/

Microdata HTML5 Likes Machine Readability Too

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

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" • role="search"
• role="form" • role="complementary" • role="contentinfo" • role="application" overlap with <nav> overlap <aside> overlap <footer> overlap with <main>

Adding Roles <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"> <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 role="navigation"> <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

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

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? [email protected] @emilylewis emilylewisdesign.com/TakeYourMarkupTo11/

Take Your Markup to 11

Take Your Markup to 11

More Decks by Emily Lewis

Other Decks in Technology

Featured

Transcript