Беглый обзор элементов HTML 5
Черновой стандарт HTML 5
описывает набор новых семантически значимых элементов для описания
стандартного шаблона вэб страницы. Использованием элементов, которые
являются "значимыми” (то есть описывают свое содержимое) упрощает чтение
и организацию кода, а также облегчает задачу для поисковых механизмов и
по чтению и организации вашего контента.
Элементы HTML 5, которые используются в нашем примере:
- header
- footer
- nav
- article
- hgroup
Только чтение названий элементов указывает на их назначение. Для этого их и придумали!
<div> во всех ваших без табличных дизайнах, и начать использовать
для заголовков "<header>”, а для футеров "<footer>”.
<hgroup>. Он определяет группу заголовочных
элементов(<h1>- <h6>), таким образом вы, например, можете
группировать название поста блога и подзаголовок вместе. Нужно полагать
данный элемент не заголовком страницы, а заголовком текущей секции.
Шаг 1: HTML
Представим наиболее часто используемый шаблон - 2 колонки с заголовком и футером:
Такой шаблон обычно сопровождается водопадом
элементов <div> (или <table>). Но в HTML 5 можно создавать
код страницы вполне естественно.
<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<html>
<head>
<title><!-- Ваш заголовок --></title>
</head>
<body>
<header>
<!-- ... -->
</header>
<nav>
<!-- ... -->
</nav>
<div id="main">
<!-- ... -->
</div>
<footer>
<!-- ... -->
</footer>
</body>
</html>
И для завершения нужно добавить несколько простых сообщений в элемент "main”:
<article>
<hgroup>
<h2>Title</h2>
<h3>Subtitle</h3>
</hgroup>
<p>
<!-- --->
</p>
</article>
Теперь у нас есть целостный шаблон HTML, который не
содержит ничего лишнего кроме значимых тэгов. Просто читать, просто
обрабатывать, просто изменять дизайн.
"Почему мы не использовали <section> вместо
<div> для основной колонки? Разве это не было бы более
"значимым”?” Конечно, вы можете сделать так, и такой способ пройдет
проверку. Но элемент <section> не имеет таких функций шаблона. В
соответствии со спецификацией:
Элемент section не является контейнером. В случаях,
когда какой-либо элемент нуждается в форматировании или для удобства
создания скриптов, автору следует использовать элемент <div>.
Общее правило таково, что элемент section подходит только если
содержимое элемента будет включаться непосредственно в структуру
документа.
Шаг 2: CSS
<div> позиционирование элементов выполняется
просто — мы знаем, как они обрабатываются каждым браузером, поэтому
очень просто написать CSS код для них. Однако, это только частный
случай, так как каждый браузер применяет к странице таблицу стилей по
умолчанию. Даже если Вы ничего не указали, существует CSS, который
работает каждый раз при загрузке страницы в Firefox или IE.
Например, стиль, который используется для <div> в файле по умолчанию "html.css”, который используется Firefox:
html, div, map, dt, isindex, form {
display: block;
}
Но что происходит, когда браузер находит элемент,
который не может распознать? Определенного ответа на данный вопрос нет.
Такой элемент может остаться без стиля вообще, может использоваться
стиль по умолчанию, а может вообще не выводится на экран. Таким образом,
нам нужно быть полностью уверенными, что любой из наших новых элементов
будет иметь стиль CSS:
/* Примечание: Делаем элементы HTML 5 блочными для придания целостности стилю */
header, nav, article, footer, address {
display: block;
}
Теперь мы можем обращаться с этими элементами как с <div>.
Проблема
Теперь давайте взглянем на наш шаблон. Код собран в
единое целое и протестирован в нескольких браузерах. Так шаблон выглядит
в Safari 4:
Однако в Internet Explorer 6 вид будет таким:
Что не так на рисунке? Однозначная установка display: block; в CSS указывает браузеры на наши намерения в отношении элемента.
К сожалению, IE игнорирует элементы, которые не
может распознать, независимо от CSS. Наш контент смещается влево в
родительском контейнере, как будто элементов HTML 5 не существует.
Каким-то образом нам нужно заставить IE выводить неизвестные элементы и
задавать для них соответствующие стили.
Шаг 3: JavaScript
К счастью, существует способ заставить IE распознавать новые элементы с помощью простого кода JavaScript.
Просто используется вызов document.createElement()для каждого нового не распознанного элемента.
Обычно вызов данного метода используется для вставки
элемента непосредственно в ответвление DOM; другими словами, в
существующий контейнер внутри тэга <body>. Вы также может
использовать его для фиксирования неизвестного элемента. Однако, этот
трюк работает при вызове document.createElement() в тэге<head> без ссылок на содержащий элемент!
document.createElement("article");
document.createElement("footer");
document.createElement("header");
document.createElement("hgroup");
document.createElement("nav");
Remy Sharp написал "Скрипт HTML 5 Enabling,” который проделывает такой трюк для всех элементов HTML 5.
После добавления JavaScript в наш пример, взглянем на него снова в Internet Explorer:
Отлично. Internet Explorer 6 теперь изображает код HTML 5 также, как и Safari 4.
Заключение
Многие дизайнеры ожидают полноценной поддержки HTML 5
в большинстве браузеров. Мы можем начинать использовать HTML 5 уже
сегодня - одна строчка в CSS и одная строчка кода в JavaScript на
элемент.
