Новые структурные элементы в HTML5

<time>

Элемент <time> позволяет определить точно выраженное значение даты и времени, которое одновременно понятно человеку и машине. Например, я пометил даты выпуска синглов музыкальной группы следующим образом:

<time datetime="1989-03-13">1989</time>

Текст между открывающим и закрывающим тегами может быть любым, подходящим для людей, посещающих сайт. При желании можно сделать это следующим образом:

<time datetime="1989-03-13">13th March 1989</time>
<time datetime="1989-03-13">March 13 1989</time>
<time datetime="1989-03-13">My nineteenth birthday</time>

С другой стороны дата внутри атрибута datetime представлена в стандарте ISO (см. дополнительные сведения в "Советы W3C: Используйте международный формат даты (ISO)" - http://www.w3.org/QA/Tips/iso-date), и является машинно-читаемой датой, поэтому мы получаем двойную выгоду. Можно также добавить время в конце стандартного представления ISO следующим образом:

<time datetime="1989-03-13T13:00">One o'clock in the afternoon, on the 13th of March 1989</time>

Можно добавить также настройку часового пояса, поэтому, например, чтобы представить последний пример в стандартном тихоокеанском времени, можно сделать следующее:

<time datetime="1989-03-13T13:00Z-08:00">One o'clock in the afternoon, on the 13th of March 1989</time>

<article> и <section>

Теперь обратим наше внимание к двум, возможно, наиболее неправильно понимаемым элементам HTML5 - <article> и <section>. При первом знакомстве различие может показаться нечетким, но на самом деле не все так плохо.

В основном элемент <article> предназначен для независимых фрагментов контента, которые будут иметь смысл вне контекста текущей страницы, и могут хорошо объединяться. Такие фрагменты контента включают публикации в блоге, видео и его текстовая запись, новостная история, или одна часть серийной истории.

Элемент <section>, с другой стороны, предназначен для разбиения контента страницы на различные функциональные или тематические области, или разбиения статьи или истории на различные части. Поэтому, например, в моей истории PWEI, структура выглядит следующим образом:

<article>
  <section id="Intro">
    <h2>Introduction</h2>
  </section>

  <section id="History">
    <h2>History</h2>
  </section>

  <section id="Discography">
    <h2>Discography</h2>
  </section>
</article>

Но можно также структурировать следующим образом:

<section id="rock">
  <h2>Rock bands</h2>
  <!--multiple article elements could go in here -->
</section>

<section id="jazz">
  <h2>Jazz bands</h2>
  <!--multiple article elements could go in here -->
</section>

<section id="hip-hop">
  <h2>Hip hop bands</h2>
  <!--multiple article elements could go in here -->
</section>

Где остается <div>?

Итак, со всеми этими прекрасными новыми элементами, которые можно использовать на страницах Web, дни простого элемента <div> сочтены, не так ли? НЕТ. Фактически, <div> по-прежнему имеет совершенно законное применение. Его следует использовать, когда не существует другого более подходящего доступного элемента для объединения области контента, что часто происходит, когда вы используете элемент только для объединения контента в группу с целью стилевого или визуального оформления. Примером в моей истории PWEI является элемент <div id="wrapper">, который использован для создания оболочки вокруг всего контента. Единственная причина его использования здесь в том, чтобы я мог использовать CSS для выравнивания контента по центру в браузере:

#wrapper {
  background-color: #ffffff;
  width: 800px;
  margin: 0 auto;
}

<mark>

Элемент <mark> предназначен для выделения терминов, значимых в данный момент, или выделения частей контента, к которым вы просто хотите привлечь внимание, но не хотите изменять семантическое значение. Это похоже на то, как при просмотре напечатанной статьи вы выделяете важные для вас строки с помощью цветного маркера. Поэтому, например, вы можете захотеть использовать этот элемент для выделения строк в wiki, которые требуют редакторской правки, или выделения экземпляров термина поиска, который пользователь только что искал на странице, и задание затем для них подходящего оформления в CSS.

Атрибут hidden

Атрибут hidden, когда применяется к любому элементу, скрывает его полностью от любых форм представления/медиа, и должен использоваться, если вы намерены показать контент позже (например, используя JavaScript для удаления этого атрибута), но не хотите, чтобы он отображался в данный момент. Он не должен использоваться для скрытия такого контента, как скрытые вкладки интерфейса с вкладками, так как это совершенно другой способ представления контента в меньшем пространстве, а не скрытие контента вообще.

Разбивка HTML5 и алгоритм заголовков HTML5

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

• Введение в структурные элементы HTML5
  • Как были выбраны названия элементов?
  • Почему нет элемента <content>?
• Представляем пример страницы HTML5
  • Некоторые мета-различия
  • <header>
  • <hgroup>
  • <footer>
  • <nav>
  • <aside>
  • <figure> и <figcaption>
  • <time>
  • <article> и <section>
    • Где остается <div>?
    • <mark>
    • Атрибут hidden
• Разбивка HTML5 и алгоритм заголовков HTML5
• Как заставить это работать в старых браузерах
• Заключение

Поэтому "Новые структурные элементы в HTML5" будет <h1>, "Введение в структурные элементы HTML5" будет <h2>, и т.д. В HTML4 мы привыкли к тому факту, что имеется шесть возможных уровней заголовков, и каждый уровень заголовков диктуется реально используемым элементом, что означает, что вполне возможно получить совершенно искаженную иерархию заголовков, если использовать неправильные уровни заголовков, или даже если часть вашего контента объединяется в другой CMS (Системе управления контентом).

