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>
<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. 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
<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
<content> ?
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?
<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
<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
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

HTML5, The Open Web, and what it means for you - Altran
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
 
State of jQuery '09
State of jQuery '09State of jQuery '09
State of jQuery '09
jeresig
 
Keypoints html5
Keypoints html5Keypoints html5
Keypoints html5
dynamis
 
Building an HTML5 Video Player
Building an HTML5 Video PlayerBuilding an HTML5 Video Player
Building an HTML5 Video Player
Jim Jeffers
 
HTML5 and friends - Institutional Web Management Workshop 2010
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
 
So you want to build a Facebook app
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
 
S314011 - Developing Composite Applications for the Cloud with Apache Tuscany
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
 
HTML5 kickstart - Brooklyn Beta workshop 21.10.2010
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
 
jQuery UI and Plugins
jQuery UI and PluginsjQuery UI and Plugins
jQuery UI and Plugins
Marc Grabanski
 
Dreamweaver CS6, jQuery, PhoneGap, mobile design
Dreamweaver CS6, jQuery, PhoneGap, mobile designDreamweaver CS6, jQuery, PhoneGap, mobile design
Dreamweaver CS6, jQuery, PhoneGap, mobile design
Dee Sadler
 
Fisl 11 - Dicas de Desenvolvimento Web com Ruby
Fisl 11 - Dicas de Desenvolvimento Web com RubyFisl 11 - Dicas de Desenvolvimento Web com Ruby
Fisl 11 - Dicas de Desenvolvimento Web com Ruby
Fabio Akita
 
Game Development Using HTML 5
Game Development Using HTML 5Game Development Using HTML 5
Game Development Using HTML 5
osa_ora
 
Sencha Touch e PhoneGap: SouJava - IBM Maio 2013
Sencha Touch e PhoneGap: SouJava - IBM Maio 2013Sencha Touch e PhoneGap: SouJava - IBM Maio 2013
Sencha Touch e PhoneGap: SouJava - IBM Maio 2013
Loiane Groner
 
Progressive Web Apps - Intro & Learnings
Progressive Web Apps - Intro & LearningsProgressive Web Apps - Intro & Learnings
Progressive Web Apps - Intro & Learnings
Johannes Weber
 
WordPress and Ajax
WordPress and AjaxWordPress and Ajax
WordPress and Ajax
Ronald Huereca
 
