Сниппет структуры страницы HTML 5.
Любой web-мастер, если он пытается верстать страницы сайта с помощью топора, ножа, палки колбасы и «пол-литра» водки — ретроград и убийца здравого смысла. Потому как настоящий специалист ценит время, причём не только своё, но и заказчика, более того, web-мастер ответственен перед Вечностью, которая, если что не так, может и по башке въехать, стоит только пренебречь принципами научной организации труда.
Иными словами, нужно не только пережёвывать содержимое носоглотки, не только уметь пользоваться разными вариантами софта, но и иметь заранее созданные заготовки, куски кода, или то и другое вместе, ибо в этом – единство теории и практики в деле многократного повышения производительности труда.
Начиная с этого поста, я начинаю весеннее метание в массы собственных наработок, дабы, прежде всего самому ни хрена не забыть, ну и также – поделиться опытом с менее искушёнными коллегам и просто с теми, кто сейчас вот смотрится в этот текст и думает: «А какого, собственно, чёрта сей крендель разошёлся?»
Отвечаю: я потому разошёлся, что умной книги ты всё равно не осилишь, а потому лучше слушай меня-дурака.
Итак, берём базовый макет сайта, окучиваем его ещё не принятым языком разметки HTML 5 и балдеем от красоты забитых в неё элементов и от не менее красивого сенематичного кода.
Потому что HTML 5 с его полным набором новых элементов существенно упрощает процесс создание структуры страниц.
Смотрим: большинство страниц, написанных на HTML 4, включают широкий набор общих блоков, таких, как верхняя часть <div id="header"></div>, нижняя часть <div id="footer"></div>, навигация <div id="nav"></div>, и т.д. Здесь в порядке вещей размечать их, используя теги div и присваивая каждому описывающий id или class.
HTML 5 вводит же несколько новых элементов и атрибутов. Некоторые из них технически являются эквивалентами div. Это в основном от того, что текущей версии HTML 4 недостаёт семантики в конкретном описании частей. HTML 5 избегает подобного с помощью ввода новых элементов для представления каждой из частей в отдельности.
Блоки div могут быть заменены новыми элементами: header, footer, nav, section, article, aside и footer. Вместо того чтобы использовать тэг <div> для различных секций страницы, мы будем использовать соответствующие семантические теги, что значительно облегчит жизнь поисковым системам в выяснении типа контента, расположенного на странице.
HTML-структура теперь будет такой:
<!doctype html>
<html lang="ru-RU">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="style.css" media="all">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<header>
<h1><a href="#" id="logo">Название сайта</a></h1>
</header>
<nav>
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">Об авторе</a></li>
<li><a href="#">Карта сайта</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</nav>
<section>
<article>
<header>
<h1>Заголовок статьи</h1>
</header>
<p>Образец текста. "Рыба".</p>
</article>
<aside>
<section>
<header>
<h3>Например архив</h3>
</header>
<ul>
<li><a href="#">2010</a></li>
</ul>
</section>
</aside>
</section>
<footer>
<p>© Автор</p>
</footer>
</body>
</html>
Это выглядит как обычная HTML-разметка, но есть несколько моментов, которые стоит отметить:
- В HTML 5, есть только один doctype. Он объявляется в начале страницы через . В отличие от существующих громоздких доктайпов, объявление 5-ой версии кратко и лаконично. Самое интересное в том, что большинство современных сайтов уже сейчас можно перевести в HTML 5, просто изменив строку с doctype и не меняя больше ничего. Это связанно с тем, что синтаксис HTML 5 полностью совместим с HTML 4и, соответственно, XHTML1-документами.
- Объявление кодировки в HTML 5 так же притерпело изменения. Выглядит оно теперь вот так:
<meta charset=utf-8 />. - Джава-скрипт заставляет понимать новые теги Internet Explorer (HTML 5 будет работать даже в IE6!). Остальные браузеры их уже знают.
- Тэг header, является контейнером для вступительных элементов, таких, как заголовок или логотип. Он также может содержать оглавление или поисковую форму.
- Навигация создается с использованием маркированного списка, который заключен в тег nav.
- Тэг section — для каких-то частей страницы.
- Тэг article — для основного контента: статей, комментариев и т.д.
- Тэг aside — для дополнительного контента (например, информация в сайдбаре).
- Тэг footer — для "подвала" сайта: обычно он содержит информацию о разделе, например, имя автора, ссылки на похожие документы, копирайт и тому подобное.
В результате получается картинка, вид которой напрямую зависит от того, какая в таблице стилей задана разметка и какая типографика. Но об этом я буду разглагольствовать в следующем посте, который, если не врут пиксели в мониторе и звёзды в небе, получится родить в ближайшие дни.
