Технология HTML5 принесла нам множество интересных функций и полезных тэгов для структуризации ваших проектов. Новые тэги вполне вероятно заменят множественные ухищрения с div’ами. Давайте рассмотрим подробнее.
Определение структуры
«section»
Это тематическое группирование контента, зачастую указываемое до заголовка, а также после подвала. Секции могут быть разветвлены внутри каждого отдельного элемента, если это понадобится, и могут содержать в себе любое количество обычной разметки.
«header»
Секция заголовка – это, в основном, заголовок группирования заголовков, но она также может содержать в себе дополнительную информацию о секции.
«footer»
Подвал, в основном, содержит в себе информацию о самой секции (кем был создан проект, ссылки на похожие ресурсы, информация об авторском праве и т.п.).
«nav»
Определяет область с навигацией. Например, список ссылок. Nav должен быть на одном уровне вместе с основным содержимым, заголовком и подвалом.
«article»
Независимая запись в блоге, журнале и так далее.
«aside»
Данный тэг определяет контент, который поверхностно схож с содержимым вокруг него.
Как это всё работает вместе?
Итак, давайте наглядно рассмотрим процесс применения этих новшеств на простой странице блога.
<!DOCTYPE html>
<html>
<head>
<title>Standard Blog</title>
</head>
<body>
<header>
<h1><a href="#">Standard Blog</a></h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Archives</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<section>
<article>
<header>
<h1><a href="#">Title</a></h1>
</header>
<section>
<p>Lorem ipsum...</p>
</section>
</article>
<article>
<header>
<h1><a href="#">Title</a></h1>
</header>
<section>
<p>Lorem ipsum...</p>
</section>
</article>
<article>
<header>
<h1><a href="#">Title</a></h1>
</header>
<section>
<p>Lorem ipsum...</p>
</section>
</article>
</section>
<footer>
<p>Copyright © 2008 All Rights</p>
</footer>
</body>
</html>
Заметка: В плане разметки этот пример достаточно прост, но некоторые моменты особенно выделены.
Как видно, сами по себе тэги уже очень наглядны, нежели когда мы задаём ID к DIV’у. Здесь также стоит отметить дополнительное преимущество закрывающего тэга, так как «/article» гораздо легче понять и определить назначение, нежели which «div id="что-то"» с закрывающим тэгом «/div».
Можно ли это применять сейчас?
В целом, можно, но с некоторыми условиями. Кстати, это будет работать во всех браузерах, включая даже IE6. Нам нужно лишь кое-что учесть для того, чтобы новая технология заработала.
Для начала, так как многие браузеры всё ещё плохо справляются с типом документов HTML5, они могут даже и не подозревать о наличии новых тэгов в данной технологии. К счастью, благодаря гибкости браузеров, они отлично справляются и с неизвестными тэгами. Эти новые тэги HTML5 являются структурными, и они, конечно же, являются блочными элементами. Итак, когда мы задаём им стиль CSS, мы обязательно должны включать параметр display: block;.
Включите этот простенький кусочек CSS, и все новые тэги сейчас же станут рабочими. Начиная прямо с сегодняшнего дня. И, конечно же, когда HTML5 будет восприниматься более серьезно и широко, можно будет исключить и этот параметр, так как он будет внесён в набор параметров браузера по умолчанию.
Поддержка IE
Есть ещё кое-что, что нужно знать, если вы собираетесь делать так, чтобы ваш проект работал в IE. Получилось так, что данный браузер будет работать со всеми новыми тэгами, но проблема в том, что он не станет распознавать какую-либо стилизацию CSS, применённую к этим тэгам, и это нехорошо. К счастью, IE нужен всего лишь хороший пинок, а точнее – немного кода javascript. Всё, что нам нужно сделать, это создать DOM с javascript для каждого тэга, и тогда наш любимый Internet Explorer волшебным образом тут же начинает воспринимать стилизацию новых тэгов. Код будет выглядеть примерно так, и он может быть размещен в голове нашего документа, либо содержимое тэга скрипта может быть размещено во внешнем файле, который подключен в документ.
<script>
document.createElement('header');
document.createElement('footer');
document.createElement('section');
document.createElement('aside');
document.createElement('nav');
document.createElement('article');
</script>
Перед тем, как мы отойдем от этого кода, нужно учесть ещё кое-что о тэге скрипта в HTML5. HTML5 будет воспринимать type="text/javascript" в любом элементе скрипта, так что это тоже надо использовать. Всё гораздо проще.
Подкрепление
Итак, мы можем начать разработку уже прямо сейчас, и при этом пользоваться новыми тэгами, предложенными в HTML5. Посредством нескольких простых трюков, мы можем заставить эти тэги работать. Так что, когда в следующий раз вы будете браться за разработку веб-сайта, не забудьте применять HTML5, и сделайте разметку своего сайта немного более понятной.