Web Standards: Fueling Innovation [Web Design World Boston '08]
Web Standards: Fueling Innovation [Web Design World Boston '08]Web Standards: Fueling Innovation [Web Design World Boston '08]
Web Standards: Fueling Innovation [Web Design World Boston '08]
Aaron Gustafson
 
Web Apps and more
Web Apps and moreWeb Apps and more
Web Apps and more
Yan Shi
 
Drupal Theme Development - DrupalCon Chicago 2011
Drupal Theme Development - DrupalCon Chicago 2011Drupal Theme Development - DrupalCon Chicago 2011
Drupal Theme Development - DrupalCon Chicago 2011
Ryan Price
 
Consegi 2010 - Dicas de Desenvolvimento Web com Ruby
Consegi 2010 - Dicas de Desenvolvimento Web com RubyConsegi 2010 - Dicas de Desenvolvimento Web com Ruby
Consegi 2010 - Dicas de Desenvolvimento Web com Ruby
Fabio Akita
 
HTML5 Video Player - HTML5 Dev Conf 2012
HTML5 Video Player - HTML5 Dev Conf 2012HTML5 Video Player - HTML5 Dev Conf 2012
HTML5 Video Player - HTML5 Dev Conf 2012
steveheffernan
 

What's hot (20)

HTML5, The Open Web, and what it means for you - Altran
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
 
State of jQuery '09
State of jQuery '09State of jQuery '09
State of jQuery '09
 
Keypoints html5
Keypoints html5Keypoints html5
Keypoints html5
 
Building an HTML5 Video Player
Building an HTML5 Video PlayerBuilding an HTML5 Video Player
Building an HTML5 Video Player
 
HTML5 and friends - Institutional Web Management Workshop 2010
HTML5 and friends - Institutional Web Management Workshop 2010HTML5 and friends - Institutional Web Management Workshop 2010
HTML5 and friends - Institutional Web Management Workshop 2010
 
So you want to build a Facebook app
So you want to build a Facebook appSo you want to build a Facebook app
So you want to build a Facebook app
 
S314011 - Developing Composite Applications for the Cloud with Apache Tuscany
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
 
HTML5 kickstart - Brooklyn Beta workshop 21.10.2010
HTML5 kickstart - Brooklyn Beta workshop 21.10.2010HTML5 kickstart - Brooklyn Beta workshop 21.10.2010
HTML5 kickstart - Brooklyn Beta workshop 21.10.2010
 
jQuery UI and Plugins
jQuery UI and PluginsjQuery UI and Plugins
jQuery UI and Plugins
 
Dreamweaver CS6, jQuery, PhoneGap, mobile design
Dreamweaver CS6, jQuery, PhoneGap, mobile designDreamweaver CS6, jQuery, PhoneGap, mobile design
Dreamweaver CS6, jQuery, PhoneGap, mobile design
 
Fisl 11 - Dicas de Desenvolvimento Web com Ruby
Fisl 11 - Dicas de Desenvolvimento Web com RubyFisl 11 - Dicas de Desenvolvimento Web com Ruby
Fisl 11 - Dicas de Desenvolvimento Web com Ruby
 
Game Development Using HTML 5
Game Development Using HTML 5Game Development Using HTML 5
Game Development Using HTML 5
 
Sencha Touch e PhoneGap: SouJava - IBM Maio 2013
Sencha Touch e PhoneGap: SouJava - IBM Maio 2013Sencha Touch e PhoneGap: SouJava - IBM Maio 2013
Sencha Touch e PhoneGap: SouJava - IBM Maio 2013
 
Progressive Web Apps - Intro & Learnings
Progressive Web Apps - Intro & LearningsProgressive Web Apps - Intro & Learnings
Progressive Web Apps - Intro & Learnings
 
WordPress and Ajax
WordPress and AjaxWordPress and Ajax
WordPress and Ajax
 
Web Standards: Fueling Innovation [Web Design World Boston '08]
Web Standards: Fueling Innovation [Web Design World Boston '08]Web Standards: Fueling Innovation [Web Design World Boston '08]
Web Standards: Fueling Innovation [Web Design World Boston '08]
 
Web Apps and more
Web Apps and moreWeb Apps and more
Web Apps and more
 
Drupal Theme Development - DrupalCon Chicago 2011
Drupal Theme Development - DrupalCon Chicago 2011Drupal Theme Development - DrupalCon Chicago 2011
Drupal Theme Development - DrupalCon Chicago 2011
 
Consegi 2010 - Dicas de Desenvolvimento Web com Ruby
Consegi 2010 - Dicas de Desenvolvimento Web com RubyConsegi 2010 - Dicas de Desenvolvimento Web com Ruby
Consegi 2010 - Dicas de Desenvolvimento Web com Ruby
 
HTML5 Video Player - HTML5 Dev Conf 2012
HTML5 Video Player - HTML5 Dev Conf 2012HTML5 Video Player - HTML5 Dev Conf 2012
HTML5 Video Player - HTML5 Dev Conf 2012
 

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

Disruptive code
Disruptive codeDisruptive code
Disruptive code
brucelawson
 
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
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
 
Html5 oslo-code-camp
Html5 oslo-code-campHtml5 oslo-code-camp
Html5 oslo-code-camp
brucelawson
 
Slow kinda sucks
Slow kinda sucksSlow kinda sucks
Slow kinda sucks
Tim Wright
 
How to create a basic template
How to create a basic templateHow to create a basic template
How to create a basic template
vathur
 
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]
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]
Aaron Gustafson
 
Frontend for developers
Frontend for developersFrontend for developers
Frontend for developers
Hernan Mammana
 
Taking your Web App for a walk
Taking your Web App for a walkTaking your Web App for a walk
Taking your Web App for a walk
Jens-Christian Fischer
 
Semantic accessibility
Semantic accessibilitySemantic accessibility
Semantic accessibility
Ian Stuart
 
A practical guide to building websites with HTML5 & CSS3
A practical guide to building websites with HTML5 & CSS3A practical guide to building websites with HTML5 & CSS3
A practical guide to building websites with HTML5 & CSS3
Darren Wood
 
Html5, a gentle introduction
Html5, a gentle introduction Html5, a gentle introduction
Html5, a gentle introduction
Diego Scataglini
 
Attractive HTML5~開発者の視点から~
Attractive HTML5~開発者の視点から~Attractive HTML5~開発者の視点から~
Attractive HTML5~開発者の視点から~
Sho Ito
 
Fundamentals of web_design_v2
Fundamentals of web_design_v2Fundamentals of web_design_v2
Fundamentals of web_design_v2
hussain534
 
Html5 and web technology update
Html5 and web technology updateHtml5 and web technology update
Html5 and web technology update
Doug Domeny
 
Using HTML5 sensibly
Using HTML5 sensiblyUsing HTML5 sensibly
Using HTML5 sensibly
Christian Heilmann
 
Html 5, a gentle introduction
Html 5, a gentle introductionHtml 5, a gentle introduction
Html 5, a gentle introduction
Diego Scataglini
 
ViA Bootstrap 4
ViA Bootstrap 4ViA Bootstrap 4
ViA Bootstrap 4
imdurgesh
 
Front end full stack development module 1pptx
Front end full stack development module 1pptxFront end full stack development module 1pptx
Front end full stack development module 1pptx
MaruthiPrasad96
 
Diazo: Bridging Designers and Programmers
Diazo: Bridging Designers and ProgrammersDiazo: Bridging Designers and Programmers
Diazo: Bridging Designers and Programmers
TsungWei Hu
 
“Good design is obvious. Great design is transparent.” — How we use Bootstrap...
“Good design is obvious. Great design is transparent.” — How we use Bootstrap...“Good design is obvious. Great design is transparent.” — How we use Bootstrap...
“Good design is obvious. Great design is transparent.” — How we use Bootstrap...
Roni Banerjee
 

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

Disruptive code
Disruptive codeDisruptive code
Disruptive code
 
Schöne neue Welt von HTML5 - MultimediaTreff 28 - Köln 03.12.2011
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
 
Html5 oslo-code-camp
Html5 oslo-code-campHtml5 oslo-code-camp
Html5 oslo-code-camp
 
Slow kinda sucks
Slow kinda sucksSlow kinda sucks
Slow kinda sucks
 
How to create a basic template
How to create a basic templateHow to create a basic template
How to create a basic template
 
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]
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]
 
