Воплощение концепции семантической разметки

В соответствии с подзаголовком я не собираюсь тут излагать теорию семантики в web вообще и семантической верстки в частности, с ней каждому заинтересованному разработчику предлагаю ознакомиться самостоятельно, а мы займемся практикой.

Известно, что веб-страницу любой сложности можно сверстать, используя почти исключительно элементы <div> и <span>. С помощью их можно представить любое содержимое (разумеется, за исключением специфичных мультимедиа-элементов). В реальной жизни стремление к такому подходу выливается в написание кода, подобного этому:

<div class=»header»>

<div class=»title»>

<span class = »Name»>

HTML5 — путеводитель по технологии </span>

<span class = »subName»> введение в HTML5 </span>

</div>

<div class=»logo»>

</div>

<div class=”content”>

<div class = ”nav” >….</div>

<div class = articles>

<div class=”article” id =”1”>

<span class = ”title”>HTML — это теги</span> <span class = ”datetime”>2012-01-08</span> <div class = ”article_text”>

</div>

</div>

<div class=”article” id =”2”>

<span class = ”title”>Формы HTML5</span> <span class = ”datetime”>2012-02-02</span> <div class = ”article_text”>

</div>

</div>

</div>

</div>

<div class=”footer”>

<span class=”copyright”>curveSoft inc</span> <div>

Знакомая картина? Тут все по-человечески понятно — верстальщик, вынужденный делать различие между элементами разметки по их содержимому, присваивает им классы с чепловекопонятными и, возможно, в пределах некоего рабочего коллектива унифицированными именами (селекторами). Этот способ позволяет ориентироваться в разметке человеку, но вот браузеру узнать, что в <div class=”nav”> скрывается именно меню сайта, не представляется возможным. А кроме браузеров, существуют еще поисковые роботы, различные контент-анализаторы и программы экранного доступа, для правильного понимания которыми содержимого веб-страницы очень важна понятная, семантическая разметка.

Явно назрела необходимость в переменах, и они произошли. Причем совсем не внезапно, а довольно планомерно.

Компания Opera Software с 2004 года ведет разработку интересного средства исследования веб-среды — поисковой системы, индексирующей структуру и элементы объектной модели сайтов. Она называется Metadata Analysis and Mining Application (MAMA). С помощью этого инструмента было проведено немало интересных исследований, но нас сейчас интересует простой параметр — наиболее употребляемые наименования классов в html-разметке.