HTML5 решает эту проблему, создавая иерархию заголовков на основе относительного вложения различных разделов документа. Новый раздел документа создается, когда вы используете так называемый разделяющий контент – элементы <article>, <section>, <nav>, и <aside>. Возьмем следующий пример.

<h1>My title</h1>
<div>
  <h2>My subtitle</h2>
</div>

Посмотрите первый пример разбивки в действии (http://dev.opera.com/articles/view/new-structural-elements-in-html5/outlining1.html).

HTML 4 будет считать это заголовком первого уровня, за которым следует заголовок второго уровня, но HTML5 будет считать это как два заголовка первого уровня. Почему? Так как <div> не является разделяющим элементом, то новый раздел в иерархии не создается. Чтобы исправить это, необходимо заменить <div> на разделяющий элемент:

<h1>My title</h1>
<section>
  <h2>My subtitle</h2>
</section>

Посмотрите на второй пример разбивки в действии (http://dev.opera.com/articles/view/new-structural-elements-in-html5/outlining2.html).

Ни один из браузеров в настоящее время не реализовал алгоритм HTML5 для разбивки, но вы уже можете получить представление о том, как это работает, используя Расширение Opera HTML5 Outliner (https://addons.opera.com/addons/extensions/details/html5-outliner/1.0/?display=en), сетевой HTML5 outliner Джефри Шеддона (http://gsnedders.html5.org/outliner/), или Google HTML5 outliner (http://code.google.com/p/h5o/). Попробуйте пропустить приведенные выше примеры через один из этих инструментов, если вы мне не верите на слово. И в будущем в действительности не нужно будет беспокоиться об иерархии h1, h2, h3, и т.д., так как независимо от реально используемых элементов заголовков, алгоритм будет создавать одну и ту же иерархию на основе вложенности разделов документа. Но пока об этом необходимо волноваться, так как ни один браузер (или считыватель экрана) этого не поддерживает!

Поэтому возникает естественный вопрос – "Зачем вообще об этом беспокоиться"? На самом деле этот новый способ создания план-конспекта документа/иерархии заголовков имеет два основных преимущества по отношению к старому:

1. Можно иметь любое количество уровней заголовков — количество не ограничивается шестью.
2. Если контент переносится в какую-то другую CMS (Систему управления контентом), что приводит к тому, что уровни заголовков h1, h2, h3, и т.д.становятся неправильными, алгоритм будет по-прежнему создавать правильную иерархию несмотря ни на что.

Примечание: Иерархия заголовков HTML5 является в действительности достаточно старой идеей, первоначально намеченной Тимом Бернерс-Ли еще в 1991 г. (http://lists.w3.org/Archives/Public/www-talk/1991SepOct/0003.html):

На самом деле, я бы предпочел вместо <H1>, <H2> и т.д. для заголовков [которые возникают из AAP DTD] иметь допускающий вложение друг в друга элемент <SECTION>..</SECTION>, и базовый <H>..</H>, который на любом уровне в разделах создавал бы заголовок требуемого уровня.

Как заставить это работать в старых браузерах

Старые браузеры: всегда бедствие для самого нашего существования, когда пытаешься справиться с новыми блестящими игрушками в Web! Фактически проблема здесь со всеми браузерами – ни один браузер в настоящее время по существу не распознает и не поддерживает новые структурные элементы HTML5. Но не надо бояться, вы можете, тем не менее, заставить их работать сегодня в разных браузерах с минимальными усилиями.

Прежде всего, если вы помещаете неизвестный элемент на web-страницу, по умолчанию браузер будет интерпретировать его просто как <span>, т.е. анонимный встроенный элемент. Предполагается, что большинство рассмотренных в этой статье элементов HTML5, ведут себя как блочные элементы, поэтому простейший способ заставить их вести себя правильно в старых браузерах, состоит в задании для них display:block; в коде CSS:

article, section, aside, hgroup, nav, header, footer, figure, figcaption {
  display: block;
}

Это решает все проблемы для всех браузеров, за исключением одного. Хотите угадать какого? … Удивительно, не правда ли, что IE оказался сложнее других браузеров, и отказывается оформлять элементы, которые не распознает? Исправление для IE кажется нелогичным, но к счастью достаточно простым. Для каждого используемого элемента HTML5 необходимо вставить строку JavaScript в заголовок документа следующим образом:

<script>
    document.createElement('article');
    document.createElement('section');
    document.createElement('aside');
    document.createElement('hgroup');
    document.createElement('nav');
    document.createElement('header'); 
    document.createElement('footer');
    document.createElement('figure');
    document.createElement('figcaption'); 
</script>

Теперь IE будет магическим образом применять стили для этих элементов. Печально, что приходиться использовать JavaScript, чтобы заставить работать CSS, но, по крайней мере, мы продвинулись вперед. Почему это все-таки работает? Никто, с кем я говорил об этом, в действительности не знает. Существует также проблема с этими стилями, которые не выводятся на принтер при печати документов HTML5 из IE.

Примечание: Проблема с печатью в IE может быть решена с помощью библиотеки JavaScript HTML5 Shiv (http://code.google.com/p/html5shiv/), которая справляется также с добавлением строк document.createElement. Необходимо поместить ее в Условные комментарии (http://dev.opera.com/articles/view/supporting-ie-with-conditional-comments/) для IE меньше IE9, чтобы современные браузеры не выполняли JS, который им не нужен.

Заключение

На этом завершается обсуждение новых структурных элементов в HTML5. Если вам требуется дополнительная помощь с HTML5, многое можно найти на сайте dev.opera.com, и можно также проконсультироваться на сайте HTML5 doctors (http://html5doctor.com/).