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

HTML5 Semantics You can be a ЗАДРОТ too! Bruce Lawson,
RIT++, Moscow, 3 April 2012

XMLHttpRequest

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

Web Workers

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

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

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

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

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.

Semantics for i18n

http://my.opera.com/tagawa/blog/the-html5-ruby-element-in-words-of-one-syllable-or-less

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

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>

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

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 © Bruce's mum</small> </figcaption> </figure>

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

Biscuit and Chica photograph by Brittany Shaw. All rights reserved.
Used with permission

Sectioning content <section>, <article>, <nav>, <aside>

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

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

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

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

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

Do we have the right semantics?

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

Гиперкуб из базы данных Существует типичная операция просмотра таблицы базы
: данных как гиперкуба одна колонка содержит значение в узле , - многомерного куба остальные колонки указывают . многомерные координаты Dmitry Turin, HTML 6.9.1 http://html60.euro.ru/

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

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"> </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

The Shadow DOM dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html Editor: Dimitri Glazkov (Google)

Web Components AKA Making up any old shit

"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/

Semantics are convention

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

Bruce Lawson @brucel [email protected] @odevrel

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

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

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

More Decks by bruce lawson

Other Decks in Technology

Featured

Transcript