Per aspera ad Astra — в переводе с латыни изречение означает «Через тернии к звёздам».

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

Казнить нельзя, помиловать.

Которые позволяют четко описывать блоки контента

HTML5 — это новейшая версия языка Hypertext Markup Language (HTML), представляющая собой наиболее радикальную ревизию этого языка за всю его историю. В этой версии появилось множество новых функций в различных областях. К наиболее значимым из них относятся следующие.

• Встроенные мультимедийные теги для поддержки аудио- и видеоконтента
• Тег Canvas для рисования контента непосредственно в браузере
• «Разумные» формы, позволяющие осуществлять такие операции, как валидация посредством использования требуемого атрибута

Данная статья является частью программы «Путь к знаниям» по совершенствованию квалификационных навыков (Knowledge Path). См. .

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

В 1989 году Тим Бернерс-Ли (Tim Berners-Lee) создал первый вариант языка HTML с целью преодоления определенных ограничений, которые имелись у существовавших на тот момент методов доступа к информации в Интернете. На начальном этапе существования Интернета ориентирование в нем было сложной задачей. Контент в Интернете представлял собой совокупность отдельных документов, при этом не существовало простого метода навигации по этим документам. И действительно, пользователь должен был знать точный адрес искомого документа и ввести этот адрес вручную. Для решения этой проблемы Бернерс-Ли создал две технологии: протокол HTTP (Hypertext Transfer Protocol) и язык HTML (Hypertext Markup Language).

HTTP — это служебный протокол, с помощью которого Web-серверы доставляют контент. Посмотрите на адресную строку своего Web-браузера. Если ваш браузер показывает полный URL-адрес, то, скорее всего, этот адрес начинается с символов «http://». Эта часть URL-адреса говорит браузеру, протокол какого типа следует использовать при осуществлении запроса к Web-серверу. Когда Web-сервер получает запрос на какой-либо документ, то в большинстве случаев этот документ представлен в формате HTML или преобразуется в этот формат. Именно HTML-документ присылается в браузер, пославший этот запрос.

HTML — это язык сценариев, который говорит Web-браузеру, каким образом следует представлять контент. Внутри контента могут присутствовать ссылки на другие документы, что обеспечивает удобный для пользователя метод навигации между документами в Интернете.

Такое сочетание технологий HTTP и HTML обеспечивает быстрое и простое ориентирование в Интернет-контенте — для осуществления переходов между документами достаточно нажимать мышью на ссылки в тексте. После создания двух вышеупомянутых технологий Бернерс-Ли основал организацию под названием W3C (World Wide Web Consortium). Организация W3C возглавляла разработку первых четырех версий HTML.

Первоначально назначение Интернета состояло в обслуживании простых текстовых документов. Первые браузеры были ориентированы исключительно на текст (другими словами, они не имели никаких затейливых окон — на экране присутствовал только текст). Даже добавление изображений стало весьма значительным достижением — в момент их первого появления. Сегодня люди выполняют в Интернете множество дел — от отправки посланий по электронной почте до просмотра телевизионных программ. Интернет уже превратился в нечто гораздо большее, чем механизм для транспортировки простых текстовых документов. Новые функции и новые способы использования породили новые трудности и новые задачи, для решения которых язык HTML никогда не предназначался.

Организация W3C попыталась решить проблемы сегодняшнего Интернета с помощью стандарта XHTML 2.0 (Extensible Hypertext Markup Language). Однако этот стандарт не получил широкого распространения и к настоящему времени он фактически заброшен. В 2004 году, когда организация W3C концентрировала свои усилия на стандарте XHMTL 2.0, другая организация под названием WHATWG (Web Hypertext Application Technology Working Group) начала разработку стандарта HTML5, который был принят сообществом гораздо благосклоннее, чем стандарт XHTML 2.0. Организация W3C прекратила работы в области XHTML 2.0 и в настоящее время вместе с WHATWG занимается развитием спецификации HTML5.

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

Вне зависимости от возможностей ваших целевых браузеров вы должны сообщать каждому браузеру, что хотите отображать своей контент с использованием спецификации HTML5. Это можно сделать с помощью декларации doctype .

Декларация doctype сообщает браузеру, на какой версии языка разметки написана текущая страница. Она делает это с помощью шаблона DTD (Document Type Definition — определение типа документа). DTD специфицирует правила, используемые языком разметки, благодаря чему браузеры корректно отображают контент.

Концепция doctype-деклараций вполне может сбить с толку. В нынешней спецификации HTML имеется множество деклараций doctype, различия между которыми не вполне очевидны. В таблице 1 показаны доступные на данный момент декларации doctype и их возможности.

К счастью, в спецификации HTML5 декларация doctype существенно упрощена. И действительно, в HTML5 имеется лишь одна такая декларация. Чтобы ваш браузер осуществлял отображение с помощью спецификации HTML5, добавьте декларацию doctype, показанную в .

Декларация должна находиться в самом начале HTML-документа, перед тегом .

Предпосылка создания новых структурных тегов — желание разделять Web-страницы на логические части с помощью элементов, описательные названия которых соответствуют контенту, который они содержат. С концептуальной точки зрения Web-страницу можно рассматривать как документ. Документы содержат заголовки, нижние колонтитулы, главы и различные другие условные обозначения, разделяющие документы на логические части.

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

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

Этот подход работает прекрасно; тег div — это превосходный элемент общего назначения. Тем не менее, без рассмотрения атрибута id у каждого тега div трудно сказать, какой раздел документа представляет каждый тег div . Можно приводить доводы в пользу того, что при надлежащем именовании атрибута id его возможностей как индикатора вполне достаточно, тем не менее, использование атрибутов id не является обязательным. Существует множество разновидностей атрибута id , которые могут рассматриваться как одинаково валидные. Сам тег div не содержит указаний на то, какой тип контента ему было поручено представлять.

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

This is an important section of the page.

Тег article обозначает важные разделы контента внутри Web-страницы. Например, в блоге каждый отдельный пост представляет собой значимый фрагмент контента. После добавления тега article к примеру кода мы получаем код, показанный в .

This is an important section of content on the page. Perhaps a blog post.

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

This is an important section of content on the page. Perhaps a blog post.

This is an important section of content on the page. Perhaps a blog post.

Тег footer помечает содержащийся в нем контент как нижний колонтитул текущего документа. После добавления тега footer к примеру кода мы получаем код, показанный в .

This is an important section of content on the page. Perhaps a blog post.

This is an aside for the first blog post.

This is an important section of content on the page. Perhaps a blog post.

К этому моменту все теги div из исходного примера были заменены структурными тегами HTML5.

This is an important section of content on the page. Perhaps a blog post.

This is an aside for the first blog post.

This is an important section of content on the page. Perhaps a blog post.

В показан результат замены исходных тегов div новыми структурными тегами HTML5.

This is an important section of content on the page. Perhaps a blog post.

This is an aside for the first blog post.

This is an important section of content on the page. Perhaps a blog post.

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

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

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

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

Давайте для начала сделаем шапку сайта с помощью тега (пример 6.2).

Пример 6.2. Использование

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

Пример 6.3. Шапка сайта

HTML5 CSS 2.1 IE 7+ IE 9+ Cr Op Sa Fx

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

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

document.createElement("header");

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

Пример 6.4. Скрипт для IE

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]); }

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

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

Пример 6.5. Скрипт для IE

Все указанные скрипты должны располагаться в коде перед CSS.

Таким образом, для полноценного использования тегов HTML5 во всех браузерах достаточно выполнить три условия:

Теперь рассмотрим некоторые теги HTML5 более подробно, чтобы понять область их применения.

Пример 6.6. Использование тега

HTML5 IE Cr Op Sa Fx

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

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

Пример 6.7. Использование

HTML5 IE Cr Op Sa Fx

aside document.createElement("aside"); document.createElement("article"); aside { background: #f0f0f0; /* Цвет фона */ padding: 10px; /* Поля */ width: 200px; /* Ширина сайдбара */ float: right; /* Обтекание слева */ } article { margin-right: 240px; /* Отступ справа */ display: block; /* Блочный элемент */ }

Экономьте электричество

Хороший язык

Чья палка больше

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

Пример 6.8. Использование

HTML5 IE Cr Op Sa Fx

figure document.createElement("figure"); document.createElement("figcaption"); figure { background: #5f6a72; /* Цвет фона */ padding: 10px; /* Поля вокруг */ display: block; /* Блочный элемент */ width: 150px; /* Ширина */ float: left; /* Блоки выстраиваются по горизонтали */ margin: 0 10px 10px 0; /* Отступы */ text-align: center; /* Выравнивание по центру */ } figcaption { color: #fff; /* Цвет текста */ }

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

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

Пример 6.9. Использование

HTML5 IE Cr Op Sa Fx

footer Персональный сайт Кристины Ветровой Добро пожаловать!

Рада приветствовать вас на своем сайте.

Определяет «шапку» сайта или раздела.

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

Пример 6.10. Использование

HTML5 IE Cr Op Sa Fx

hgroup Кристина Ветрова Персональный сайт

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

Пример 6.11. Использование

HTML5 IE Cr Op Sa Fx

nav Чебурашка и крокодил Гена Чебурашка | Гена | Шапокляк | Лариска Добро пожаловать!

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

Пример 6.12. Использование

HTML5 IE Cr Op Sa Fx

section Съёмки фильма Полипропилен

История о том, как снимали фильм, где герои отдыхали на пляже, потом пришёл антагонист, избил протагонистов, сбросил их в бассейн, и что из этого получилось.

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

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

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

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

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

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

Пример 6.13. Использование

HTML5 IE Cr Op Sa Fx

time

1957-10-04 запущен первый искусственный спутник Земли.

1960-08-19 первый полёт собак в космос.

1961-04-12 первый полёт человека в космос.

1963-06-16 первый полёт женщины-космонавта.

1969-07-21 высадка человека на Луну.

От автора: приветствую вас на этом блоге. В этом уроке я хотел бы познакомить вас с основами html5, а именно с самыми основными тегами, которые появились в нем и уже используются при создании современных сайтов. Элементы html5 значительно расширяют возможности этого языка, давайте с ними познакомимся.

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

К тому же, сами современные веб-стандарты ориентированы на простоту и понятность кода. Новые элементы, в частности, включают в себя такие теги:

Header – парный тег, который обозначает шапку сайта, статьи или чего-то другого. Лично я поначалу подумал, что этот тег нужно использовать только для обозначения непосредственно шапки сайта.

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

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

Nav – это контейнер для ссылок, которые имеют особую важность на веб-странице. Короче говоря, теперь в этот тег стоит заключать главное меню сайта, где содержаться ссылки на важные страницы и рубрики сайта.

Article – контейнер для содержания страницы, будь то статья, новость, новая тема на форуме и т.д.

Aside – все еще ведутся споры, для чего же должен использоваться этот тег. Сначала кто-то считал, что им принято формировать боковую колонку, где располагаются различные виджеты. Более павильным считается такое утверждение – этим тегом следует обрамлять всю информацию, которая является побочной на веб-странице. Например, цитата, блок с навигацией по документу или блок с контекстной рекламой.

Рис. 1. Семантические элементы и новая разметка с их помощью.

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

Audio – этот тег тоже парный, он предназначен для легкого и понятного вывода аудиозаписей на экран, а также плеера, в котором их можно воспроизводить. В этот тег дополнительно нужно поместить одиночные теги source, в которых прописать путь к аудиофайлу в разных форматах, чтобы все браузеры могли обработать звук.

Это делается для кроссбраузерности. Достаточно прописать путь к аудиофайлу в расширениях ogg и mp3. Также audio имеет определенные атрибуты. Например, атрибут controls добавляет к аудиозаписи элементы управления – так вы сможете менять громкость и останавливать воспроизведение.

Video – абсолютно идентичный прошлому элемент, за исключением того, что он выводит видео. В него также помещают теги source, где в атрибутах src прописываются пути к файлам.

Стоит сказать, что с видео ситуация чуть посложней. Чтобы оно воспроизводилось во всех браузерах, нужно добавить его сразу в трех форматах – это ogg, mp4 и webm.

В целом, тег имеет такие же атрибуты, как и audio. Дополнительно у него есть атрибут poster, с помощью которого вы можете задать путь к картинке, которая будет видна, если видео не проигрывается. Также с помощью атрибутов width и height можно определить размеры области, в которой будет воспроизводиться видео. Но мне все-таки кажется, что это лучше делать через css.

Что-то я примеров не привожу, а вот со вставкой видео это бы надо сделать.

Тег video не поддерживается вашим браузером.

Как видите, у нас один и тот же файл – movie. Просто он в разных форматах. Также нужно указать MIME-тип и кодеки. Но это не стоит заучивать и пытаться держать в памяти – просто копируйте.

Figure – тег создан для группировки каких-то элементов. Он неразрывно связан с figcaption. С появлением этих элементов мы можем реализовать то, что раньше делалось другими путями. Например, вставить подпись к изображению. Это можно сделать так:

Подпись к изображению

Рис. 2. Подпись к изображению.

Datalist – интересный тег, в который можно вписать с помощью тегов option возможные варианты при наборе пользователем слов в текстовом поле input. Это вы можете наблюдать в поисковике – он сам подсказывает вам возможные варианты. Тут, конечно, системы не столь гениальна – вы просто можете записать пару наиболее частых слов, которые люди могут искать у вас на сайте. Элемент связывается с текстовым полем с помощью атрибута list, в котором нужно указать идентификатор, который мы определили для тега datalist.

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

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

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

Тег section группирует контент по тематике, или, другими словами, определяет раздел документа. Обычно предшествует header , может находиться в footer . Тег section может быть заключен внутрь другого тега section , если необходимо, и содержать любой объем разметки. В обычном html, как правило, вместо тега section используют div .

Тег header (шапка) обычно содержит заголовок или группирует заголовки, но также может содержать информацию о секции.

Другими словами тег header определяет верхний колонтитул сайта (шапку сайта).

Тег footer (подвал) обычно содержит информацию о секции, например: автор статьи, дата, авторское право и т.д.

Copyright 20011 All Rights

Тег nav определяет навигационную область, обычно это список ссылок. Тег nav является родным братом основной section (секции), header (шапки) и footer (подвала).

• Главная
• Скачать
• Архив
• О Нас

Элемент nav можно расположить также, например, в теге header .

Тег aside определяет контент, который расположен вокруг основного контента. Это может быть боковая панель (sidebar), содержащая ряд ссылок на статьи, на архив, на метки.

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

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

Тег dialog – это та область, где отображается комментарии (беседа, разговор). Тег dialog состоит из следующих частей:

• сам тег dialog , определяющий блок с комментариями
• тег dt определят того кто говорит
• тег dd определяет текст комментария

Итак, давайте объединим наши структурные теги на странице.

Обычный блог Standard Blog

• Главная
• Скачать
• Архив
• О Нас

Lorem ipsum...

Lorem ipsum...

Copyright 20011 All Rights

Как вы можете видеть, сами теги более наглядны, чем, если бы вы использовали обычные идентификаторы (id) для тегов div . Также очевидно преимущество в использовании адекватных закрывающих тегов, таких как article . Например, разметка документа становится более понятной (и для поисковиков в том числе), если вместо непонятного блока с id="something" ,(где закрывающий тег еще надо поискать!) использовать тег article .

Фактически, да, если соблюдать несколько дополнительных моментов. Данные теги будут работать в современных браузерах и, вероятно, в IE6. Но есть несколько моментов, которые необходимо соблюдать, если мы захотим использовать структурные теги html5 сегодня.

Во-первых, так как большинство браузеров не понимает doctype HTML5, то они и не знают о новых тегах в HTML5. К счастью, браузеры довольно восприимчивы, что позволяет им иметь дело с неизвестными тегами. Единственная проблема в том, что неизвестные теги не имеют стилей по умолчанию, и такие теги рассматриваются как встроенные (inline) теги. Но наши новые теги HTML5 структурные и, очевидно, должны быть блочными элементами. Итак, когда мы стилизуем их в css, то нам необходимо включить объявление display:block .

Просто включите небольшую часть кода в ваш CSS и новые теги HTML5 готовы к работе. И, конечно, как только HTML5 окончательно распространиться, описание display:block можно удалить, поскольку это описание будет включено в стили по умолчанию.

Есть проблема, если вам требуется поддержка IE. Оказывается, движок IE будет работать с новыми тегами, но не будет признавать любой CSS стиль, примененный к ним. К счастью, исправить это можно, включив небольшой кусок JavaScript. Все что нам понадобится, это включить следующий код:

document.createElement("header"); document.createElement("footer"); document.createElement("section"); document.createElement("aside"); document.createElement("nav"); document.createElement("article");

Данный код можно включите непосредственно в head или подключить через внешний файл.

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