Frontend for developers
Frontend for developersFrontend for developers
Frontend for developers
 
Taking your Web App for a walk
Taking your Web App for a walkTaking your Web App for a walk
Taking your Web App for a walk
 
Semantic accessibility
Semantic accessibilitySemantic accessibility
Semantic accessibility
 
A practical guide to building websites with HTML5 & CSS3
A practical guide to building websites with HTML5 & CSS3A practical guide to building websites with HTML5 & CSS3
A practical guide to building websites with HTML5 & CSS3
 
Html5, a gentle introduction
Html5, a gentle introduction Html5, a gentle introduction
Html5, a gentle introduction
 
Attractive HTML5~開発者の視点から~
Attractive HTML5~開発者の視点から~Attractive HTML5~開発者の視点から~
Attractive HTML5~開発者の視点から~
 
Fundamentals of web_design_v2
Fundamentals of web_design_v2Fundamentals of web_design_v2
Fundamentals of web_design_v2
 
Html5 and web technology update
Html5 and web technology updateHtml5 and web technology update
Html5 and web technology update
 
Using HTML5 sensibly
Using HTML5 sensiblyUsing HTML5 sensibly
Using HTML5 sensibly
 
Html 5, a gentle introduction
Html 5, a gentle introductionHtml 5, a gentle introduction
Html 5, a gentle introduction
 
ViA Bootstrap 4
ViA Bootstrap 4ViA Bootstrap 4
ViA Bootstrap 4
 
Front end full stack development module 1pptx
Front end full stack development module 1pptxFront end full stack development module 1pptx
Front end full stack development module 1pptx
 
