SlideShare a Scribd company logo
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
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)
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
       www.w3.org/TR/html5-diff/#absent-elements
Some presentational elements redefined to
            have semantics



       http://www.w3.org/TR/html5-diff/#changed-elements
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.
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 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 a
brown 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; Bruce's mum</small>
</figcaption>
</figure>
You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011
<details>
<details>
<summary>Click here!</summary>
<p>This will be revealed</p>
</details>
You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011
Structural semantics
You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011
You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011
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
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
You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011
<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
You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011
<content> ?
You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011
Note: there isn't 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>Today's articles</h2>

 <article>... </article>
 <article>... </article>
</section>
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 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>
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 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 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/
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.
<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?
You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011
<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>
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
You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011
<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 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
<body></body>
www.jackosborne.co.uk
You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011
Bruce Lawson
     @brucel
brucel@opera.com
Thanks
Richard Ishida for <bdi> screenshots
Daniel Davis for <ruby> screenshots
 Michael Vacik for sexy ant cartoon

More Related Content

What's hot (20)

HTML5, The Open Web, and what it means for you - Altran by Robert Nyman, has 85 slides with 6408 views.
HTML5, The Open Web, and what it means for you - AltranHTML5, The Open Web, and what it means for you - Altran
HTML5, The Open Web, and what it means for you - Altran
Robert Nyman
85 slides6.4K views
State of jQuery '09 by jeresig, has 39 slides with 18162 views.
State of jQuery '09State of jQuery '09
State of jQuery '09
jeresig
39 slides18.2K views
Keypoints html5 by dynamis , has 243 slides with 29696 views.
Keypoints html5Keypoints html5
Keypoints html5
dynamis
243 slides29.7K views
Building an HTML5 Video Player by Jim Jeffers, has 33 slides with 84659 views.
Building an HTML5 Video PlayerBuilding an HTML5 Video Player
Building an HTML5 Video Player
Jim Jeffers
33 slides84.7K views
HTML5 and friends - Institutional Web Management Workshop 2010 by Patrick Lauke, has 62 slides with 7279 views.
HTML5 and friends - Institutional Web Management Workshop 2010HTML5 and friends - Institutional Web Management Workshop 2010
HTML5 and friends - Institutional Web Management Workshop 2010
Patrick Lauke
62 slides7.3K views
So you want to build a Facebook app by kamal.fariz, has 74 slides with 1423 views.
So you want to build a Facebook appSo you want to build a Facebook app
So you want to build a Facebook app
kamal.fariz
74 slides1.4K views
S314011 - Developing Composite Applications for the Cloud with Apache Tuscany by Luciano Resende, has 35 slides with 828 views.
S314011 - Developing Composite Applications for the Cloud with Apache TuscanyS314011 - Developing Composite Applications for the Cloud with Apache Tuscany
S314011 - Developing Composite Applications for the Cloud with Apache Tuscany
Luciano Resende
35 slides828 views
HTML5 kickstart - Brooklyn Beta workshop 21.10.2010 by Patrick Lauke, has 92 slides with 644 views.
HTML5 kickstart - Brooklyn Beta workshop 21.10.2010HTML5 kickstart - Brooklyn Beta workshop 21.10.2010
HTML5 kickstart - Brooklyn Beta workshop 21.10.2010
Patrick Lauke
92 slides644 views

Similar to You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011 (20)

Disruptive code by brucelawson, has 72 slides with 1410 views.
Disruptive codeDisruptive code
Disruptive code
brucelawson
72 slides1.4K views
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011 by Patrick Lauke, has 101 slides with 2050 views.
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
Patrick Lauke
101 slides2.1K views
Html5 oslo-code-camp by brucelawson, has 45 slides with 552 views.
Html5 oslo-code-campHtml5 oslo-code-camp
Html5 oslo-code-camp
brucelawson
45 slides552 views
Slow kinda sucks by Tim Wright, has 97 slides with 2328 views.
Slow kinda sucksSlow kinda sucks
Slow kinda sucks
Tim Wright
97 slides2.3K views
How to create a basic template by vathur, has 13 slides with 363 views.
How to create a basic templateHow to create a basic template
How to create a basic template
vathur
13 slides363 views
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011] by Aaron Gustafson, has 179 slides with 2085 views.
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]
Aaron Gustafson
179 slides2.1K views
Frontend for developers by Hernan Mammana, has 143 slides with 752 views.
Frontend for developersFrontend for developers
Frontend for developers
Hernan Mammana
143 slides752 views
Taking your Web App for a walk by Jens-Christian Fischer, has 93 slides with 3499 views.
Taking your Web App for a walkTaking your Web App for a walk
Taking your Web App for a walk
Jens-Christian Fischer
93 slides3.5K views

