Что такое семантическая вёрстка в 2013 году. Какие «уровни» семантики возможны. Какими средствами мы располагаем, чтобы сделать вёрстку семантичной: теги HTML5, атрибуты, микроформаты и другие возможности. Семантическая вёрстка vs. семантический веб. Какой будет семантическая вёрстка в будущем? Позволит ли она сделать веб лучше?

1. Семантика
или
смерть?
Наташа
Арефьева

2. nely-­‐snork.lj.ru
@n_snork
2

3. Самое
интересное
-­‐
Вся
правда
о
семантической
верстке
и
разметке
-­‐
Какой
может
стать
семантическая
разметка
в
будущем
3

4. Основные
понятия
-­‐
Семантическая
верстка
HTML5
&
CSS
-­‐
Семантическая
разметка
Microdata,
RDFa,
ARIA
Role...
4

5. Обозначение
5

6. Цель
Научить
разметку
понимать,
какой
контент
она
содержит
6

7. HTML5!
7

8. Доклад
про
разницу
между
<sec`on>
и
<ar`cle>,
коротенько...
минут
на
40!
8

9. Семантика
vs.
?
9

10. Семантической
верстки
не
существует
10

11. 11

12. Два
вопроса:
-­‐
Что
такое
веб-­‐стандарты?
-­‐
Что
такое
семантическая
верстка?
12

13. Есть
спецификация
Так
давайте
ей
следовать!
13

14. Я
всё-­‐таки
коротенько...
14

15. Посмотрим
правде
в
глаза
-­‐
Да,
это
сложно!
-­‐
Да,
стандарт
открытый.
-­‐
Не
хватает
аргументов
ЗА.
15

16. Посмотрим
правде
в
глаза
-­‐
Да,
это
сложно!
-­‐
Да,
стандарт
открытый.
-­‐
Не
хватает
аргументов
ЗА.
16

17. Посмотрим
правде
в
глаза
-­‐
Да,
это
сложно!
-­‐
Да,
стандарт
открытый.
-­‐
Не
хватает
аргументов
ЗА.
17

18. —
Ну
как,
поисковики
стали
выше
ранжировать
сайты,
использующие
теги
HTML5?
18

19. —
Нет!
А
должны
были?
—
...
—
И
не
будут!
19

20. 20

21. Два
вопроса:
-­‐
Кто
виноват?
-­‐
Что
делать?
21

22. Не
останавливаться!
Правила
жизни
самураев
22

23. Посмотрим
правде
в
глаза
-­‐
2
-­‐
Новая
структура
-­‐
Больше
возможностей
каскада
23

24. Outline
HTML4
-­‐
в
структуре
участвуют
все
элементы
-­‐
все
без
исключения!
-­‐
иерархия
заголовков
H1-­‐H6
24

25. Outline
HTML5
-­‐
специальные
теги:
sec`on,
nav,
aside,
ar`cle
-­‐
«презентативное»
исключаются
-­‐
иерархия
создается
через
sec`on
-­‐
есть
элементы,
исключающиеся
из
структуры
blockquote,
figure,
details,
td...
25

26. Как
это
работает?
26

27. Unbtled
1.
Un`tled
BODY
1.
Un`tled
NAV
2.
От
создателей
штанов
3.
Прильни
к
батарее
27

28. Title
it!
1.
Accessibility
links
2.
BBC
naviga`on
3.
BBC
Homepage
1.
From
BBC
News
2.
News
28

29. Структурные
теги
—
отражение
и
расширение
продуманной
структуры
документа!
29

30. Суп
можно
приготовить
из
любых
тегов
30

31. +
1
слой
31

32. C
июня
2013
года
количество
хостов
в
зоне
RU
-­‐
использующих
doctype
HTML5
выросло
с
12.5%
до
16.3%
-­‐
использующих
новые
теги
HTML5
выросло
с
6.2%
до
9.4%
32

33. Хосты,
использующие
Doctype
HTML5
>15%
в
зоне
COM
>20%
в
зоне
RU
даные
за
ноябрь
2013
года
33

