Новые теги

В HTML5 для структуры кода введено несколько новых тегов: <article>, <aside>, <footer>, <header>, <nav>, которые заменяют в некоторых случаях привычный <div>. Хотя кажется, что особой разницы между тегами <div class="header"> и <header> нет, между ними лежит огромная

пропасть. Теги ориентированы не на людей, которым нет смысла заглядывать в исходный код страницы, а на машины, интерпретирующих код. Машины или роботы не понимают <div class="header">, для них это типовой тег разметки — замени его на <div class="abrakadabra">

и смысл не поменяется. Другое дело <header>, робот, обнаружив этот тег, воспринимает его именно как шапку сайта или раздела.

Что это даёт в итоге? Поисковые системы начинают лучше индексировать сайт, потому что чётко отделяют контент страницы от вспомогательных элементов. Речевые браузеры, предназначенные для слепых людей, пропускают заголовок и переходят непосредственно к содержимому. Сайты могут автоматически обмениваться контентом и другой информацией между собой. Все эти возможности называются семантикой и позволяют представить данные в удобном для роботов виде.

У нас уже есть сайт на XHTML — lionindesert.ru, поэтому будет довольно просто перевести его на HTML5. Так, шапка сайта поменяется незначительно (пример 9.2).

Пример 9.2. Использование <header>

<header>

<div class="header-bg">

<img src="images/header-title.png" alt="Как поймать льва в пустыне" />

</div>

</header>

Попытка добавить в стилях фон к тегу <header> ни к чему не привела, фон отображаться не желает. Все новые теги следует сделать вначале блочными через свойство display, тогда они начнут корректно выводиться в браузере. В примере 9.3 показан код для создания шапки сайта.

Данный пример будет работать во всех браузерах, кроме IE7 и IE8. Internet Explorer не добавляет стиль

к элементам, которые не понимает. Это недоразумение можно исправить, если создать фиктивный элемент с помощью JavaScript. Для этого включим в <head> такой код.

<script>

document.createElement("header");

</script>

Если на странице встречается один тег, этот скрипт вполне подойдёт для работы. Но не хочется повторять строку десять раз для десяти разных тегов, поэтому автоматизируем этот процесс через цикл. Сами теги указываются списком, разделяясь запятой (пример 9.4).

Пример 9.4. Скрипт для IE

<!--[if lt IE 9]> <script>

var e = ("article,aside,figcaption,figure,footer,header,hgroup,nav,section,time").split

);for (var i = 0; i < e.length; i++) { } document.createElement(e[i]);

</script> <![endif]-->

Сам скрипт заключается в условные комментарии, чтобы выполнялся только для IE версии 8.0 и ниже. В IE9 поддержка новых тегов HTML5 уже включена.

Пример выше не обязательно вставлять к себе на сайт, можно воспользоваться общедоступным скриптом написанным Реми Шарпом и распространяемым по лицензии MIT. Для этого достаточно указать на него ссылку, как показано в примере 9.5.

Пример 9.5. Скрипт для IE

<!--[if lt IE 9]>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->

Все указанные скрипты должны располагаться в коде перед CSS.

Таким образом, для полноценного использования тегов HTML5 во всех браузерах достаточно выполнить три условия:

1. установить доктайп <!DOCTYPE html>;

2.включить скрипт из примера 9.4 или 9.5;

3.в стилях для новых тегов установить display: block.

Теперь рассмотрим некоторые теги HTML5 более подробно, чтобы понять область их применения.

<article>

Задаёт содержание сайта вроде новости, статьи, записи блога, форума или др. В примере 9.6 показано добавление двух тегов <article>.

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" /> <title>article</title>

</head>

<body>

<header><h1>Следы невиданных зверей</h1></header>

<article>

История о том, как возле столовой появились загадочные розовые следы с шестью пальцами, и почему это случилось.

</article>

</body>

</html>

<aside>

Определяет блок который не относится к основному контенту для размещения рубрик, ссылок на архив, меток и другой информации (пример 9.7). Такой блок, если он располагается сбоку, называется, как правило, «сайдбар» или «боковая панель».

Пример 9.7. Использование <aside> HTML 5 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" /> <title>aside</title>

<script>

document.createElement('aside');

document.createElement('article');

</script>

<style> aside {

background: #f0f0f0; /* Цвет фона */ padding: 10px; /* Поля */

width: 200px; /* Ширина сайдбара */ }float: right; /* Обтекание слева */

article {

margin-right: 240px; /* Отступ справа */ }display: block; /* Блочный элемент */

</style>

</head>

<body>

<aside>

<p>Экономьте электричество</p> <p>Хороший язык</p>

<p>Чья палка больше</p>

</aside>

<article>

История о том, как приходилось экономить электричество, какие меры для этого принимались, и куда оно на самом деле уходило.

</article>

</body>

</html>

<figure>

Используется для группирования любых элементов, например, изображений и подписей к ним

(пример 9.8).

Пример 9.8. Использование <figure> HTML 5 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" /> <title>figure</title>

<script>

document.createElement('figure');

document.createElement('figcaption');

</script>

<style> figure {

background: #5f6a72; /* Цвет фона */ padding: 10px; /* Поля вокруг */ display: block; /* Блочный элемент */ width: 150px; /* Ширина */

float: left; /* Блоки выстраиваются по горизонтали */ margin: 0 10px 10px 0; /* Отступы */

}text-align: center; /* Выравнивание по центру */

figcaption {

}color: #fff; /* Цвет текста */

</style>

</head>

<body>

<article>

<figure>

<p><img src="images/thumb1.jpg" alt="" /></p>