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

bruce lawson

April 05, 2012

More Decks by bruce lawson

Other Decks in Technology


  1. 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
  2. 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.
  3. 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.
  4. <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>
  5. 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>
  6. HTML5 <figure> <figure> <img src=bruce-remy.png> <figcaption>Bruce and Remy welcome questions

    <small>Photo &copy; Bruce's mum</small> </figcaption> </figure>
  7. 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
  8. 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
  9. <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
  10. <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>
  11. “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>
  12. "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".
  13. Гиперкуб из базы данных Существует типичная операция просмотра таблицы базы

    : данных как гиперкуба одна колонка содержит значение в узле , - многомерного куба остальные колонки указывают . многомерные координаты Dmitry Turin, HTML 6.9.1 http://html60.euro.ru/
  14. <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/
  15. <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>
  16. 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
  17. "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/
  18. . , Полимодальная организация вероятна Пуантилизм , зародившийся в музыкальных

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