34. Хосты,
использующие
структурные
элементы
HTML5
>7%
в
зоне
COM
>11%
в
зоне
RU
даные
за
ноябрь
2013
года
34

35. Сlass
&
id
-­‐
Осмысленность
-­‐
Отделение
от
визуального
представления
-­‐
Единообразие
35

36. Кто
здесь?
<DIV id="ja-topnav">
<DIV class="w1">
<DIV class="w2">
<DIV class="w3">
36

37. Кто
здесь?
—
2
37

38. Кто
здесь?
—
3
<DIV class="b_button
category-list-switch
headerDropListSwitch">
38

39. Зачем
разработчику
читаемые
названия?
-­‐
Поддержка
в
команде
-­‐
Простая
передача
знаний
-­‐
Хм...
чей
это
код
тут
лежит?
39

40. Семантическая
разметка
40

41. Больше
информации
— Знакомьтесь,
<девочка>Алиса</девочка>,
это <еда>варенье</еда>
41

42. Кхм...
но
это
же
XML!
42

43. Семантическая
разметка
-­‐
ARIA
Role
-­‐
Microdata,
RDFa,
Microformats...
-­‐
Open
Graph,
Twi•er
card
-­‐
...
43

44. WAI-­‐ARIA
Accessible
Rich
Internet
Applicabons
w3.org/TR/aria-­‐in-­‐html
44

45. 45

46. main
banner
conten`nfo
naviga`on
form
search
applica`on
...
Роли
presenta`on
w3.org/TR/aria-­‐in-­‐html
46

47. В
рабочем
черновике
спецификации
слово
semanbcs
употреблено
35
раз!
w3.org/TR/aria-­‐in-­‐html
47

48. Правила
использования
ARIA
1.
Используйте
нативную
семантику.
2.
Не
изменяйте
семантического
значения.
w3.org/TR/aria-­‐in-­‐html
48

49. Добавление
ARIA
role
—
перекрывает
семантику
элемента
w3.org/TR/aria-­‐in-­‐html
49

50. Кто
поддерживает:
-­‐
JAWS
(Windows)
-­‐
VoiceOver
(Mac
OS)
-­‐
NVDA
(Windows)
50

51. Бонус
-­‐
дополнительный
атрибут
DIV[role="banner"],
DIV[role="navigation"]{
display: none;
}
51

52. А
что-­‐нибудь
однозначное?
-­‐
Microformats
microformats.org
-­‐
Microdata
и
словари
schema.org
-­‐
RDFa
rdfa.info
-­‐
Open
Graph
protocol
opg.me
и
др.
-­‐
Twi•er
Card
-­‐
...
52

53. Зачем
нам
это?
-­‐
Привлечь
пользователя
-­‐
Сделать
его
счастливым
53

54. Чистая
квартира
после
косметического
ремонта
54

55. 55

56. Даешь
визуальное
представление
в
массы!
56

57. And
the
winner
is...
По
данным
Yandex,
сентябрь
2013
57

58. Open
Graph
protocol
opengraphprotocol.org
58

59. Twi‹er
card
dev.twi•er.com/docs/cards
59

60. Вторым
к
фишину
По
данным
Yandex,
сентябрь
2013
60

61. Microdata
HTML5
goo.gl/ImUyY
61

62. Давая
больше
информации,
мы
привлекаем
к
себе
внимание
62

63. —
Как
оказывается
просто
приготовить
«птичье
молоко!
63

64. —
Как,
оказывается,
просто
приготовить
«птичье
молоко!
64

65. За
любым,
даже
самым
прекрасным
представлением
должен
стоять
уникальный
контент
Правила
жизни
самураев
65

66. Так
семантика
или
смерть?

67. Рецепт:
Использовать
семантику
по
назначению,
в
разумных
дозах!

68. Чаще
занимайтесь
семантикой!
68

69. nely-­‐snork.lj.ru
@n_snork
Огромное
спасибо
Артемию
Ломову,
Сергею
Мезенцеву
за
помощь
в
подготовке
доклада.
69