More from brucelawson (17)

Bruce Lawson: Progressive Web Apps: the future of Apps by brucelawson, has 54 slides with 6261 views.
Bruce Lawson: Progressive Web Apps: the future of AppsBruce Lawson: Progressive Web Apps: the future of Apps
Bruce Lawson: Progressive Web Apps: the future of Apps
brucelawson
54 slides6.3K views
HTML5 multimedia - where we are, where we're going by brucelawson, has 64 slides with 3099 views.
HTML5 multimedia - where we are, where we're goingHTML5 multimedia - where we are, where we're going
HTML5 multimedia - where we are, where we're going
brucelawson
64 slides3.1K views
Leveraging HTML 5.0 by brucelawson, has 9 slides with 2914 views.
Leveraging HTML 5.0Leveraging HTML 5.0
Leveraging HTML 5.0
brucelawson
9 slides2.9K views
HTML5 Multimedia Accessibility by brucelawson, has 31 slides with 1764 views.
HTML5 Multimedia AccessibilityHTML5 Multimedia Accessibility
HTML5 Multimedia Accessibility
brucelawson
31 slides1.8K views
HTML5 Multimedia: where we are, where we're going by brucelawson, has 39 slides with 2833 views.
HTML5 Multimedia: where we are, where we're goingHTML5 Multimedia: where we are, where we're going
HTML5 Multimedia: where we are, where we're going
brucelawson
39 slides2.8K views
Why Open Web Standards are cool and will save the world. Or the Web, at least. by brucelawson, has 55 slides with 1341 views.
Why Open Web Standards are cool and will save the world. Or the Web, at least.Why Open Web Standards are cool and will save the world. Or the Web, at least.
Why Open Web Standards are cool and will save the world. Or the Web, at least.
brucelawson
55 slides1.3K views
Web Anywhere: Mobile Optimisation With HTML5, CSS3, JavaScript by brucelawson, has 84 slides with 4202 views.
Web Anywhere: Mobile Optimisation With HTML5, CSS3, JavaScriptWeb Anywhere: Mobile Optimisation With HTML5, CSS3, JavaScript
Web Anywhere: Mobile Optimisation With HTML5, CSS3, JavaScript
brucelawson
84 slides4.2K views
W3C Widgets: Apps made with Web Standards by brucelawson, has 15 slides with 1745 views.
W3C Widgets: Apps made with Web StandardsW3C Widgets: Apps made with Web Standards
W3C Widgets: Apps made with Web Standards
brucelawson
15 slides1.7K views

Recently uploaded (20)