Diazo: Bridging Designers and Programmers
Diazo: Bridging Designers and ProgrammersDiazo: Bridging Designers and Programmers
Diazo: Bridging Designers and Programmers
 
“Good design is obvious. Great design is transparent.” — How we use Bootstrap...
“Good design is obvious. Great design is transparent.” — How we use Bootstrap...“Good design is obvious. Great design is transparent.” — How we use Bootstrap...
“Good design is obvious. Great design is transparent.” — How we use Bootstrap...
 

More from brucelawson

Bruce Lawson: Progressive Web Apps: the future of Apps
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
 
HTML5 multimedia - where we are, where we're going
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
 
Leveraging HTML 5.0
Leveraging HTML 5.0Leveraging HTML 5.0
Leveraging HTML 5.0
brucelawson
 
HTML5 Multimedia Accessibility
HTML5 Multimedia AccessibilityHTML5 Multimedia Accessibility
HTML5 Multimedia Accessibility
brucelawson
 
HTML5 Multimedia: where we are, where we're going
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
 
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.
Why Open Web Standards are cool and will save the world. Or the Web, at least.
brucelawson
 
Web Anywhere: Mobile Optimisation With HTML5, CSS3, JavaScript
Web Anywhere: Mobile Optimisation With HTML5, CSS3, JavaScriptWeb Anywhere: Mobile Optimisation With HTML5, CSS3, JavaScript
Web Anywhere: Mobile Optimisation With HTML5, CSS3, JavaScript
brucelawson
 
W3C Widgets: Apps made with Web Standards
W3C Widgets: Apps made with Web StandardsW3C Widgets: Apps made with Web Standards
W3C Widgets: Apps made with Web Standards
brucelawson
 
Bruce lawson-html5-aria-japan
Bruce lawson-html5-aria-japanBruce lawson-html5-aria-japan
Bruce lawson-html5-aria-japan
brucelawson
 
HTML5 and CSS 3
HTML5 and CSS 3HTML5 and CSS 3
HTML5 and CSS 3
brucelawson
 
Bruce lawson Stockholm Geek Meet
Bruce lawson Stockholm Geek MeetBruce lawson Stockholm Geek Meet
Bruce lawson Stockholm Geek Meet
brucelawson
 
Bruce lawson-over-the-air
Bruce lawson-over-the-airBruce lawson-over-the-air
Bruce lawson-over-the-air
brucelawson
 
Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland
Bruce Lawson, Web Development 2.0, SparkUp! Poznan PolandBruce Lawson, Web Development 2.0, SparkUp! Poznan Poland
Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland
brucelawson
 
Bruce Lawson HTML5 South By SouthWest presentation
Bruce Lawson HTML5 South By SouthWest presentationBruce Lawson HTML5 South By SouthWest presentation
Bruce Lawson HTML5 South By SouthWest presentation
brucelawson
 
Practical Tips for Mobile Widget development
Practical Tips for Mobile Widget developmentPractical Tips for Mobile Widget development
Practical Tips for Mobile Widget development
brucelawson
 
Bruce Lawson Opera Indonesia
Bruce Lawson Opera IndonesiaBruce Lawson Opera Indonesia
Bruce Lawson Opera Indonesia
brucelawson
 
Standards.next: HTML - Are you mything the point?
Standards.next: HTML - Are you mything the point?Standards.next: HTML - Are you mything the point?
Standards.next: HTML - Are you mything the point?
brucelawson
 

More from brucelawson (17)

Bruce Lawson: Progressive Web Apps: the future of Apps
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
 
HTML5 multimedia - where we are, where we're going
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
 
Leveraging HTML 5.0
Leveraging HTML 5.0Leveraging HTML 5.0
Leveraging HTML 5.0
 
HTML5 Multimedia Accessibility
HTML5 Multimedia AccessibilityHTML5 Multimedia Accessibility
HTML5 Multimedia Accessibility
 
HTML5 Multimedia: where we are, where we're going
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
 
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.
Why Open Web Standards are cool and will save the world. Or the Web, at least.
 
