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

Наташа  Арефьева

Семантика  или  смерть?

2

nely-­‐snork.lj.ru

@n_snork

Самое  интересное

3

-­‐  Вся  правда  о  семантической      верстке  и  разметке

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

Основные  понятия

4

-­‐  Семантическая  верстка  HTML5    &  CSS

-­‐  Семантическая  разметкаMicrodata,  RDFa,  ARIA  Role...

Обозначение

5

Научить  разметку  понимать,  

какой  контент  она  содержит

Цель

6

7

HTML5!

8

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

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

10

Семантическойверстки

не  существует

11

-­‐  Что  такое        веб-­‐стандарты?

-­‐  Что  такое        семантическая  верстка?

Два  вопроса:

12

13

Есть  спецификация

Так  давайте  ей  следовать!

14

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

15

Посмотрим  правде  в  глаза

-­‐  Да,  это  сложно!

-­‐  Да,  стандарт  открытый.

-­‐  Не  хватает  аргументов  ЗА.

16

Посмотрим  правде  в  глаза

-­‐  Да,  это  сложно!

-­‐  Да,  стандарт  открытый.

-­‐  Не  хватает  аргументов  ЗА.

17

Посмотрим  правде  в  глаза

-­‐  Да,  это  сложно!

-­‐  Да,  стандарт  открытый.

-­‐  Не  хватает  аргументов  ЗА.

18

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

19

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

20

-­‐  Кто  виноват?

-­‐  Что  делать?

Два  вопроса:

21

22

Не  останавливаться!

Правила  жизни  самураев

23

Посмотрим  правде  в  глаза  -­‐  2

-­‐  Новая  структура

-­‐  Больше  возможностей  каскада  

Outline  HTML4

24

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

Outline  HTML5

25

-­‐  специальные  теги:  sec`on,  nav,  aside,  ar`cle

-­‐  «презентативное»  исключаются

-­‐  иерархия  создается  через  sec`on

-­‐  есть  элементы,  исключающиеся  из  структуры  blockquote,  figure,  details,  td...  

26

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

1.  Un`tled  BODY1.  Un`tled  NAV2.  От  создателей  штанов3.  Прильни  к  батарее

27

Unbtled

28

Title  it!

1.  Accessibility  links2.  BBC  naviga`on3.  BBC  Homepage

1.  From  BBC  News2.  News

29

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

30

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

31

+  1  слой

32

C  июня  2013  года  количество  хостов  в  зоне  RU

-­‐  использующих  doctype  HTML5    выросло  с  12.5%  до  16.3%

-­‐  использующих  новые  теги  HTML5        выросло  с  6.2%  до  9.4%

>15%  в  зоне  COM

>20%  в  зоне  RU  

даные  за  ноябрь  2013  года

33

Хосты,  использующие  Doctype  HTML5

>7%  в  зоне  COM

>11%  в  зоне  RU  

даные  за  ноябрь  2013  года

34

Хосты,  использующие  структурные  элементы  HTML5

35

Сlass  &  id-­‐  Осмысленность

-­‐  Отделение  от  визуального      представления

-­‐  Единообразие

36

Кто  здесь?

<DIV id="ja-topnav"> <DIV class="w1"> <DIV class="w2"> <DIV class="w3">

37

Кто  здесь?  —  2

38

Кто  здесь?  —  3

<DIV class="b_button category-list-switchheaderDropListSwitch">

39

Зачем  разработчику  читаемые  названия?  

-­‐  Поддержка  в  команде

-­‐  Простая  передача  знаний

-­‐  Хм...  чей  это  код  тут  лежит?

40

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

— Знакомьтесь, <девочка>Алиса</девочка>, это <еда>варенье</еда>

41

Больше  информации

42

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

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

43

-­‐  ARIA  Role-­‐  Microdata,  RDFa,  Microformats...-­‐  Open  Graph,  Twi�er  card-­‐  ...

44

WAI-­‐ARIA    Accessible  Rich  Internet  

Applicabons

w3.org/TR/aria-­‐in-­‐html

45

46

mainbannerconten`nfonaviga`onformsearchapplica`on...

Роли

w3.org/TR/aria-­‐in-­‐html

presenta`on

47

В  рабочем  черновике  спецификации  слово  semanbcs  употреблено

35  раз!w3.org/TR/aria-­‐in-­‐html

Правила  использования  ARIA  

48

1.  Используйте  нативную  семантику.

2.  Не  изменяйте  семантического  значения.

w3.org/TR/aria-­‐in-­‐html

49

Добавление  ARIA  role  —  перекрывает  семантику  

элемента

w3.org/TR/aria-­‐in-­‐html

50

Кто  поддерживает:

-­‐  JAWS  (Windows)

-­‐  VoiceOver  (Mac  OS)

-­‐  NVDA  (Windows)

51

Бонус  -­‐  дополнительный  атрибут

DIV[role="banner"],DIV[role="navigation"]{

display: none;}

А  что-­‐нибудь  однозначное?

52

-­‐  Microformats  microformats.org

-­‐  Microdata  и  словари  schema.org

-­‐  RDFa  rdfa.info-­‐  Open  Graph  protocol  opg.me  и  др.

-­‐  Twi�er  Card-­‐  ...

Зачем  нам  это?

53

-­‐  Привлечь      пользователя

-­‐  Сделать  его        счастливым

54

Чистая  квартира  после  

косметического  ремонта

55

56

Даешь    визуальное    представление  в  

массы!  

57

And  the  winner  is...

По    данным    Yandex,  сентябрь  2013

58

opengraphprotocol.org

Open  Graph  protocol  

59

Twi�er  card

dev.twi�er.com/docs/cards

60

Вторым  к  фишину

По    данным    Yandex,  сентябрь  2013

Microdata  HTML5

61

goo.gl/ImUyY

62

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

внимание

63

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

64

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

65

За  любым,  даже  самым  прекрасным  

представлением  должен  стоять  уникальный  контент

Правила  жизни  самураев

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

Использовать  семантику

по  назначению,  в  разумных  дозах!

Рецепт:

68

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

69

nely-­‐snork.lj.ru

@n_snork

Огромное  спасибо  Артемию  Ломову,Сергею  Мезенцеву  за  помощь  в  подготовке  доклада.