Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
HTML5 Semantics
Bruce Lawson,
Fronteers, 6 October 2011

Video and transcript available at
http://fronteers.nl/congres/201...
You too can be a
bedwetting ant-fucker
http://www.eod.com/devil/archive/web_standards.html
hair-splitting [ˈhɛəˌsplɪtɪŋ]
                    (noun)
      the making of petty distinctions
                     (adj)...
miereneuker
hare-splitter
30 new elements
Some presentational elements are gone

       <center> <font> <big>

    Also align on <img> <table> etc
         backgrou...
Some presentational elements redefined to
            have semantics



       http://www.w3.org/TR/html5-diff/#changed-el...
The u element represents a span of text with an
 unarticulated, though explicitly rendered, non-textual
annotation, such a...
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>
http://my.opera.com/tagawa/blog/the-html5-ruby-element-in-words-of-one-syllable-or-less
<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>




        rishida.net/blog/?p=564, 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...
<figure>
HTML3 <FIG>
<FIG SRC="nicodamus.jpeg">
 <CAPTION>Ground dweller: <I>Nicodamus bicolor</I>
 builds silk snares</CAPTION>
 <...
HTML5 <figure>

<figure>
<img src=bruce-remy.png>
<figcaption>Bruce and Remy welcome questions
<small>Photo &copy; Bruce's...
<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                               ...
Top 20 id names
    1. footer                                        11. search
   2. content                             ...
