Upgrade to Pro — share decks privately, control downloads, hide ads and more …

HTML5 Semantics: You can be a ЗАДРОТ too!

HTML5 Semantics: You can be a ЗАДРОТ too!

A discussion of new HTML5 semantics. Why do we have these ones? Where did they come from? Are they the right ones? Should we be able to make any old shit up?

Bruce Lawson, Opera Software, RIT++ Conference, Moscow, 3 April 2012

6f3ec7315ad0715ae2a5f89a52877218?s=128

bruce lawson

April 05, 2012
Tweet

More Decks by bruce lawson

Other Decks in Technology

Transcript

  1. HTML5 Semantics You can be a ЗАДРОТ too! Bruce Lawson,

    RIT++, Moscow, 3 April 2012
  2. XMLHttpRequest

  3. <canvas> www.flickr.com/photos/specialk-files/428060061

  4. Web Workers

  5. http://www.flickr.com/photos/gareth1953/5300453137/ getUserMedia

  6. 30 new elements Photo by Adam Jones adamjones.freeservers.com

  7. http://www.flickr.com/photos/houseofhall/5927484119/

  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 small element represents side comments such as small print.

    Note: Small print typically features disclaimers, caveats, legal restrictions, or copyrights. Small print is also sometimes used for attribution, or for satisfying licensing requirements.
  11. 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.
  12. Semantics for i18n

  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. Originally ... <time datetime=13:15>Now</time> <time datetime=2011-10-06T13:40Z+01: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. <time> 2.0 ! <time datetime=1886-05>May 1886</time> <time datetime="11-13">13 November (any

    year)</time> <time datetime="1905-W21">week 21 of 1905</time> <time datetime="P4D">4 days</time> <time datetime=-54-03-15>Julius Caesar murdered</time>
  23. <figure>

  24. 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>
  25. HTML5 <figure> <figure> <img src=bruce-remy.png> <figcaption>Bruce and Remy welcome questions

    <small>Photo &copy; Bruce's mum</small> </figcaption> </figure>
  26. None
  27. Structural semantics

  28. None
  29. 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
  30. 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
  31. <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
  32. None
  33. Biscuit and Chica photograph by Brittany Shaw. All rights reserved.

    Used with permission
  34. Sectioning content <section>, <article>, <nav>, <aside>

  35. What's the difference between <section> and <article>?

  36. <section> divides something into parts <article> is a discrete entity

  37. <article> <h1>The Zadrot Twins</h1> <p>Two of St Petersburg's finest markup

    jugglers, Mr Lawson and his close friend Mr Pepelsbey are known throughout Russia as "The Zadrot Twins".</p> <article>
  38. <header> <h1>Exciting blog</h1> </header> <section> <h2>Today's articles</h2> <article>... </article> <article>...

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

    <h3>Dog bites man</h3> ... <article>
  40. <h3>Today's top stories</h3> <article> <h6>Dog bites man</h6> ... <article>

  41. <h6>Today's top stories</h6> <article> <h2>Dog bites man</h2> ... <article>

  42. “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>
  43. Are the new semantics specified enough?

  44. "The header element represents a group of introductory or navigational

    aids." "A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like".
  45. As <CITE>Harry S. Truman</CITE> said… More information can be found

    in <CITE>[ISO-0000]</CITE>
  46. The Golden Rule:

  47. The Golden Rule: There is no Golden Rule

  48. Do we have the right semantics?

  49. Do we need a <login> element? A <share> element?

  50. Гиперкуб из базы данных Существует типичная операция просмотра таблицы базы

    : данных как гиперкуба одна колонка содержит значение в узле , - многомерного куба остальные колонки указывают . многомерные координаты Dmitry Turin, HTML 6.9.1 http://html60.euro.ru/
  51. <time> <person> <location>

  52. <video> <source src=small.webm media="max-width: 380px"> <source src=middle.webm media="max-width: 800px"> <source

    src=big.webm media="min-width: 800px"> <object>... </object> </video>
  53. <picture> <source src=small.png media="max-width: 380px"> <source src=medium.png media="max-width: 800px"> <source

    src=vector.svg media="min-width: 800px"> <img src=medium.png alt=blah> </picture> https://gist.github.com/2159117 http://www.brucelawson.co.uk/2011/notes-on-adaptive-images-yet-again/
  54. Do semantics matter, anyway?

  55. None
  56. <DIV id=:rk class="J-K-I J-J5-Ji L3 J-K-I-JO" tabIndex=0 unselectable="on" closure_hashCode_l16mgm="182" act="">

    <DIV class="J-J5-Ji J-K-I-Kv-H" unselectable="on"> <DIV class="J-J5-Ji J-K-I-J6-H" unselectable="on"> <DIV class=J-K-I-KC unselectable="on"> <DIV class=J-K-I-K9-KP unselectable="on">&nbsp;</DIV> <DIV class=J-K-I-Jz unselectable="on">Search Mail</DIV> </DIV></DIV></DIV></DIV>
  57. Write whatever the fuck you want with some WAI-ARIA sugar

    on top is in some scenarios the only thing what works right now. I do not believe that means we should just let it run its course. The real solution to making a button implemented using five div elements and some scripting accessible is not WAI-ARIA. It is to drastically improve the styling capabilities of <input type="button">. <cite>Anne van Kesteren</cite> http://annevankesteren.nl/2010/04/clean-markup-plea
  58. The Shadow DOM dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html Editor: Dimitri Glazkov (Google)

  59. Web Components AKA Making up any old shit

  60. "Given that browsers will accept, render, and style arbitrary elements,

    I’d pretty much say to just go ahead and do it. Do try to name your elements so they won’t run into problems later, such as prefixing them with an “x” or your username or something, but since browsers support it, may as well capitalize on their capabilities." - Eric Meyer Customizing Your Markup Wed 28 Mar 2012 meyerweb.com/eric/thoughts/2012/03/28/customizing-your-markup/
  61. Semantics are convention

  62. . , Полимодальная организация вероятна Пуантилизм , зародившийся в музыкальных

    микроформах начала столетия нашел далекую историческую параллель в лице , средневекового гокета однако нонаккорд трансформирует , самодостаточный райдер что отчасти объясняет такое - . , количество кавер версий Как отмечает Теодор Адорно райдер . , неустойчив Кластерное вибрато просветляет хамбакер и здесь в качестве модуса конструктивных элементов - . используется ряд каких либо единых длительностей
  63. Bruce Lawson @brucel brucel@opera.com @odevrel

  64. Thanks Richard Ishida for <bdi> screenshots Daniel Davis for <ruby>

    screenshots