Web Anywhere: Mobile Optimisation With HTML5, CSS3, JavaScript
Web Anywhere: Mobile Optimisation With HTML5, CSS3, JavaScriptWeb Anywhere: Mobile Optimisation With HTML5, CSS3, JavaScript
Web Anywhere: Mobile Optimisation With HTML5, CSS3, JavaScript
 
W3C Widgets: Apps made with Web Standards
W3C Widgets: Apps made with Web StandardsW3C Widgets: Apps made with Web Standards
W3C Widgets: Apps made with Web Standards
 
Bruce lawson-html5-aria-japan
Bruce lawson-html5-aria-japanBruce lawson-html5-aria-japan
Bruce lawson-html5-aria-japan
 
HTML5 and CSS 3
HTML5 and CSS 3HTML5 and CSS 3
HTML5 and CSS 3
 
Bruce lawson Stockholm Geek Meet
Bruce lawson Stockholm Geek MeetBruce lawson Stockholm Geek Meet
Bruce lawson Stockholm Geek Meet
 
Bruce lawson-over-the-air
Bruce lawson-over-the-airBruce lawson-over-the-air
Bruce lawson-over-the-air
 
Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland
Bruce Lawson, Web Development 2.0, SparkUp! Poznan PolandBruce Lawson, Web Development 2.0, SparkUp! Poznan Poland
Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland
 
Bruce Lawson HTML5 South By SouthWest presentation
Bruce Lawson HTML5 South By SouthWest presentationBruce Lawson HTML5 South By SouthWest presentation
Bruce Lawson HTML5 South By SouthWest presentation
 
Practical Tips for Mobile Widget development
Practical Tips for Mobile Widget developmentPractical Tips for Mobile Widget development
Practical Tips for Mobile Widget development
 
Bruce Lawson Opera Indonesia
Bruce Lawson Opera IndonesiaBruce Lawson Opera Indonesia
Bruce Lawson Opera Indonesia
 
Standards.next: HTML - Are you mything the point?
Standards.next: HTML - Are you mything the point?Standards.next: HTML - Are you mything the point?
Standards.next: HTML - Are you mything the point?
 

Recently uploaded

Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
Zilliz
 
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Speck&Tech
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
ssuserfac0301
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
Zilliz
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
panagenda
 
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial IntelligenceAI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
IndexBug
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Safe Software
 
Project Management Semester Long Project - Acuity
Project Management Semester Long Project - AcuityProject Management Semester Long Project - Acuity
Project Management Semester Long Project - Acuity
jpupo2018
 
Mariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceXMariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceX
Mariano Tinti
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
panagenda
 
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdfUnlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Malak Abu Hammad
 
Generating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and MilvusGenerating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and Milvus
Zilliz
 
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
Edge AI and Vision Alliance
 
Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
Pixlogix Infotech
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
DanBrown980551
 
Skybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoptionSkybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoption
Tatiana Kojar
 
20240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 202420240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 2024
Matthew Sinclair
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
名前 です男
 
UI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentationUI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentation
Wouter Lemaire
 

Recently uploaded (20)

Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
 
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
 
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial IntelligenceAI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
 
Project Management Semester Long Project - Acuity
Project Management Semester Long Project - AcuityProject Management Semester Long Project - Acuity
Project Management Semester Long Project - Acuity
 
Mariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceXMariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceX
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
 
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdfUnlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
 
Generating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and MilvusGenerating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and Milvus
 
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
 
Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
 
Skybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoptionSkybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoption
 
20240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 202420240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 2024
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
 
UI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentationUI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentation
 

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
  • 4. hair-splitting [ˈhɛəˌsplɪtɪŋ] (noun) the making of petty distinctions (adj) occupied with or based on petty distinctions
  • 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>
  • 15. <ruby> 日本 <rp>(</rp> <rt> にほん </rt> <rp>)</rp> </ruby>
  • 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
  • 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>
  • 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.
  • 28.
  • 30.
  • 31.
  • 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
  • 34.
  • 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
  • 36.
  • 38.
  • 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
  • 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>
  • 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.
  • 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>
  • 63.
  • 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
  • 66.
  • 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
  • 71.
  • 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