SlideShare ist ein Scribd-Unternehmen logo
1 von 73
Downloaden Sie, um offline zu lesen
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

Weitere ähnliche Inhalte

Was ist angesagt?

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 - AltranRobert Nyman
 
State of jQuery '09
State of jQuery '09State of jQuery '09
State of jQuery '09jeresig
 
Keypoints html5
Keypoints html5Keypoints html5
Keypoints html5dynamis
 
Building an HTML5 Video Player
Building an HTML5 Video PlayerBuilding an HTML5 Video Player
Building an HTML5 Video PlayerJim 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 2010Patrick 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 appkamal.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 TuscanyLuciano 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.2010Patrick Lauke
 
Dreamweaver CS6, jQuery, PhoneGap, mobile design
Dreamweaver CS6, jQuery, PhoneGap, mobile designDreamweaver CS6, jQuery, PhoneGap, mobile design
Dreamweaver CS6, jQuery, PhoneGap, mobile designDee 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 RubyFabio Akita
 
Game Development Using HTML 5
Game Development Using HTML 5Game Development Using HTML 5
Game Development Using HTML 5osa_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 2013Loiane Groner
 
Progressive Web Apps - Intro & Learnings
Progressive Web Apps - Intro & LearningsProgressive Web Apps - Intro & Learnings
Progressive Web Apps - Intro & LearningsJohannes Weber
 
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 moreYan Shi
 
Drupal Theme Development - DrupalCon Chicago 2011
Drupal Theme Development - DrupalCon Chicago 2011Drupal Theme Development - DrupalCon Chicago 2011
Drupal Theme Development - DrupalCon Chicago 2011Ryan 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 RubyFabio 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 2012steveheffernan
 

Was ist angesagt? (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
 

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

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.2011Patrick Lauke
 
Html5 oslo-code-camp
Html5 oslo-code-campHtml5 oslo-code-camp
Html5 oslo-code-campbrucelawson
 
Slow kinda sucks
Slow kinda sucksSlow kinda sucks
Slow kinda sucksTim Wright
 
How to create a basic template
How to create a basic templateHow to create a basic template
How to create a basic templatevathur
 
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 developersHernan Mammana
 
Semantic accessibility
Semantic accessibilitySemantic accessibility
Semantic accessibilityIan 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 & CSS3Darren 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_v2hussain534
 
Html5 and web technology update
Html5 and web technology updateHtml5 and web technology update
Html5 and web technology updateDoug Domeny
 
Html 5, a gentle introduction
Html 5, a gentle introductionHtml 5, a gentle introduction
Html 5, a gentle introductionDiego Scataglini
 
ViA Bootstrap 4
ViA Bootstrap 4ViA Bootstrap 4
ViA Bootstrap 4imdurgesh
 
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 1pptxMaruthiPrasad96
 
Diazo: Bridging Designers and Programmers
Diazo: Bridging Designers and ProgrammersDiazo: Bridging Designers and Programmers
Diazo: Bridging Designers and ProgrammersTsungWei 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
 

Ähnlich wie 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...
 

Mehr von 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 Appsbrucelawson
 
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 goingbrucelawson
 
Leveraging HTML 5.0
Leveraging HTML 5.0Leveraging HTML 5.0
Leveraging HTML 5.0brucelawson
 
HTML5 Multimedia Accessibility
HTML5 Multimedia AccessibilityHTML5 Multimedia Accessibility
HTML5 Multimedia Accessibilitybrucelawson
 
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 goingbrucelawson
 
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, JavaScriptbrucelawson
 
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 Standardsbrucelawson
 
Bruce lawson-html5-aria-japan
Bruce lawson-html5-aria-japanBruce lawson-html5-aria-japan
Bruce lawson-html5-aria-japanbrucelawson
 
Bruce lawson Stockholm Geek Meet
Bruce lawson Stockholm Geek MeetBruce lawson Stockholm Geek Meet
Bruce lawson Stockholm Geek Meetbrucelawson
 
Bruce lawson-over-the-air
Bruce lawson-over-the-airBruce lawson-over-the-air
Bruce lawson-over-the-airbrucelawson
 
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 Polandbrucelawson
 
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 presentationbrucelawson
 
Practical Tips for Mobile Widget development
Practical Tips for Mobile Widget developmentPractical Tips for Mobile Widget development
Practical Tips for Mobile Widget developmentbrucelawson
 
Bruce Lawson Opera Indonesia
Bruce Lawson Opera IndonesiaBruce Lawson Opera Indonesia
Bruce Lawson Opera Indonesiabrucelawson
 
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
 

Mehr von 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?
 

Kürzlich hochgeladen

Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 

Kürzlich hochgeladen (20)

Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 

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