В соответствии с подзаголовком я не собираюсь тут излагать теорию семантики в 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>, предназначенный для так называемых «врезок» — текстовых фрагментов, имеющих отношение к основному контенту страницы, но не вписывающихся в ее структуру. Например, это может быть биографическая справка об упомянутом в статье персонаже или список ссылок на статьи, близкие по тематике, помещенный сбоку от основного материала.
Добавить комментарий