Обучение
продвижению сайтов
+7 (812) 9-515-415

Структура кода и новые теги в HTML5

Код любой страницы должен начинаться с указания доктайпа.Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, поскольку HTML существует в нескольких версиях. Доктайп (doctype) для HTML5 единственный и самый короткий, что уже упрощает жизнь верстальщика

<!DOCTYPE html>

Изменения претерпели и другие теги, так, у тега <html> нет атрибута xmlns, а кодировка документа сократилась до такой записи:

<meta charset="utf-8">

Можно продолжать указывать кодировку и старым способом:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

Атрибут type у тега <script> и <style> можно опустить, браузер автоматически понимает содержимое этих тегов и ему уже не требуется явно об этом напоминать.

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

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

Тег <header>

Давайте для начала сделаем шапку сайта с помощью тега <header>

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

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

<style>
header {
display: block;
background: #00B0D8 url(images/header-gradient.png) repeat-x;
}
</style>

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

<script>
document.createElement("header");
</script>

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

Скрипт для 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]-->

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

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

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

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

 

Тег <article>

Задаёт содержание сайта вроде новости, статьи, записи блога, форума или др.

<!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>article</title>
 </head>
 <body>
 <header>
<h1>Следы невиданных зверей</h1>
</header>
 <article>История о том, как возле столовой появились загадочные розовые следы с шестью пальцами, и почему это случилось. </article>
 </body>
 </html>

Тег <aside>

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

<!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>

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

<!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>
 <figcaption>Софийский собор</figcaption>
 </figure>
 <figure> <p><img src="images/thumb2.jpg" alt=""></p>
 <figcaption>Польский костёл</figcaption>
 </figure>
 </article>
 </body>
 </html>

Тег <figcaption>

Содержит описание для тега <figure>. Тег <figcaption> должен быть первым или последним элементом в группе.

Тег <footer>

Задаёт «подвал» сайта или раздела, в нем обычно располагается имя автора, дата документа, контактная и правовая информация.

<!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>footer</title>
 </head>
 <body>
 <header>
 <h1>Персональный сайт Кристины Ветровой</h1>
 </header>
<article>
<h2>Добро пожаловать!</h2>
 <p>Рада приветствовать вас на своем сайте.</p>
</article>
<footer> Copyright Кристина Ветрова </footer>
 </body>
 </html>

Тег <hgroup>

Используется для группирования заголовков веб-страницы или раздела.

<!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>hgroup</title>
 </head>
 <body>
 <hgroup>
 <h1>Кристина Ветрова</h1>
 <h2>Персональный сайт</h2>
 </hgroup>
 </body>
 </html>

Тег <nav>

Задаёт навигацию по сайту. Если на странице несколько блоков ссылок, то в <nav> обычно помещают приоритетные ссылки. Также допустимо использовать несколько тегов <nav> в документе. Запрещается вкладывать <nav> внутрь <address>.

<!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>nav</title>
 </head>
 <body>
<header> <h1>Чебурашка и крокодил Гена</h1> </header>
<nav><a href="1.html">Чебурашка</a> | <a href="2.html">Гена</a> | <a href="3.html">Шапокляк</a> | <a href="4.html">Лариска</a></nav>
<article>
<h2>Добро пожаловать!</h2>
</article>
 </body>
 </html>

Тег <section>

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

<!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>section</title>
 </head>
 <body>
 <section>
 <h2>Съёмки фильма Полипропилен</h2>
 <p>История о том, как снимали фильм, где герои отдыхали на пляже, потом пришёл антагонист, избил протагонистов, сбросил их в бассейн, и что из этого получилось.</p>
 </section>
 <section>
 <h2>Хороший язык</h2>
 <p>История о том, как проходила студия изучения языка эсперанто, в то время, как над ней, на веранде велась студия приколистов, где травились анекдоты, и что из этого получилось.</p>
 </section>
 </body>
 </html>

Тег <time>

Помечает текст внутри тега <time> как дата, время или одновременно дата и время. Может указываться непосредственно внутри контейнера <time>, либо задаваться через атрибут datetime .

Дата и время задается в международном формате ISO 8601. Примеры оформления приведены в таблице.

Форматы даты и времени
Значение Формат Пример
Год ГГГГ 2012
Месяц и год ГГГГ-ММ 2012-12
Полная дата ГГГГ-ММ-ДД 2012-12-23
Дата и время с минутами ГГГГ-ММ-ДДTчч:мм 2004-07-24T18:18
Дата и время с секундами ГГГГ-ММ-ДДTчч:мм:сс 2004-07-24T18:18:18
Дата и время с часовым поясом ГГГГ-ММ-ДДTчч:мм:сс±чч:мм 2004-07-24T18:18:18+04:00

Для каждой единицы существует своя заданная форма и ограничения.

  • Год — задается четырьмя цифрами (1860).
  • Месяц — две цифры (01 — январь, 02 — февраль, 12 — декабрь).
  • День — две цифры от 01 до 31.
  • Час — две цифры от 00 до 23.
  • Минуты — две цифры от 00 до 59.
  • Секунды — две цифры от 00 до 59.
  • Часовой пояс — часы и минуты с указанием знака плюс или минус.

Дата и время разделяются между собой заглавной латинской буквой T. Часовой пояс при необходимости пишется после времени со знаком плюс или минус. К примеру, для Москвы часовой пояс будет +03:00.

<!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>time</title>
 </head>
 <body>
 <article>
 <p>Опубликовано: <time datetime="2012-12-23T08:23:11+07:00">сегодня</time></p>
 <p><time>1957-10-04</time> запущен первый искусственный спутник Земли.</p>
 <p><time>1960-08-19</time> первый полёт собак в космос.</p>
 <p><time>1961-04-12</time> первый полёт человека в космос.</p>
 <p><time>1963-06-16</time> первый полёет женщины-космонавта.</p>
 <p><time>1969-07-21</time> высадка человека на Луну.</p>
</article>
 </body>
 </html>

Это лишь часть новых тегов в HTML5. Будет и продолжение.

По материалам сайта htmlbook

 

К размышлению
Оглавление