Оглавление Предыдущая лекция Следующая лекция
Введение в HTML5
2. Лекция: Новые структурные элементы в HTML5: версия для печати и PDA
В лекции рассматриваются структурные элементы HTML5. Демонстрируется, каким образом новые свойства языка взаимодействуют друг с другом в контексте реальной web-страницы. Использование тегов логической компоновки документа: колонтитулов, навигационных панелей, автономных фрагментов контента, блоков для иллюстраций, разметки времени и даты. Специфика описания типа документа (DTD - Document Type Definition). Как новые средства языка поддерживаются в популярных браузерах. Методики, позволяющие заставить старые клиентские программы отображать неизвестные элементы разметки.
Крис Миллз, Брюс Лоусон · 21 декабря 2010 г.

Введение

HTML5 содержит две новые вещи: новые API, которые добавляют существенно важные новые свойства к открытым стандартам модели разработки web, и новые структурные элементы, которые определяют специальные свойства страницы Web со значительно более точной семантикой, чем это было доступно в HTML 4. Статьи, посвященные многим новым API, можно найти на Dev.Opera (http://dev.opera.com/articles/tags/html5/) с меткой HTML5.

Данная статья рассматривает другую составляющую – мы кратко опишем, как были выбраны новые семантические элементы, какие новые свойства имеются, и как они используются, как в HTML5 работают заголовки, и поддержку в браузерах новых элементов, включая их поддержку в старых браузерах.

Введение в структурные элементы HTML5

HTML4 имеет множество семантических элементов, позволяющих четко определять различные свойства страницы Web, такие как формы, списки, параграфы, таблицы и т.д. Однако он имеет и свои недостатки. Существенно используются элементы <div> и <span> с различными атрибутами id и class для определения различных других свойств, таких как навигационные меню, верхние и нижние колонтитулы, основной контент, окна предупреждения, боковые панели, и т.д. Что-нибудь типа <div id="header"> будет понятно разработчикам и дизайнерам, знающим, для чего это предназначено, и умеющих использовать CSS и JavaScript для применения собственных стилей и поведения, чтобы сделать это понятным для конечных пользователей.

Но это могло бы быть значительно лучше. С такими настройками по-прежнему существуют проблемы:

  • Люди могут понять разницу между различным контентом, но машины не могут — браузер не видит различные div как верхние и нижние колонтитулы и т.д. Он видит их как различные div. Не будет ли полезнее, если браузеры и считыватели экрана смогут явно идентифицировать, скажем, навигационное меню, чтобы пользователям с недостатками зрения было легче его найти, или различные элементы новостей в пакете блогов, чтобы их было легче объединить в ленту RSS без дополнительного программирования?
  • Даже если для решения некоторых из этих проблем используется дополнительный код, вы можете сделать это надежно только для собственных web-сайтов, так как другие разработчики web будут использовать другие имена классов и ID, особенно, если рассмотреть международную аудиторию — различные разработчики web в разных странах будут использовать различные языки для записи имен своих классов и id.

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

  • <header>: Используется для верхнего колонтитула сайта.
  • <footer>: Используется для нижнего колонтитула сайта.
  • <nav>: Содержит навигационные функции страницы.
  • <article>: Содержит автономный фрагмент контента, который будет иметь смысл, если используется как позиция RSS, например, новостное сообщение.
  • <section>: Используется либо для объединения в группу различных статей с различной целью или по различным темам, или для определения различных разделов одной статьи.
  • <time>: Используется для разметки времени и даты.
  • <aside>: Определяет блок контента, который связан с основным контентом, но не входит в его основной поток.
  • <hgroup>: Используется в качестве оболочки скрытия более одного заголовка, если требуется, чтобы учитывался только один заголовок в структуре заголовков страницы.
  • <figure> и <figcaption>: Используется для инкапсуляции рисунка как единого элемента, и содержит, соответственно, подпись для рисунка.

Как были выбраны названия элементов?

Во время создания HTML5 редактор Ян Хиксон использовал инструменты Google для извлечения данных более чем миллиарда web-страниц, определяя, какие имена ID и class использовались наиболее часто в реальной сети web. Можно посмотреть один из подготовленных обзоров, опубликованный на сайте Google Code (http://code.google.com/webstats/2005-12/classes.html). Выражаясь короче, имена элементов, указанные в этой статье, были взяты из 20 наиболее популярных имен ID и class, представленных в обзорах Хиксона.

Примечание: Компания Opera выполнила аналогичное исследование 3.5 миллионов URL, назвав его MAMA. MAMA использует меньшее множество URL, но рассматривает более широкий набор статистики Web-страниц. Дополнительную информацию можно найти на домашней странице проекта MAMA (http://dev.opera.com/articles/view/mama/).

Почему нет элемента <content>?

Хотя это может казаться кричащим упущением, на самом деле это не так. Основной контент будет блоком верхнего уровня контента, который не является <header>, <nav> или <footer>, и в зависимости от конкретных обстоятельств, может иметь больше смысла пометить контент с помощью <article>, <section>, или даже <div>. Брюс Лоусон называет это "алгоритмом Scooby Doo", но чтобы понять почему, вы должны спросить его самого в Twitter, или на конференции.

Представляем пример страницы HTML5

Рассмотрев в некоторой степени предпосылки, и увидев, какие новые элементы предлагаются, давайте теперь перейдем к примеру, и посмотрим детально, как использовать их в контексте реальной страницы.

Посмотрите на мою страницу A history of Pop Will Eat Itself (http://dev.opera.com/articles/view/new-structural-elements-in-html5/pwei_sample_html5.html) – историю и дискографию одной из моих любимых музыкальных групп 80/90-х (если вам нравится альтернативная музыка, пожалуйста, подтвердите это.) Я использовал исходную разметку страницы Wikipedia Pop will Eat Itself (http://en.wikipedia.org/wiki/Pop_Will_Eat_Itself), почистил ее, и превратил в HTML5. Давайте внимательно посмотрим на то, что было сделано.

Держите пример страницы открытым в отдельной вкладке во время чтения статьи – вы можете захотеть вернуться к ней.

Пример использует традиционную проверенную оболочку <div> для размещения контента по центру, но Крок Камен опубликовал интересную статью о создании центрированного дизайна без оболочки <div> (http://camendesign.com/code/developpeurs_sans_frontieres), поэтому я подумал, что покажу ее здесь также. Также полезно порекомендовать не использовать элементы HTML5 <section> в качестве оболочки на страницах HTML5 – это просто совершенно неверно!

Некоторые мета-различия

Первое, что вы заметите, состоит в том, что doctype значительно проще, чем в более старых версиях HTML:

<!DOCTYPE html>

Создатели HTML5 выбрали самую короткую возможную строку doctype для этой цели — в конце концов, почему разработчик должен помнить длинную строку, содержащую множество URL, когда в действительности doctype присутствует здесь только для того, чтобы задать для браузера стандартный режим (в противоположность необычному режиму)?

Затем, я хотел бы привлечь ваше внимание к кажущимся "слабым синтаксическим требованиям" HTML5. Я добавил кавычки вокруг всех значений атрибутов, и написал все элементы строчными буквами, но это, на самом деле, связано с привычкой писать по правилам XHTML. Но для кого-то может показаться удивительным открытие, что в HTML5 можно при желании игнорировать эти правила. Фактически не нужно даже беспокоиться о том, чтобы использовать элементы <head>, <body>, или <html> , все будет по-прежнему допустимо!

Примечание: Это не так, если вы переключаетесь на использование XHTML (HTML работающий с doctype XHTML— application/xhtml+xml)

Дело в том, что такие элементы подразумеваются браузером в любом случае. Если создать пример страницы HTML5 без этих элементов, загрузить ее в браузер и посмотреть исходный код загруженной страницы, то можно заметить, что они будут автоматически вставлены браузером. Иначе можно воспользоваться утилитой-просмотрщиком Яна Хиксона Live DOM (http://software.hixie.ch/utilities/js/live-dom-viewer/), чтобы увидеть состояние DOM.

Примечание: На самом деле можно также отправить на проверку документ HTML4, не содержащий <head>, <body>, или <html>, но это, тем не менее, стоит здесь отметить.

Необходимо также упомянуть, что спецификация HTML5 строго определяет, как обрабатывать плохо-сформированную разметку (например, неправильно вложенные элементы, или незакрытые элементы), впервые определяя алгоритм синтаксического разбора. Это означает, что даже если разметка выполнена неправильно, DOM будет согласован с поддерживающими HTML5 браузерами.

Не означает ли это, что нам не нужно больше беспокоиться о проверке правильности и эффективных методах работы? ВОВСЕ НЕТ! Проверка правильности по-прежнему является очень полезным инструментом для создания страниц насколько возможно хорошими. Даже если DOM совместим с браузерами, он по-прежнему может вести себя, прежде всего не так, как требуется, создавая проблемы в CSS и JavaScript! И как вы увидите при дальнейшем изучении HTML5, существуют очень серьезные причины для проверки, что такие свойства документа как <html> объявляются явно. Например, вы можете захотеть объявить язык документа в элементе <html> для интернационализации и улучшения доступности, и это требуют также некоторые связанные технологии. Хорошим примером является AppCache (http://dev.opera.com/articles/view/offline-applications-html5-appcache/).

Для проверки документов HTML5 можно использовать валидатор W3C (http://validator.w3.org/), который может проверять HTML5, а также большой спектр других разновидностей языков разметки. Или использовать специальный валидатор HTML5 (+ WAI-ARIA и MathML) по адресу validator.nu (http://validator.nu/).

В конце этого раздела я хочу привлечь ваше внимание к следующей строке:

<meta charset="utf-8" />

Вам необходимо объявить множество символов документа среди первых 512 байтов, чтобы защититься от серьезной угрозы безопасности. Если нет действительно серьезной причины не делать это, то рекомендуется использовать множество символов UTF-8.

<header>

Верхний колонтитул документа выглядит следующим образом:

<header>
  <hgroup>
    <h1>A history of Pop Will Eat Itself</h1>
    <h2>Introducing the legendary Grebo Gurus!</h2>
  </hgroup>
</header>

Назначение элемента <header> состоит в создании оболочки вокруг раздела контента, который формирует верхний колонтитул страницы, содержащий обычно логотип компании/графику, заголовок основной страницы, и т.д.

<hgroup>

Вы можете заметить, что в приведенном выше коде, единственным контентом колонтитула является элемент <hgroup>, содержащий два заголовка. Я хочу здесь определить заголовок документа верхнего уровня, плюс подзаголовок/ключевую фразу. Мне нужно, чтобы только заголовок верхнего уровня учитывался в иерархии заголовков документа, и именно это делает элемент <hgroup> - он позволяет учитывать группу заголовков как один заголовок в структуре документа. Подробнее о работе иерархии заголовков в HTML5 будет написано ниже в разделе "Разбивка HTML5 и алгоритм заголовков HTML5".

<footer>

Внизу документа можно увидеть следующий код:

<footer>
  <h3 id="copyright">Copyright and attribution</h3>
</footer>

<footer> необходимо использовать для размещения контента нижнего колонтитула сайта — если просмотреть нижнюю часть какого-то количества сайтов, то легко увидеть, что нижние колонтитулы могут содержать различные вещи, от уведомления об авторских правах и контактной информации, до заявления о доступности, информации о лицензировании и множества других второстепенных ссылок.

Примечание: Не существует ограничения только на один верхний и нижний колонтитул на страницу — страница может содержать несколько статей, и иметь для каждой статьи верхний и нижний колонтитул.

<nav>

Двигаясь дальше по документу, мы встречаемся со следующей структурой:

<nav>
  <h2>Contents</h2>
    <ul>
      <li><a href="#Intro">Introduction</a></li>
      <li><a href="#History">History</a>
      
      <!—другие навигационные ссылки ... -->
      
    </ul>
</nav>

Элемент <nav> предназначен для разметки навигационных ссылок или других конструкций (например, формы поиска), которые направляют вас на различные страницы текущего сайта, или различные области текущей страницы. Другие ссылки, такие как рекламные ссылки, не учитываются. Можно, конечно, включать заголовки и другие структурные элементы внутрь <nav>, но это не обязательно.

<aside>

Сразу под заголовком документа имеется следующий код:

<aside>
  <table>
    <!—- множество кратких фактов в этом месте -->
  </table>
</aside>

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

<figure> и <figcaption>

Динамический дуэт из <figure> и <figcaption> был создан для решения достаточно специального множества проблем. Прежде всего, не казалось ли всегда немного семантически сомнительно и неясно размечать рисунок и его подпись как два параграфа, или как пару списка определений, или как-то иначе? И второе, что делать, когда требуется рисунок, состоящий из изображения, или двух изображений, или двух изображений и некоторого текста? Элемент <figure> хорошо подходит, чтобы объединить весь контент, из которого вы хотите составить один рисунок, будет ли это текст, изображения, SVG, видео, или что-то другое. Элемент <figcaption> затем помещается внутри элемента <figure>, и содержит описательный заголовок для этого рисунка. В мой пример включен простой рисунок, чтобы просто показать, как это используется:

<figure>
  <img src="pwei.png" alt="Old poppies logo" />
  <figcaption>
    The old poppies logo, circa 1987.<br /> <a href="http://www.flickr.com/photos/bobcatrock/317261648/">
     Original picture on Flickr</a>, taken by bobcatrock. 
  </figcaption>
</figure>

<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/).

© INTUIT.ru