Html5 новые теги их атрибуты и свойства. Новые структурные теги HTML5

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

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

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

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

Рассмотрим типичную структуру современного сайта. Можно выделить несколько блоков, которые так или иначе присутствуют в коде — это “шапка” (header), панель навигации (navigation), боковая панель (sidebar), раздел основного контента (content), “подвал” сайта(footer) и некоторые другие. Если используется блочная верстка (а таблицы это прошлый век, я давно не видел табличной верстки в современных сайтах), то эти блоки выводятся с помощью тега div .

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

Предназначен для обозначения раздела документа, который может включать в себя заголовки, шапку, подвал и собственно, текст. На мой взгляд, ближайший аналог — блок с классом wrapper (некоторые присваивают ему id, но это не принципиально), который используется как контейнер документа, содержит в себе блоки, привязанные к нему. Своего рода “обертка” для последующих блоков. Также допускается вложенность тега.

Обозначает “шапку” сайта или раздела, обычно там расположен заголовок. Ничем особенным не примечателен

Как видно из названия — задает блок, в котором содержится навигация. Обычно это список ссылок на разделы или страницы сайта, оформленный должным образом. Тег может содержаться в тегах section, header и footer , о котором ниже.

“Подвал” сайта или раздела. Полный аналог тега header

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

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

Приведенный ниже код иллюстрирует применение структурных тегов HTML5 .

Название блога

• Главная
• Разделы
• Автор
• Контакты

Обратите внимание, все структурные теги требуют наличия закрывающего тега. Кстати, закрывающий тег /article например, гораздо более информативен, чем /div . Сразу видно, что где находится. Читать такой код намного легче. Хотя бы ради этого стоит внедрить в существующие проекты или запланировать в будущие.

Теперь о грустном — горячо любимый IE до 8 версии включительно не поддерживает данные теги, но отображает информацию между ними. Не применяются к ним стили CSS, если объекты не
созданы с помощью скрипта. Заставить его показывать документ как нужно поможет следующий код:

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

Скрипт создает DOM элементы и IE корректно отрабатывает с ними.
Небольшое дополнение — HTML5 по умолчанию интерпретирует любой скрипт как type=»text/javascript” , поэтому специально это указывать не нужно. Что опять же делает код проще и легче. Сплошные плюсы Остальные браузеры работают нормально, единственный Firefox полностью поддерживает теги с версии 4.0, но с версии 3 корректно с ними работает и отображает.
На сегодня все. Если стало интересно — “ ” тут я писал о применении новой спецификации на практике. Оставайтесь на связи — будет интересно.

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

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 .