You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011
Upcoming SlideShare
Loading in...5

You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011



What new semantics does HTML5 bring us? Why? Are they enough? What more could we do with? Do semantics matter any more (tl;dr:) yes. ...

What new semantics does HTML5 bring us? Why? Are they enough? What more could we do with? Do semantics matter any more (tl;dr:) yes.

Video and transcript at



Total Views
Views on SlideShare
Embed Views



21 Embeds 2,145 1190 339 199 91 65 60 52 45 28 25 23 9 4 3 3 3 2 1 1 1 1


Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011 You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011 Presentation Transcript

  • HTML5 SemanticsBruce Lawson,Fronteers, 6 October 2011Video and transcript available at and other resources at
  • You too can be abedwetting ant-fucker
  • hair-splitting [ˈhɛəˌsplɪtɪŋ] (noun) the making of petty distinctions (adj)occupied with or based on petty distinctions
  • miereneuker
  • hare-splitter
  • 30 new elements
  • Some presentational elements are gone <center> <font> <big> Also align on <img> <table> etc background on <body> bgcolor on <table> etc
  • Some presentational elements redefined to have semantics
  • The u element represents a span of text with an unarticulated, though explicitly rendered, non-textualannotation, such as labeling the text as being a propername in Chinese text (a Chinese proper name mark), or labeling the text as being misspelt.
  • Sexy new woo! semantics<video> <audio> <canvas> <source> <track>
  • Semantics for 118n
  • <ruby> 日本 </ruby>
  • <ruby> 日本<rt> にほん </rt> </ruby>
  • <ruby> 日本 <rp>(</rp><rt> にほん </rt> <rp>)</rp> </ruby>
  • <bdi>
  • <p>Aroma - 3 reviews</p><p>RTL LETTERS - 5 reviews</p>
  • <p>Aroma - 3 reviews</p><p><bdi>RTL LETTERS</bdi> - 5 reviews</p>, follow @r12a
  • <time>
  • <time datetime=2011-10-06>Today</time> <time datetime=2011-10-06T13:40Z01.00>Now</time> <time datetime=2011-11-13>My birthday</time><time datetime=-54-03-15>Julius Caesar murdered</time> <time datetime=1886-05>May 1886</time>
  • <figure>
  • HTML3 <FIG><FIG SRC="nicodamus.jpeg"> <CAPTION>Ground dweller: <I>Nicodamus bicolor</I> builds silk snares</CAPTION> <P>A small hairy spider light fleshy red in color with abrown abdomen. <CREDIT>J. A. L. Cooke/OSF</CREDIT></FIG>
  • HTML5 <figure><figure><img src=bruce-remy.png><figcaption>Bruce and Remy welcome questions<small>Photo &copy; Bruces mum</small></figcaption></figure>
  • <details>
  • <details><summary>Click here!</summary><p>This will be revealed</p></details>
  • Structural semantics
  • Top 20 class names 1. footer 11. button 2. menu 12. main 3. style1 13. style34. msonormal 14. small 5. text 15. nav 6. content 16. clear 7. title 17. search 8. style2 18. style4 9. header 19. logo10. copyright 20. body
  • Top 20 id names 1. footer 11. search 2. content 12. nav 3. header 13. wrapper 4. logo 14. top 5. container 15. table2 6. main 16. layer2 7. table1 17. sidebar 8. menu 18. image1 9. layer1 19. banner10. autonumber1 20. navigation
  • <header> and <footer> or similar elements are almost certainly going to be defined at some point, along with <content> (for the main body of the page), <entry> or <post> or <article> to refer to a unit of textbigger than a section but smaller than a page, <sidebar> to mean a, well, side bar, <note> to mean a note... and so forth. Suggestions welcome. Well probably keep it to a minimum though. The idea is just to relieve the most common pseudo-semantic uses of <div>.
  • <content> ?
  • Note: there isnt a one-to-one correspondence with role= banner / <header>, role=contentinfo / <footer>
  • Biscuit and Chica photograph by Brittany Shaw. All rights reserved. Used with permission
  • Sectioning content<section>, <article>, <nav>, <aside>
  • <article> <h1>Ant fucking for beginners</h1> <p>Rule One: never fuck an elephant. It is not a type of ant and will not welcome your advances.</p><article>
  • <header> <h1>Exciting blog</h1></header><section> <h2>Todays articles</h2> <article>... </article> <article>... </article></section>
  • In HTML5, these are all equivalent<h1>Todays top stories</h1><article> <h3>Dog bites man</h3> ...<article>
  • <h3>Todays top stories</h3><article> <h6>Dog bites man</h6> ...<article>
  • <h6>Todays top stories</h6><article> <h2>Dog bites man</h2> ...<article>
  • “Sections may contain headings of any rank, but authorsare strongly encouraged to either use only h1 elements, orto use elements of the appropriate rank for the sectionsnesting level.”<h1>Todays top stories</h1> <article> <h1>Dog bites man</h1> ... <article>
  • Whats the difference between <section> and <article>?
  • <section> divides something into parts <article> is a discrete entity
  • Are the new semantics specified enough?
  • "The header element represents a group of introductory or navigational aids.""A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like".
  • As <CITE>Harry S. Truman</CITE> said… More information can be found in <CITE>[ISO-0000]</CITE>
  • The Golden Rule:
  • The Golden Rule:There is no Golden Rule
  • Are semantics teleological?Belief in or the perception of purposeful development toward an end
  • Do we have the right semantics?
  • "HTML6 is project of novations, allowing to write broken line from any to any HTML-element, to refer to place without attribute "id" and "name", to displaytable 3x100 of DBMS as table 10x10 of browser, to display hyper-cube as table, to hide and show HTML-elements... HTML6 enters new elements, which send data like form, but automatically: to browse column of database and to browse tree of database. And many others." Dmitry Turin, HTML 6.8.3
  • HTML3The BANNER element is used for corporate logos, navigation aids, disclaimers and other information which shouldnt be scrolled with the rest of the document. It provides an alternative to using the LINK element in the document head to reference an externally defined banner. The NOTE element is designed for use as admonishments such as notes, cautions or warnings, as commonly used in technical documentation. The <PERSON> element is used for names of people to allow these to be extracted automatically by indexing programs.
  • <time><person><location>
  • Do we need a <login> element? A <share> element?
  • <picture> <source src=small.png media="max-width: 380px"> <source src=medium.png media="max-width: 800px"> <source src=vector.svg media="max-width: 800px"> <img src=medium.png alt=blah></picture>
  • Do semantics matter, anyway?
  • <DIV id=:rk class="J-K-I J-J5-Ji L3 J-K-I-JO" tabIndex=0unselectable="on" closure_hashCode_l16mgm="182" act=""> <DIV class="J-J5-Ji J-K-I-Kv-H" unselectable="on"> <DIV class="J-J5-Ji J-K-I-J6-H" unselectable="on"> <DIV class=J-K-I-KC unselectable="on"> <DIV class=J-K-I-K9-KP unselectable="on">&nbsp;</DIV> <DIV class=J-K-I-Jz unselectable="on">Search Mail</DIV> </DIV></DIV></DIV></DIV>
  • Write whatever the fuck you want with some WAI-ARIA sugar on top is in some scenarios the only thing what works right now. I do not believe that means we should just let it run its course. The realsolution to making a button implemented using five div elements andsome scripting accessible is not WAI-ARIA. It is to drastically improve the styling capabilities of <input type="button">. <cite>Anne van Kesteren</cite>
  • <SPAN id=:rg class=toxOdd role=link tabIndex=0 closure_hashCode_l16mgm="177"> Create a filter</SPAN>
  • Pretty much everyone in the Web community agrees that “semantics areyummy, and will get you cookies”, and that’s probably true. But once youstart digging a little bit further, it becomes clear that very few people can actually articulate a reason why. So before we all go another round on this, I have to ask: what’s it you wanna do with them darn semantics?
  • <body></body>
  • Bruce Lawson
  • ThanksRichard Ishida for <bdi> screenshotsDaniel Davis for <ruby> screenshots Michael Vacik for sexy ant cartoon