50 |
Глава 3.. Что все это значит? |
этой компании!). В сообществе разработчиков микроформатов был впоследствии стандартизован упрощенный синтаксис rel="tag". На большинстве таких блоговых сервисов, где разрешено связывать отдельные записи с категориями или ключевыми словами, используется именно ссылочное отношение rel="tag". Браузеры не делают с такими ссылками ничего особенного, а вот поисковики судят по ним о тематике страниц.
Новые семантические элементы HTML5
Приведение разметки к стандарту HTML5 не только укорачивает запись. Это шанс воспользоваться набором новых семантических элементов. Рассмотрим теги, определенные в спецификации HTML5.
<section> — обобщенно понимаемый раздел документа или приложения. В данном контексте раздел — это порция содержимого, сгруппированная по тематическому признаку и, как правило, оснащенная заголовком. Примеры разделов — главы в книгах, вкладки в диалоговых окнах, пронумерованные части научных публикаций. Главная страница сайта может содержать несколько разделов: вводные замечания, новости, контактная информация и пр.
<nav> — раздел, содержащий ссылки на другие страницы или на части данной страницы, то есть навигационный раздел. Тегом <nav> следует оформлять не все группы ссылок на странице; его назначению отвечают только большие навигационные блоки. В частности, нижний колонтитул обычно содержит несколько ссылок на разные страницы сайта: соглашение об использовании, главная страница, информация об авторах… Для верстки в этом случае подойдет тег <footer>, а надобности в <nav> нет.
<article> — фрагмент страницы, документа, изображения или целого сайта, который самостоятельно значим, может независимо распространяться или повторно использоваться (например, в агрегаторах лент). Это может быть запись на форуме, в блоге, статья в журнале или газете, пользовательский комментарий, интерактивный виджет или гаджет, а также любая другая независимая единица контента.
<aside> — раздел страницы, содержимое которого лишь косвенно связано с темой всего прочего содержимого документа и может рассматриваться отдельно от него. В полиграфии такие разделы зачастую оформляются как врезки. Тег <aside> можно использовать для создания «типографских» эффектов врезки, выделенной цитаты, для рекламных блоков (теглайнов), групп тегов <nav> и для прочего неосновного содержимого страницы.
<hgroup> — заголовок раздела. Контейнер <hgroup> используется для группировки тегов <h1>…<h6>, которые представляют собой заголовки разных уровней: основной, подзаголовок, рекламный слоган, второе название.
<header> — верхний колонтитул. Это группа вспомогательных материалов ввод ного или навигационного характера. Считается желательным, но не обязательным, чтобы тегом <header> был оформлен заголовок раздела — группа тегов
Большое отступление о том, как браузеры обрабатывают незнакомые элементы |
51 |
<h1>…<h6> или тег <hgroup>. Кроме того, <header> иногда содержит оглавление раздела, форму поиска и логотип (-ы).
<footer> — нижний колонтитул родительского элемента: раздела или всей страницы. Обычно содержит информацию о разделе и его создателе, ссылки на родственные документы, замечания об авторских правах и т. п. Нижний колонтитул не всегда, но обыкновенно находится в конце раздела. Он может и сам содержать несколько разделов, в качестве которых, как правило, выступают приложения, указатели, выходные данные, многословные лицензионные соглашения идругое содержимое подобного рода.
<time> — может содержать указание времени по 24-часовой шкале или точной даты по григорианскому календарю, в запись которой можно также включить время и часовой пояс.
<mark> — подсвечивает на странице какой-либо важный текст, к которому пользователь, возможно, еще пожелает вернуться.
Понимаю,чтовамнетерпитсяприступитькиспользованиюновыхэлементов,иначе вы бы уже давно бросили читать эту главу. Однако отвлечемся еще ненадолго.
Большое отступление о том, как браузеры обрабатывают незнакомые элементы
Каждый браузер «знает», поддержка каких HTML-элементов в нем совершенно точно реализована. Например, браузер Mozilla Firefox хранит список таких эле-
ментов в файле nsElementTable.cpp (http://mxr..mozilla..org/seamonkey/source/parser/ htmlparser/src/nsElementTable..cpp). Элементы, не входящие в этот список, расцениваются программой как незнакомые. Для обработки незнакомых элементов надо ответить на два вопроса.
Разметка в вопросах и ответах
Какой стиль следует применить к элементу?
Так, например, контейнер <p> имеет отступы сверху и снизу, <blockquote> — поле слева, а заголовок <h1> отображается более крупным шрифтом, чем основной текст.
Каково место элемента в иерархии DOM?
В файле nsElementTable.cpp браузера Mozilla Firefox содержится информация о том, какие типы элемен-
тов может принимать как дочерние каждый из знакомых элементов. Запись вида <p><p> означает с точки зрения браузера, что перед началом второго абзаца первый заканчивается: это элементы-сестры (а не родительский и дочерний). Но если написать <p><span>, то <span> не закроет абзац, потому что (как знает Firefox) <p> — это блочный тег, а <span> — строковый. Значит, в DOM-иерархию <span> будет помещен как дочерний относитель но <p>.
Разные браузеры по-разному отвечают на эти вопросы (непривычного человека такое откровение может обескуражить). Из числа популярных браузеров больше всего трудностей в этом деле испытывает Internet Explorer.
Ответить на первый вопрос вроде бы довольно просто. Незнакомым элементам не следует приписывать какой-либо особый стиль, а надо просто позволить
52 Глава 3.. Что все это значит?
унаследовать стили, описанные для них в явном виде в CSS-таблице при верстке. Однако Internet Explorer версий 6, 7 и 8 не применяет стили к незнакомым элементам. Так, если в коде страницы написано:
<style type="text/css">
article { display: block; border: 1px solid red }
</style>
...
<article>
<h1>Добро пожаловать в Ад1</h1>
<p>Вы здесь <span>первый день</span>.</p>
</article>
то Internet Explorer (до IE8 включительно) не обведет содержимое элемента ARTICLE рамкой красного цвета. Когда писались эти строки, Internet Explorer 9 еще пребывал в стадии бета-тестирования, но Microsoft заявляет, что в 9-й версии таких проблем не будет (это подтверждают и разработчики).
Вторая проблема — построение DOM-иерархии. С этим Internet Explorer тоже справляется хуже других популярных браузеров. Если IE не распознает элемент как знакомый, он вставит его в DOM как пустой узел без потомков и все элементы, которые, по мнению веб-программиста, должны выступать как дочерние по отношению к нему, окажутся его сестрами.
Покажем различие с помощью несложных схем. Вот DOM-дерево, построенное в соответствии с требованиями HTML5:
article
|
+—h1 (дочерний узел article)
| |
| +—текстовый узел "Добро пожаловать в Ад"
|
+—p (дочерний узел article, сестра h1)
|
+—текстовый узел "Вы здесь "
|
+—span
| |
| +—текстовый узел "первый день"
|
+—текстовый узел "."
А вот DOM-дерево, которое строит Internet Explorer:
article (нет потомков) h1 (сестра article)
|
+—текстовый узел "Добро пожаловать в Ад" p (сестра h1)
1В оригинале упомянута вымышленная компания Initech из комедии «Офисное пространство», малоизвестной у нас. — Примеч. перев.
Большое отступление о том, как браузеры обрабатывают незнакомые элементы |
53 |
|
+—текстовый узел "Вы здесь "
|
+—span
| |
| +—текстовый узел "первый день"
|
+—текстовый узел "."
Существует удивительный способ устранить эту проблему. Если с помощью JavaScript создать пустой тег <article>, то, прежде чем этот тег в действительности будет задействован на странице, Internet Explorer волшебным образом обнаружит <article> и применит к нему нужный стиль. В DOM-иерархию этот пустой тег не попадает, однако достаточно одной вставки (на страницу), чтобы IE «научился» правильно оформлять все незнакомые элементы такого типа на странице. Образец:
<html>
<head>
<style>
article { display: block; border: 1px solid red }
</style>
<script>document.createElement(“article”);</script>
</head>
<body>
<article>
<h1>Добро пожаловать в Ад</h1>
<p>Вы здесь <span>первый день</span>.</p>
</article>
</body>
</html>
Такая запись работает корректно во всех версиях Internet Explorer, вплоть до IE6.
Более того, можно вставить на страницу по одному разу все элементы HTML5. Они не попадают в DOM, и пользователь их не видит, но за счет такой вставки вебмастер может прибегать к новым возможностям, не беспокоясь об отображении страниц в браузерах без поддержки HTML5. Эту задачу решил Реми Шарп (Remy Sharp) (http://remysharp..com/2009/01/07/html5-enabling-script). Его сценарий имеет не-
сколько версий, код которых в упрощенном виде выглядит одинаково:
<!--[if lt IE 9]> <script>
var e = ("abbr,article,aside,audio,canvas,datalist,details," + "figure,footer,header,hgroup,mark,menu,meter,nav,output," + "progress,section,time,video").split(',');
for (var i = 0; i < e.length; i++) { document.createElement(e[i]);
}
</script> <![endif]-->