В настоящий момент эта таблица выглядит следующим образом (Http://devfiles. myopera. com/articles/572/):

1

Footer

179528

21

Left

47822

2

Menu

146673

22

Style5

47645

3

Style1

138308

23

Right

45855

4

Msonormal

123374

24

Date

44613

5

Text

122911

25

Contentpaneopen

44395

6

Content1

13951

26

Moduletable

44188

7

Title

91957

27

Link

43629

8

Style2

89851

28

Blog

42469

9

Header

89274

29

Bodytext

40450

10

Copyright

86979

30

Style6

39496

11

Button

81503

31

Mainlevel

38993

12

Main

69620

32

Contentheading

38982

13

Style3

69349

33

Top

37720

14

Small

68995

34

Normal

37101

15

Nav

68634

3 5

Inputbox

36342

16

Clear

68571

36

Article_seperator

35366

17

Search

59802

37

Style7

34710

18

Style4

56032

38

News

34543

19

Logo

48831

39

Navbar

33912

20

Body

48052

40

Links

33830

Тут показаны результаты по частоте используемых значений атрибута class для 2 148 723 случайным образов выбранных url.

Для полной картины посмотрим еще результаты по атрибуту id:

21

Layer3

42825

22

Form1

42119

23

Autonumber2

41960

24

Table3

41504

25

Home

41040

26

Copyright

38893

27

Page

37274

28

Layer4

35327

29

Image2

35215

30

Left

34953

31

Searchform

33184

32

__viewstate

32714

33

Table_01

32540

34

Table4

31583

3 5

Map

30269

36

Active_menu

30243

37

Right

30206

38

Image3

29759

39

News

29078

40

Body

29037


1

Footer

288061

2

Content

228661

3

Header

223726

4

Logo

121352

5

Container

119877

6

Main

106327

7

Table1

101677

8

Menu

96161

9

Layer1

93920

10

Autonumber1

77350

11

Search

74887

12

Nav

72057

13

Wrapper

66730

14

Top

66615

15

Table2

57934

16

Layer2

56823

17

Sidebar

52416

18

Image1

48922

19

Banner

44592

20

Navigation

43664


Тут данные собраны с 1 806 424 url-адресов.


Результаты, по-моему, довольно интересны по нескольким показателям, но главное тут то, что названия используемых нами в верстке примеров (header, content, footer) имеют довольно высокий рейтинг — в первую двадцатку вошли различные вариации на темы навигационного меню (menu, nav, navigation, active_menu, navbar) и специфических элементов, часто встречающихся на веб-сайтах (search, copyright, sidebar). Руководствовались ли этими данными разработчики HTML5, неизвестно (впрочем, скорее да), но новые теги, появившиеся в языке разметки, во многом совпадают с этими классами — если не по названию, то по назначению. Переверстаем наш пример с использованием HTML5:

<header>

<hgroup>

<h1>HTML5 — путеводитель по технологии<Д1> 2>Ведение в HTML5</h2>

</hgroup>

<div class=”logo”></div>

</header>

<nav>…</nav>

<section id=”articles”>

<article id = 1 >

<span class = ”title”>HTML — это теги</span>

<time pubdata datetime=”2012-01-08”>8 января</time>

<div class = ”article_text”>

</div>

</article>

<article id = 2 >

<span class = ’’’Формы HTML5</span>

<time pubdata datetime=”2012-02-02”>2 февралж/л <div class = ”article_text”>

</div>

</article>

</section>

<footer>

<span class=”copyright”>curveSoft inc</span> </footer>

Как видите, не все удалось заменить новыми элементами, разговор о семантике мы продолжим в главе, посвященной микроданным, но и сейчас верстка стала более читаемой и логичной.

Давайте рассмотрим новые теги подробнее.

Прежде всего бросаются в глаза контейнеры <header></header> и <footer></footer>. Их назначение понятно по названию — они содержат в себе «шапку» и «подвал» страницы (мне такие определения кажутся более уместны, чем верхний и нижний колонтитулы). Возникает вопрос: как содержимое, ограниченное этими тегами, должно отображаться в браузере? И вот тут важно понять (если вы хотите заниматься разработкой на HTML5) одну простую и важную вещь. Какого-либо отображения внешнего вида элементов HTML5 в стандарте не предусмотрено! То есть разметке важно сообщить, что ограниченная <header> область — это шапка страницы. Что делать с этой ценной информацией браузеру — дело исключительно браузера, а точнее, его производителей. Такой подход вполне оправдан — при современном разнообразии устройств для просмотра веб-страниц даже самые каноничные элементы разметки нужно отображать очень по-разному, скажем, на экране плазменной панели или коммуникатора.

Теги <header> и <footer> могут быть не только верхнего уровня, допустимо, когда эти элементы встречаются у каждой статьи или, например, цитаты.

Вооружившись новым пониманием сути разметки, идем дальше.

Элемент <nav> предназначен для отображения на странице навигационного меню. Как? — см. два абзаца выше. Автоматически его содержание в список преобразовываться, скорее всего, не будет, и потребуются теги <lu> и <li>. Можно также включать внутрь этого контейнера заголовки, картинки и придавать ему любой внешний вид, это не меняет сути — это навигационный блок.

Тег <hgroup> создан для обозначения группы заголовков. Он нужен для того, чтобы все подзаголовки, возможно, картинки и гиперссылки внутри этого контейнера, воспринимались как единая логическая единица.

Стоп! По-моему, мы что-то пропустили. Где тег <content>? Ну или <main>, <page>, в общем, контейнер, заключающий основное содержание страницы? Его нет. И это не упущение разработчиков, а их продуманная позиция. Суть ее в том, что content — это просто то, что не занято контейнерами <header> и <footer>.

В нашем примере таким тегом, несущим основное содержание страницы, служит тег <section>, но предназначен он совершенно не для этого. Использование данного элемента на самом деле обычно вызывает вопросы и даже ошибки, хотя тут все просто — он действительно делит на секции. Что именно? В данном случае страницу (за секцией статей может следовать секция анонсов, например, затем секция новостей). Но ничто не мешает использовать его же для порционирования содержимого внутри статьи.

Для самих статей вводится специальный тег <article>. Он обрамляет независимые фрагменты текста, способные существовать и вне контекста страницы. Например, это могут быть записи в блоге, видеоролики и прочее содержимое, которое может быть объединено, как новости в новостную ленту.

Тег <time>, ответственный за разметку указания даты/времени, приносит дополнительные возможности их отображения. Фактически сама временная отметка может быть обозначена в каком угодно формате, а вот в атрибуте datetime время должно быть указано в ISO-стандарте, обеспечивая ее правильное понимание разными роботами (например, Atom/RSS-агрегатором). Булевый атрибут pubdata означает, что указанное время является временем публикации контента.

Кстати, <time> — это тот тег, на котором разработчики начали задумываться, не стоит ли остановиться? Подробнее о проблеме сказано в главе о микроформатах, а тут ограничимся только тем, что на момент написания этих строк данный элемент был на грани исключения из спецификации.

За пределами нашего примера остался такой немаловажный элемент, как <aside>, предназначенный для так называемых «врезок» — текстовых фрагментов, имеющих отношение к основному контенту страницы, но не вписывающихся в ее структуру. Например, это может быть биографическая справка об упомянутом в статье персонаже или список ссылок на статьи, близкие по тематике, помещенный сбоку от основного материала.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *