Разметка страницы

Ничто не стоит в этом мире на одном месте, и языки программирования не являются исключением из этого правила. Мы приближаемся к новой эре web-программирования семимильными шагами, даже несмотря на хвост из устаревших версий браузеров, не поддерживающих новую специфику языка HTML 5.

И, хоть современный разработчик еще не может себе позволить в полной мере использовать при создании сайта разметку согласно HTML 5, но знать основы и следить за ситуацией по развитию и обновлению браузеров, он просто обязан.

В связи с этим начинаю цикл статей, посвященных новой версии всеми известного и любимого языка создания сайтов - HTML 5 (англ. HyperText Markup Language, version 5).

Первый черновик спецификации стал доступен широкой общественности 22 января 2008. Спецификация сейчас находится в разработке и может находиться в этой стадии ещё несколько лет, хотя предполагается, что отдельные части HTML 5 будут закончены и реализованы в браузерах до того, как спецификация официально получит статус рекомендации.

И для начала поговорим об основных элементах разметки html - страницы.

1 DOCTYPE.

Не может не радовать новая запись старого тега DOCTYPE. Отныне не нужно будет открывать сохраненные файлы и копировать сохраненный тег оттуда. Теперь он пишется просто и понятно:

"Почему не html5" ?, - спросите Вы. Ответ на данный вопрос прост: как выяснилось, DOCTYPE HTML5 не принимается Internet Explorer 6, тогда как сам документ, составленный в HTML5 и с правильным DOCTYPE отображается правильно.

Говоря проще, IE6, как обычно, подкачал...

2 Новые элементы

Новые элементы привлекают наше внимание с первого взгляда. Спецификация W3C на самом деле прислушалось к мнению общественности и ввела большое количество новых элементов в рассчете на будущее. Теперь у нас будет все, начиная с простых структурных элементов, которые обещают стать мощными API и обеспечить нас достаточной свободой для создания новых приложений и при этом уйти от необходимости использовать флэш при отображении видео и мультипликации, что в свою очередь приведет к разгруженности страницы.

2.1 Элемент <header>

Элемент header предназначен для отображения всей вводной информации, типа лготипа, названия сайта и тому подобное.

2.2 Элемент <nav>

Элемент nav содержит ссылки на другие разделы сайта или страницы. Не нужно все ссылки заключать в эти тэги, только основную навигацию.

2.3 Элемент <section>

Этот тэг заключает в себе динамический контент или программное приложение. То же самое делает div, но section отделяет целый кусок документа.

2.4 Элемент <article>

Отделяет кусок страницы, текст, который может стоять отдельно, например, блоговский пост, форумное сообщение, комментарий пользователя или любая независимая от остального контента статья.

2.5 Элемент <aside>

Элемент aside содержит контент, относящийся к основному содержимому страницы. Как правило, это боковые колонки, где размещаются ссылки на похожие материалы, облака тэгов и т.п. Могут также содержать выносы – цитаты из текста.

2.6 Элемент <footer>

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

На первый взгляд кажется, что эти новые элементы делают то же самое, что обычные <div id>, но если div id с уникальным именем может использоваться на странице только один раз, эти элементы ведут себя также, как привычные нам тэги <p>, <h1> и прочие, и их можно использовать на странице столько раз, сколько необходимо.

Элементы header и footer не просто отделяют шапку и подвал страницы, но определяют шапку и подвал каждого элемента на ней, как делают в таблицах thead и tfoot.

Преимущество новой разметки в том, что она семантически определяет элементы страницы (легче ориентироваться в коде). Однако, использовать ее нужно с умом, иначе легко переборщить.

Иллюстрацию к рассмотренным в статье тегам вы видели в начале статьи.