Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

XMLHttpRequest

Slide 3

Slide 3 text

www.flickr.com/photos/specialk-files/428060061

Slide 4

Slide 4 text

Web Workers

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Some presentational elements are gone Also align on etc background on bgcolor on etc www.w3.org/TR/html5-diff/#absent-elements

Slide 9

Slide 9 text

Some presentational elements redefined to have semantics http://www.w3.org/TR/html5-diff/#changed-elements

Slide 10

Slide 10 text

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.

Slide 11

Slide 11 text

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.

Slide 12

Slide 12 text

Semantics for i18n

Slide 13

Slide 13 text

日本

Slide 14

Slide 14 text

日本 にほん

Slide 15

Slide 15 text

日本 ( にほん )

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Aroma - 3 reviews

RTL LETTERS - 5 reviews

Slide 19

Slide 19 text

Aroma - 3 reviews

RTL LETTERS - 5 reviews

rishida.net/blog/?p=564, follow @r12a

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Originally ... Now Now My birthday Julius Caesar murdered May 1886

Slide 22

Slide 22 text

2.0 ! May 1886 13 November (any year) week 21 of 1905 4 days Julius Caesar murdered

Slide 23

Slide 23 text

Slide 24

Slide 24 text

HTML3 Ground dweller: Nicodamus bicolor builds silk snares

A small hairy spider light fleshy red in color with a brown abdomen. J. A. L. Cooke/OSF

Slide 25

Slide 25 text

HTML5 Bruce and Remy welcome questions Photo © Bruce's mum

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

Structural semantics

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

and or similar elements are almost certainly going to be defined at some point, along with (for the main body of the page), or or to refer to a unit of text bigger than a section but smaller than a page, to mean a, well, side bar, 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
. http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2004-August/002114.html

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

Sectioning content , , ,

Slide 35

Slide 35 text

What's the difference between and ?

Slide 36

Slide 36 text

divides something into parts is a discrete entity

Slide 37

Slide 37 text

The Zadrot Twins

Two of St Petersburg's finest markup jugglers, Mr Lawson and his close friend Mr Pepelsbey are known throughout Russia as "The Zadrot Twins".

Slide 38

Slide 38 text

Exciting blog

Today's articles

... ...

Slide 39

Slide 39 text

In HTML5, these are all equivalent

Today's top stories

Dog bites man

...

Slide 40

Slide 40 text

Today's top stories

Dog bites man
...

Slide 41

Slide 41 text

Today's top stories

Dog bites man

...

Slide 42

Slide 42 text

“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

Today's top stories

Dog bites man

...

Slide 43

Slide 43 text

Are the new semantics specified enough?

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

As Harry S. Truman said… More information can be found in [ISO-0000]

Slide 46

Slide 46 text

The Golden Rule:

Slide 47

Slide 47 text

The Golden Rule: There is no Golden Rule

Slide 48

Slide 48 text

Do we have the right semantics?

Slide 49

Slide 49 text

Do we need a element? A element?

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

Slide 52

Slide 52 text

...

Slide 53

Slide 53 text

blah https://gist.github.com/2159117 http://www.brucelawson.co.uk/2011/notes-on-adaptive-images-yet-again/

Slide 54

Slide 54 text

Do semantics matter, anyway?

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

 
Search Mail

Slide 57

Slide 57 text

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 . Anne van Kesteren http://annevankesteren.nl/2010/04/clean-markup-plea

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

Web Components AKA Making up any old shit

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

Semantics are convention

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

Bruce Lawson @brucel brucel@opera.com @odevrel

Slide 64

Slide 64 text

Thanks Richard Ishida for screenshots Daniel Davis for screenshots