54 |
Глава 3.. Что все это значит? |
Строки <!--[if lt IE 9]> и <![endif]--> открывают и закрывают условный комментарий соответственно. Internet Explorer видит в них утверждение: «Если текущий браузер — Internet Explorer вплоть до 8-й версии, то исполнить следующий код». Все остальные браузеры обращаются с условным комментарием, как и с лю- бымдругимHTML-комментарием.В результатеInternetExplorerвплотьдо8-й версии запускает сценарий, а любой другой браузер игнорирует его, что ускоряет загрузку страницы.
Сам по себе код на JavaScript, приведенный выше, довольно прямолинеен. В переменную e заносится массив строк вида "abbr", "article" и т. д. Цикл перебирает эти строки (названия HTML5-элементов) и командой document.createElement() создает соответствующие пустые элементы. Поскольку возвращаемые значения не присваиваются никакой переменной, элементы не попадают в DOM. Однако для Internet Explorer этого достаточно: когда далее на странице будут встречаться непустые элементы тех же типов, они будут правильно отображаться.
Обратите внимание: «далее на странице». Сценарий должен располагаться вначале документа и желательно внутри контейнера <head>, а не в его конце. Таким образом, Internet Explorer будет сначала исполнять сценарий и только потом разбирать теги и атрибуты. Если убрать сценарий далеко вниз, то будет уже поздно: Internet Explorer неверно интерпретирует разметку страницы и ошибочно построит DOM-иерархию. Повторный разбор кода страницы выполняться не будет.
«Облегченную» версию своего сценария Реми Шарп поместил в репозиторий
Google Code (http://code..google..com/p/html5shiv/). Сценарий распространяется под лицензией MIT с открытым исходным кодом, так что вы можете пользоваться им в любом своем проекте. Можно даже ссылаться непосредственно на версию, хра-
нимую Google:
<head>
<meta charset="utf-8" />
<title>Мой блог</title>
<!--[if lt IE 9]>
<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script> <![endif]-->
</head>
Теперь мы готовы приступить к использованию новых семантических элемен-
тов HTML5.
Верхние колонтитулы
Вернемся к странице, с которой мы экспериментируем, и обратим внимание на верхний колонтитул1:
<div id="header">
<h1>Мой блог</h1>
1Основной английский текст веб-страниц дается здесь и далее в русском переводе. —
Примеч. перев.
Верхние колонтитулы |
55 |
<p class="tagline">Только сложные пути ведут к простым решениям.</p>
</div>
...
<div class="entry">
<h2>День в дороге</h2>
</div>
...
<div class="entry">
<h2>Я еду в Прагу!</h2>
</div>
Такая верстка вполне корректна. Если угодно, ее можно оставить как есть, потому что это валидный HTML5. Однако в HTML5, как мы знаем, есть особые семантические элементы для колонтитулов и разделов.
Первым делом избавимся от <div id="header">. Это популярная форма записи, но она ничего не значит. У тега <div> нет собственной семантики, как и у атрибута id (это, конечно, взгляд с точки зрения клиентских программ, которые не умеют судить о содержании информационного блока по значению атрибута id). Можно было бы назвать тот же контейнер <div id="preved"> — и ничего бы не изменилось.
В HTML5 для оформления верхних колонтитулов есть тег <header>. Спецификация приводит много примеров использования <header> в прикладных задачах верстки. Код нашей страницы после внесенной правки будет выглядеть так:
<header>
<h1>Мой блог</h1>
<p class="tagline">Только сложные пути ведут к простым решениям.</p>
...
</header>
Стало лучше, правда? Теперь из кода ясно, что перед нами верхний колонтитул. Поравзятьсязаподзаголовок-теглайн,которыйздесьсверстанобычным,нонестан- дартизованным (как это теперь стало возможно) способом. Оформить теглайн — непростая задача: он должен вести себя как подзаголовок, привязанный к основному заглавию, то есть подзаголовок без следующего за ним раздела.
Заголовочные теги, такие как <h1> и <h2>, определяют структуру страницы. Взятые в совокупности, они формируют краткое содержание документа, в соответствии с которым может быть организована навигация по странице. Программы экранного доступа, опираясь на краткое содержание, помогают слепым пользователям ориентироваться на страницах. Есть веб-сервис (http://gsnedders..html5..org/ outliner/) и браузерное расширение (http://chrispederick..com/work/web-developer/), ко-
торые умеют графически представлять краткое содержание страниц.
В HTML 4построить краткоесодержание страницыможно было только на основе тегов <h1>…<h6>. Схема страницы-образца выглядит таким образом:
Мой блог (h1)
|
+—День в дороге (h2)
|
+—Я еду в Прагу! (h2)
56 Глава 3.. Что все это значит?
Здесь все в порядке, но теглайну «Только сложные пути ведут к простым решениям» места не нашлось. Если бы мы поместили его в контейнер <h2>, в кратком содержании документа появился бы пустой узел:
Мой блог (h1)
|
+—Только сложные пути ведут к простым решениям. (h2)
|
+—День в дороге (h2)
|
+—Я еду в Прагу! (h2)
На самом же деле структура документа не такая. Теглайн не является заголовком одной из записей блога: это подзаголовок, обособленно помещенный на страницу. А если спрятать теглайн в <h2>, а заголовок каждой записи — в <h3>? Нет, так будет только хуже:
Мой блог (h1)
|
+—Только сложные пути ведут к простым решениям. (h2)
|
+—День в дороге (h3)
|
+—Я еду в Прагу! (h3)
Вкратком содержании документа по-прежнему есть пустой узел, который
ктому же присвоил дочерние узлы, по праву принадлежащие корню иерархии. В этом вся незадача: HTML 4 не позволяет оформить теглайн так, чтобы он, будучи одним из подзаголовков, тем не менее не попадал в краткое содержание страницы. Как бы мы ни старались перехитрить компьютер, слова «Только сложные пути ведут к простым решениям» неминуемо осядут в одном из узлов структуры. Вот почему семантически бессмысленную верстку вида <p class="tagline"> мы сочли меньшим злом.
Решение, которое предлагает HTML5, заключается в применении тега <hgroup>. Он функционирует в качестве обертки для двух или нескольких связанных заголовков. Называя их связанными, мы имеем в виду, что в кратком содержании документа они образуют единый узел. При следующем коде страницы:
<header>
<hgroup>
<h1>Мой блог</h1>
<h2>Только сложные пути ведут к простым решениям.</h2>
</hgroup>
...
</header>
...
<div class="entry">
<h2>День в дороге</h2>
</div>
...
<div class="entry">
Рубрикация |
57 |
<h2>Я еду в Прагу!</h2>
</div>
краткое содержание будет выглядеть таким образом:
Мой блог (h1 в составе hgroup)
|
+—День в дороге (h2)
|
+—Я еду в Прагу! (h2)
Чтобы убедиться, что вы правильно пользуетесь заголовками, тестируйте создаваемые вами страницы на сайте HTML5 Outliner.
Рубрикация
Разберемся, как можно преобразовать дальнейший код:
<div class="entry">
<p class="post-date">22 октября 2009 г.</p>
<h2>
<a href="#" rel="bookmark"
title="ссылка на эту запись"> День в дороге
</a>
</h2>
...
</div>
Это тоже валидный HTML5. Однако в HTML5 есть тег <article>, использование которого (в общем случае) при разбивке страницы на статьи или записи более оправданно:
<article>
<p class="post-date">22 октября 2009 г.</p>
<h2>
<a href="#" rel="bookmark"
title="ссылка на эту запись"> День в дороге
</a>
</h2>
...
</article>
Однако все не так просто, и понадобится внести еще одно изменение, которое я сначала покажу, а потом объясню:
<article>
<header>
<p class="post-date">22 октября 2009 г.</p>
58 |
Глава 3.. Что все это значит? |
<h1>
<a href="#" rel="bookmark"
title="ссылка на эту запись"> День в дороге
</a>
</h1>
</header>
...
</article>
Ясно?Тег<h2> былзаменентегом<h1> вобертке<header>.Какработаеттег<header>, вы уже видели. В данном случае его функция — заключать в себя все элементы верхнегоколонтитулазаписи(датупубликациии название).Но…какбытьстем,чтовдокументедолженбытьтолькоодинзаголовок<h1>?Непострадаетлиотнашейправки краткое содержание документа? Нет. Чтобы понять почему, вернемся на шаг назад.
ВHTML 4 краткое содержание строилось с опорой только на теги <h1>…<h6>. Если веб-мастер хотел видеть в смысловой схеме документа один корневой узел, он должен был ограничиться лишь одним заголовком <h1>. Но спецификация HTML5 задает новый алгоритм построения краткого содержания с учетом современных семантических тегов. Согласно этому алгоритму, тег <article> создает новый раздел, то есть очередной дочерний узел корня краткого содержания. Между тем в HTML5 внутри каждого раздела может иметься свой собственный тег <h1>.
Итак, произошла большая и, как мы сейчас увидим, благотворная перемена. Действительно, многие веб-страницы сверстаны по образцам: часть содержимого берется из одного источника и вставляется куда-либо на страницу, другой фрагмент (из другого источника) помещается еще куда-то. Этот подход поощряют многие руководства по гипертекстовой разметке: «Вот кусок HTML-кода, скопируйте его и вставьте на страницу». Если копируется небольшая порция кода, то проблем обычно не возникает; но как быть с копированием и вставкой целых разделов? Тогда в руководствах писали, к примеру, так: «Вот кусок HTML-кода. Скопируйте его, вставьте в текстовый редактор и отредактируйте теги-заголовки, чтобы они согласовывались по вложенности с соответствующими заголовками страницы, на которую вы затем будете вставлять данный код».
ВHTML 4 не было обобщенного заголовочного элемента, а было шесть заголовков от <h1> до <h6>: числа в названиях тегов строго определяли порядок вложения. Контролировать такую иерархию, мягко говоря, неудобно, особенно на странице, которая не «написана» (в собственном смысле), а «собрана» из фрагментов. Эта проблема решена в HTML5 благодаря новым элементам, вводящим разделы, и новым правилам использования существующих тегов-заголовков. Если вы не боитесь применять семантические элементы верстки, советую писать так:
<article>
<header>
<h1>Моя запись в блоге</h1>
</header>
<p>Lorem ipsum… (и далее по тексту классического текста-"рыбы")</p>
</article>