<header> and <footer> or similar elements are almost certainly going
 to be defined at some point, along with <content> (f...
<content> ?
Note: there isn't a one-to-one correspondence with
              role= banner / <header>,
             role=contentinfo / ...
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 wil...
<header>
  <h1>Exciting blog</h1>
</header>
<section>
  <h2>Today's articles</h2>

 <article>... </article>
 <article>... ...
In HTML5, these are all equivalent
<h1>Today's top stories</h1>

<article>
  <h3>Dog bites man</h3>
  ...

<article>
<h3>Today's top stories</h3>

<article>
  <h6>Dog bites man</h6>
  ...

<article>
<h6>Today's top stories</h6>

<article>
  <h2>Dog bites man</h2>
  ...

<article>
“Sections may contain headings of any rank, but authors
are strongly encouraged to either use only h1 elements, or
to use ...
What's 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 informat...
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 at...
HTML3
The BANNER element is used for corporate logos, navigation aids, disclaimers and other
 information which shouldn't ...
<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=...
Do semantics matter, anyway?
<DIV id=:rk class="J-K-I J-J5-Ji L3 J-K-I-JO" tabIndex=0
unselectable="on" closure_hashCode_l16mgm="182" act="">
    <DIV ...
Write whatever the fuck you want with some WAI-ARIA sugar on top
  is in some scenarios the only thing what works right no...
<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 are
yummy, and will get you cookies”, and that’s probably...
<body></body>
www.jackosborne.co.uk
Bruce Lawson
     @brucel
brucel@opera.com
Thanks
Richard Ishida for <bdi> screenshots
Daniel Davis for <ruby> screenshots
 Michael Vacik for sexy ant cartoon
You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011
You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011
You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011
You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011
You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011
You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011
You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011
You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011
You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011
You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011
Upcoming SlideShare
Loading in …5
×

of

You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011 Slide 1 You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011 Slide 2 You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011 Slide 3 You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011 Slide 4 You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011 Slide 5 You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011 Slide 6 You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011 Slide 7 You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011 Slide 8 You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011 Slide 9 You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011 Slide 10 You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011 Slide 11 You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011 Slide 12 You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011 Slide 13 You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011 Slide 14 You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011 Slide 15 You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011 Slide 16 You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011 Slide 17 You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011 Slide 18 You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011 Slide 19 You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011 Slide 20 You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011 Slide 21 You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011 Slide 22 You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011 Slide 23 You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011 Slide 24 You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011 Slide 25 You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011 Slide 26 You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011 Slide 27 You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011 Slide 28 You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011 Slide 29 You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011 Slide 30 You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011 Slide 31 You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011 Slide 32 You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011 Slide 33 You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011 Slide 34 You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011 Slide 35 You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011 Slide 36 You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011 Slide 37 You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011 Slide 38 You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011 Slide 39 You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011 Slide 40 You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011 Slide 41 You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011 Slide 42 You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011 Slide 43 You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011 Slide 44 You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011 Slide 45 You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011 Slide 46 You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011 Slide 47 You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011 Slide 48 You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011 Slide 49 You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011 Slide 50 You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011 Slide 51 You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011 Slide 52 You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011 Slide 53 You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011 Slide 54 You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011 Slide 55 You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011 Slide 56 You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011 Slide 57 You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011 Slide 58 You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011 Slide 59 You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011 Slide 60 You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011 Slide 61 You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011 Slide 62 You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011 Slide 63 You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011 Slide 64 You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011 Slide 65 You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011 Slide 66 You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011 Slide 67 You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011 Slide 68 You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011 Slide 69 You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011 Slide 70 You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011 Slide 71 You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011 Slide 72 You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011 Slide 73
Upcoming SlideShare
HTML5 multimedia - where we are, where we're going
Next
Download to read offline and view in fullscreen.

15 Likes

Share

Download to read offline

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

Download to read offline

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 http://fronteers.nl/congres/2011/sessions/html5-semantics-bruce-lawson

Related Books

Free with a 30 day trial from Scribd

See all

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

  1. HTML5 Semantics Bruce Lawson, Fronteers, 6 October 2011 Video and transcript available at http://fronteers.nl/congres/2011/sessions/html5-semantics-bruce-lawson Links and other resources at http://my.opera.com/ODIN/blog/bruces-fronteers-presentation-html5-semantics
  2. You too can be a bedwetting ant-fucker
  3. http://www.eod.com/devil/archive/web_standards.html
  4. hair-splitting [ˈhɛəˌsplɪtɪŋ] (noun) the making of petty distinctions (adj) occupied with or based on petty distinctions
  5. miereneuker
  6. hare-splitter
  7. 30 new elements
  8. Some presentational elements are gone <center> <font> <big> Also align on <img> <table> etc background on <body> bgcolor on <table> etc www.w3.org/TR/html5-diff/#absent-elements
  9. Some presentational elements redefined to have semantics http://www.w3.org/TR/html5-diff/#changed-elements
  10. The u element represents a span of text with an unarticulated, though explicitly rendered, non-textual annotation, such as labeling the text as being a proper name in Chinese text (a Chinese proper name mark), or labeling the text as being misspelt.
  11. Sexy new woo! semantics <video> <audio> <canvas> <source> <track>
  12. Semantics for 118n
  13. <ruby> 日本 </ruby>
  14. <ruby> 日本 <rt> にほん </rt> </ruby>
  15. <ruby> 日本 <rp>(</rp> <rt> にほん </rt> <rp>)</rp> </ruby>
  16. http://my.opera.com/tagawa/blog/the-html5-ruby-element-in-words-of-one-syllable-or-less
  17. <bdi>
  18. <p>Aroma - 3 reviews</p> <p>RTL LETTERS - 5 reviews</p>
  19. <p>Aroma - 3 reviews</p> <p><bdi>RTL LETTERS</bdi> - 5 reviews</p> rishida.net/blog/?p=564, follow @r12a
  20. <time>
  21. <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>
  22. <figure>
  23. 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 a brown abdomen. <CREDIT>J. A. L. Cooke/OSF</CREDIT> </FIG>
  24. HTML5 <figure> <figure> <img src=bruce-remy.png> <figcaption>Bruce and Remy welcome questions <small>Photo &copy; Bruce's mum</small> </figcaption> </figure>
  25. <details>
  26. <details> <summary>Click here!</summary> <p>This will be revealed</p> </details>
  27. Structural semantics
  28. Top 20 class names 1. footer 11. button 2. menu 12. main 3. style1 13. style3 4. msonormal 14. small 5. text 15. nav 6. content 16. clear 7. title 17. search 8. style2 18. style4 9. header 19. logo 10. copyright 20. body http://devfiles.myopera.com/articles/572/classlist-url.htm
  29. 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. banner 10. autonumber1 20. navigation http://devfiles.myopera.com/articles/572/idlist-url.htm
  30. <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 text bigger 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. We'll probably keep it to a minimum though. The idea is just to relieve the most common pseudo-semantic uses of <div>. http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2004-August/002114.html
  31. <content> ?
  32. Note: there isn't a one-to-one correspondence with role= banner / <header>, role=contentinfo / <footer>
  33. Biscuit and Chica photograph by Brittany Shaw. All rights reserved. Used with permission
  34. Sectioning content <section>, <article>, <nav>, <aside>
  35. <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>
  36. <header> <h1>Exciting blog</h1> </header> <section> <h2>Today's articles</h2> <article>... </article> <article>... </article> </section>
  37. In HTML5, these are all equivalent <h1>Today's top stories</h1> <article> <h3>Dog bites man</h3> ... <article>
  38. <h3>Today's top stories</h3> <article> <h6>Dog bites man</h6> ... <article>
  39. <h6>Today's top stories</h6> <article> <h2>Dog bites man</h2> ... <article>
  40. “Sections may contain headings of any rank, but authors are strongly encouraged to either use only h1 elements, or to use elements of the appropriate rank for the section's nesting level.” http://www.w3.org/TR/html5/sections.html#headings-and-sections <h1>Today's top stories</h1> <article> <h1>Dog bites man</h1> ... <article>
  41. What's the difference between <section> and <article>?
  42. <section> divides something into parts <article> is a discrete entity
  43. Are the new semantics specified enough?
  44. "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".
  45. As <CITE>Harry S. Truman</CITE> said… More information can be found in <CITE>[ISO-0000]</CITE>
  46. The Golden Rule:
  47. The Golden Rule: There is no Golden Rule
  48. Are semantics teleological? Belief in or the perception of purposeful development toward an end
  49. Do we have the right semantics?
  50. "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 display table 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 http://html6.by.ru/
  51. HTML3 The BANNER element is used for corporate logos, navigation aids, disclaimers and other information which shouldn't 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.
  52. <time> <person> <location>
  53. Do we need a <login> element? A <share> element?
  54. <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>
  55. Do semantics matter, anyway?
  56. <DIV id=:rk class="J-K-I J-J5-Ji L3 J-K-I-JO" tabIndex=0 unselectable="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>
  57. 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 real solution to making a button implemented using five div elements and some scripting accessible is not WAI-ARIA. It is to drastically improve the styling capabilities of <input type="button">. <cite>Anne van Kesteren</cite> http://annevankesteren.nl/2010/04/clean-markup-plea
  58. <SPAN id=:rg class=toxOdd role=link tabIndex=0 closure_hashCode_l16mgm="177"> Create a filter</SPAN>
  59. Pretty much everyone in the Web community agrees that “semantics are yummy, and will get you cookies”, and that’s probably true. But once you start 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? http://www.alistapart.com/comments/semanticsinhtml5?page=2#12
  60. <body></body>
  61. www.jackosborne.co.uk
  62. Bruce Lawson @brucel brucel@opera.com
  63. Thanks Richard Ishida for <bdi> screenshots Daniel Davis for <ruby> screenshots Michael Vacik for sexy ant cartoon
  • rteijeiro

    Mar. 14, 2013
  • rlovinger

    Nov. 9, 2012
  • ceperuchi

    Oct. 24, 2011
  • 1suming

    Oct. 19, 2011
  • pixelatorz

    Oct. 10, 2011
  • float

    Oct. 10, 2011
  • kogakure

    Oct. 10, 2011
  • isellsoap

    Oct. 10, 2011
  • msjen

    Oct. 9, 2011
  • josemontiel

    Oct. 9, 2011
  • pilichph

    Oct. 8, 2011
  • hessi

    Oct. 7, 2011
  • cwebba1

    Oct. 7, 2011
  • siriokun

    Oct. 7, 2011
  • USEthetics

    Oct. 7, 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. Video and transcript at http://fronteers.nl/congres/2011/sessions/html5-semantics-bruce-lawson

Views

Total views

121,970

On Slideshare

0

From embeds

0

Number of embeds

2,683

Actions

Downloads

54

Shares

0

Comments

0

Likes

15

×