Google opens up NotebookLM Plus to solo users.pdf by SOFTTECHHUB, has 11 slides with 10 views.
Google opens up NotebookLM Plus to solo users.pdfGoogle opens up NotebookLM Plus to solo users.pdf
Google opens up NotebookLM Plus to solo users.pdf
SOFTTECHHUB
11 slides10 views
Telecommunication Companies in Pakistan.pdf by checksimowner, has 7 slides with 23 views.
Telecommunication Companies in Pakistan.pdfTelecommunication Companies in Pakistan.pdf
Telecommunication Companies in Pakistan.pdf
checksimowner
7 slides23 views
Modern Web Design Process - The corporate way by MuraleeDharanSugumar, has 55 slides with 16 views.
Modern Web Design Process - The corporate wayModern Web Design Process - The corporate way
Modern Web Design Process - The corporate way
MuraleeDharanSugumar
55 slides16 views
Cybersecurity AI Assistants – The Future of Digital Defense by Vadim Nareyko, has 7 slides with 8 views.
Cybersecurity AI Assistants – The Future of Digital DefenseCybersecurity AI Assistants – The Future of Digital Defense
Cybersecurity AI Assistants – The Future of Digital Defense
Vadim Nareyko
7 slides8 views
Full Text Search with Milvus 2.5 - UD Meetup Berlin Jan 23 by Zilliz , has 32 slides with 36 views.
Full Text Search with Milvus 2.5 - UD Meetup Berlin Jan 23Full Text Search with Milvus 2.5 - UD Meetup Berlin Jan 23
Full Text Search with Milvus 2.5 - UD Meetup Berlin Jan 23
Zilliz
32 slides36 views
Christopher Peyton Crawford Excels In IT And Sports by Christopher Peyton Crawford, has 7 slides with 38 views.
Christopher Peyton Crawford Excels In IT And SportsChristopher Peyton Crawford Excels In IT And Sports
Christopher Peyton Crawford Excels In IT And Sports
Christopher Peyton Crawford
7 slides38 views
ICAART 2025 presentation on Stateful Monitoring and Responsible Deployment of... by Debmalya Biswas, has 16 slides with 19 views.
ICAART 2025 presentation on Stateful Monitoring and Responsible Deployment of...ICAART 2025 presentation on Stateful Monitoring and Responsible Deployment of...
ICAART 2025 presentation on Stateful Monitoring and Responsible Deployment of...
Debmalya Biswas
16 slides19 views
How to Simplify and Accelerate Passkey Adoption.pptx by LoriGlavin3, has 13 slides with 408 views.
How to Simplify and Accelerate Passkey Adoption.pptxHow to Simplify and Accelerate Passkey Adoption.pptx
How to Simplify and Accelerate Passkey Adoption.pptx
LoriGlavin3
13 slides408 views
Full Text Search with Milvus 2.5 - UD Meetup Berlin Jan 23 by Zilliz , has 32 slides with 36 views.
Full Text Search with Milvus 2.5 - UD Meetup Berlin Jan 23Full Text Search with Milvus 2.5 - UD Meetup Berlin Jan 23
Full Text Search with Milvus 2.5 - UD Meetup Berlin Jan 23
Zilliz
32 slides36 views
ICAART 2025 presentation on Stateful Monitoring and Responsible Deployment of... by Debmalya Biswas, has 16 slides with 19 views.
ICAART 2025 presentation on Stateful Monitoring and Responsible Deployment of...ICAART 2025 presentation on Stateful Monitoring and Responsible Deployment of...
ICAART 2025 presentation on Stateful Monitoring and Responsible Deployment of...
Debmalya Biswas
16 slides19 views
How to Simplify and Accelerate Passkey Adoption.pptx by LoriGlavin3, has 13 slides with 408 views.
How to Simplify and Accelerate Passkey Adoption.pptxHow to Simplify and Accelerate Passkey Adoption.pptx
How to Simplify and Accelerate Passkey Adoption.pptx
LoriGlavin3
13 slides408 views

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>
  • 26. <details>
  • 27. <details> <summary>Click here!</summary> <p>This will be revealed</p> </details>
  • 29. Structural semantics
  • 32. 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
  • 33. 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
  • 35. <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
  • 37. <content> ?
  • 39. Note: there isn't a one-to-one correspondence with role= banner / <header>, role=contentinfo / <footer>
  • 40. Biscuit and Chica photograph by Brittany Shaw. All rights reserved. Used with permission
  • 41. Sectioning content <section>, <article>, <nav>, <aside>
  • 42. <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>
  • 43. <header> <h1>Exciting blog</h1> </header> <section> <h2>Today's articles</h2> <article>... </article> <article>... </article> </section>
  • 44. In HTML5, these are all equivalent <h1>Today's top stories</h1> <article> <h3>Dog bites man</h3> ... <article>
  • 45. <h3>Today's top stories</h3> <article> <h6>Dog bites man</h6> ... <article>
  • 46. <h6>Today's top stories</h6> <article> <h2>Dog bites man</h2> ... <article>
  • 47. “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>
  • 48. What's the difference between <section> and <article>?
  • 49. <section> divides something into parts <article> is a discrete entity
  • 50. Are the new semantics specified enough?
  • 51. "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".
  • 52. As <CITE>Harry S. Truman</CITE> said… More information can be found in <CITE>[ISO-0000]</CITE>
  • 53. The Golden Rule:
  • 54. The Golden Rule: There is no Golden Rule
  • 55. Are semantics teleological? Belief in or the perception of purposeful development toward an end
  • 56. Do we have the right semantics?
  • 57. "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/
  • 58. 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.
  • 59. <time> <person> <location>
  • 60. Do we need a <login> element? A <share> element?
  • 61. <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>
  • 62. Do semantics matter, anyway?
  • 64. <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>
  • 65. 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
  • 67. <SPAN id=:rg class=toxOdd role=link tabIndex=0 closure_hashCode_l16mgm="177"> Create a filter</SPAN>
  • 68. 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
  • 69. <body></body>
  • 70. www.jackosborne.co.uk
  • 72. Bruce Lawson @brucel brucel@opera.com
  • 73. Thanks Richard Ishida for <bdi> screenshots Daniel Davis for <ruby> screenshots Michael Vacik for sexy ant cartoon