Код для этого документа выглядит следующим образом.
Вот некоторые преимущества от применения этих элементов. Когда они используются в сочетании с элементами заголовков (от
Заметим, что для лучшей совместимости с существующими браузерами, также можно использовать другие элементы заголовка (от
Помечая целевые разделы страницы с помощью специальных тегов, вспомогательные технологии могут помочь пользователю легко перемещаться по странице. Например, они могут просто пропустить раздел навигации или быстро переходить от одной статьи к другой. Автору не придется обеспечивать механизм создания ссылок для этого. Также авторы получают преимущество, поскольку замена множества
на несколько различных элементов помогает сделать исходный код понятнее и проще.
Элемент
определяет заголовок раздела, который может содержать больше, чем просто название раздела. К примеру, имеет смысл для заголовка включить подзаголовок, информацию о версии истории или авторство.
Предварительный обзор HTML5
Лаклан Хант
Блог
Вставьте сюда слоган.
Элемент
определяет подвал раздела, в котором добавляется. Подвал обычно содержит такую информацию как: кто написал, ссылки на соответствующие документы, авторские права и тому подобное.
Элемент
представляет раздел навигационных ссылок, он подходит для навигации по сайту или оглавления.
Элемент
предназначен для содержания, которое имеет косвенное отношение к контенту рядом с ним, как правило, используется для обозначения сайдбара.
Элемент
определяет универсальный раздел документа или приложения, например, главу.
Глава 1: То время
Это было лучшее изо всех времен, это было худшее изо всех времен;
это был век мудрости, это был век глупости;
это была эпоха веры, это была эпоха безверия;
это были годы Света, это были годы Мрака;
...
(Отрывок из «Повесть о двух городах»)
Элемент
представляет собой самостоятельный раздел документа, страницы или сайта. Он подходит для содержания вроде новости, статьи блога, сообщения форума или отдельных комментариев.
Видео и аудио
В последние годы видео и аудио в Интернете становится все более жизнеспособным и сайты вроде YouTube, Viddler, Revver, MySpace и десятки других облегчают жизнь тем, кто публикует видео и аудио. Поскольку в настоящее время в HTML не хватает необходимых средств для успешного внедрения и управления мультимедиа, многие сайты полагаются на Flash, чтобы обеспечить эту функциональность. Хотя можно вставлять мультимедиа с помощью различных плагинов (таких как QuickTime, Windows Media и др.), Flash сейчас единственный широко используемый плагин, обеспечивающий кроссбраузерную совместимость с требуемыми для разработчиков API-интерфейсами.
Как свидетельствуют различные медиаплееры на основе Flash , их авторы заинтересованы в поддержке собственных пользовательских интерфейсов , которые обычно позволяет пользователям воспроизводить, делать паузу, останавливать, искать и регулировать громкость. Планируется обеспечить эту функциональность в браузерах, добавив встроенную поддержку для видео и аудио и предоставив API скриптам для управления воспроизведением.
Новые элементы
и
делают это очень простым. Большинство API одинаково для этих двух элементов, разница лишь связана с присущими различиями между визуальным и невизуальным медиа.
Представление документа
В отличие от предыдущих версий HTML и XHTML, которые определены с позиции их синтаксиса, HTML5 в настоящее время определяется в терминах объектной модели документа (DOM) -дерево представления, которое используют браузеры для отображения документа. К примеру, рассмотрим очень простой документ, состоящий из названия, заголовка и абзаца. Дерево DOM может выглядеть примерно так.
Дерево DOM включает элемент
внутри , а также и
Преимуществом определения HTML5 в терминах DOM является то, что язык сам по себе может быть определен независимо от синтаксиса. Существует два синтаксиса, которые могут быть использованы для представления HTML-документов: публикация на HTML (известная как HTML5) и публикация на XML (известная как XHTML5).
Синтаксис HTML основан на SGML, ранней версии HTML, но определен как более совместимый с браузерами на практике.
HTML-документ
Пример
Это пример HTML-документа
Заметьте, как и в предыдущих версиях HTML, некоторые теги являются необязательными и подразумеваются автоматически.
Публикация на XML основана на синтаксисе с использованием XML 1.0 и пространстве имен XHTML 1.0.
HTML-документ
Пример
Это пример HTML-документа
За исключением закрытого тега и наличия атрибута xmlns
эти два примера идентичны.
Браузеры используют MIME-тип для различий. Любой документ, отправленный как text/html
должен соответствовать требованиям для публикации на HTML, а документ, отправленный с MIME-типом application/xhtml+xml
должен соответствовать требованиям для публикации на XML.
Авторы должны сделать осознанный выбор, какой вариант использовать, это зависит от ряда различных факторов. Авторы не должны безоговорочно использовать один или другой вариант, каждый из них оптимизирован для различных ситуаций.
Преимущества использования HTML
Обратная совместимость с существующими браузерами.
Авторы уже знакомы с синтаксисом.
Снисходительный синтаксис не приведет к появлению «Желтого экрана смерти», при возникновении случайной ошибки.
Удобный синтаксис сокращений, к примеру, авторы могут опускать некоторые теги и значения атрибутов.
Преимущества использования
XHTML
Строгий синтаксис XML поощряет авторов писать правильный код, для некоторых авторов он проще в обслуживании.
Напрямую интегрируется с другими XML-технологиями вроде SVG и MathML.
Позволяет использовать обработчик XML, который некоторые авторы используют в своей деятельности.
Как помочь
Работа над HTML5 быстро продвигается, но по-прежнему ожидается, что займет несколько лет. В связи с требованием провести ряд тестов и достигнуть совместимости реализаций, работа по текущим оценкам должна завершиться через 10–15 лет. В ходе этого процесса для успеха имеет большое значение обратная связь с широким кругом людей, включая веб-дизайнеров, разработчиков CMS и браузеров. Активно поощряется каждый вклад в HTML5.
В дополнение к спецификации, есть несколько других проектов, чтобы помочь людям лучше понять эту работу.
The Differences from HTML 4 описывает изменения, которые произошли со времени предыдущей версии HTML.
The HTML Design Principles обсуждает принципы, используемые для принятия решений, и поможет понять обоснование многих текущих проектных решений.
The Web Developer’s Guide to HTML 5 пишется, чтобы помочь веб-дизайнерам и разработчикам понять все, что нужно знать для написания соответствующих документов HTML5, и обеспечить эти принципы на практике.
Есть множество сообществ, через которые вы можете внести свой вклад. Можно присоединиться к W3C HTML и подписаться на список рассылки или вики . Вы также можете подписаться и посодействовать в любом из
В этой статье мы рассмотрим, какие элементы необходимо использовать при построении базовой структуры HTML
документа.
Если вы посмотрите на сайт «HTML5 Herald
», то увидите, что он разделен следующим образом:
шапка сайта с логотипом и заголовком;
панель навигации;
содержимое тела разделено на три столбца;
статьи и рекламные блоки в столбцах;
подвал сайта, содержащий информацию об авторе и авторских правах.
Прежде чем мы определим, какие HTML-элементы
подходят для разных частей страницы, давайте рассмотрим ряд других вопросов. Прежде всего, мы познакомимся с несколькими новыми семантическими элементами HTML5
, которые можно использовать, чтобы разделить страницу и сделать структуру документа более осмысленной.
Элемент header
Первым элементом структуры HTML
, который мы рассмотрим, является элемент header
. Спецификация описывает его кратко — «группа вводных или навигационных элементов
».
Вопреки мнению, вы можете использовать header
, чтобы представить каждый раздел контента. Когда мы используем здесь слово «раздел
», мы не ограничиваемся разделами, разбитыми с помощью элемента section. Технически мы говорим о том, что в HTML5
называется «секционным контентом
». Это означает любой фрагмент контента, которому может потребоваться собственный заголовок, даже если это приведет к тому, что на одной странице будет несколько таких фрагментов.
Элемент header
может использоваться для включения вводного контента или средств навигации, которые являются специфическими для любого раздела страницы, или применяются ко всей странице.
Хотя элемент header
часто размещается в верхней части страницы или раздела, его определение не зависит от положения. В структуре сайта может быть указано, что заголовок статьи или записи в блоге может размещаться справа, слева или даже ниже контента. Независимо от этого, все равно можете использовать header
для описания контента.
Элемент section
Спецификация дает для него такое определение
:
Элемент section
представляет собой общий раздел документа или приложения. Раздел в этом контексте представляет собой тематическую группу контента, как правило, с заголовком.
Далее поясняется, что section
не должен использоваться в качестве универсального контейнера для добавления стилей или скриптов. Если мы не можем использовать section в качестве общего контейнера — например, чтобы получить желаемый макет через CSS
– то, что для этого использовать? В этом нам поможет элемент div
, который не имеет определенного семантического значения.
Возвращаясь к определению из спецификации, содержимое элемента section
должно быть «тематическим
», поэтому неправильно использовать его для группировки несвязанных фрагментов контента.
Некоторые примеры корректного использования элемента section
в структуре HTML страницы
:
отдельные разделы интерфейса с вкладками;
сегменты страницы «О нас
» может включать разделы, посвященные истории компании;
различные части длинной страницы «условий обслуживания
»;
различные разделы сайта онлайн-новостей — статьи могут быть сгруппированы в разделы, посвященные спорту, политике и экономическим новостям.
Корректное использование section
Каждый раз, когда веб-дизайнерам предоставляется новая семантическая разметка, будет обсуждаться, что является правильным использованием этих элементов, какую цель преследовало ее введение в спецификации и т. д.
Вкратце
:
section
является общим элементом, поэтому, если требуется более конкретный семантический элемент (например, article
, aside
или nav
), используйте их.
section
имеет семантическое значение. Это означает, что контент, который он содержит, связан. Если вы не можете кратко описать весь контент, который хотите добавить в раздел, используя всего несколько слов, то нужно использовать семантически нейтральный контейнер — скромный div
.
В некоторых случаях есть место для свободной интерпретации. Если чувствуете, что имеет смысл использовать именно данный элемент , а не другой, делайте это. Даже если кто-либо упрекнет вас в этом, дискуссия, которая возникнет в результате, может быть интересной и познавательной для всех, кто в ней участвует.
В структуре сайта HTML
разрешается вкладывать элементы section в существующие элементы section, если это необходимо. Например, для сайта новостей раздел «Мировые новости» можно разделить на разделы для каждого крупного региона.
Элемент article
Элемент article
во многом аналогичен элементу section
, но есть и существенные различия. Определение спецификации
гласит:
Элемент article
представляет собой полный или самодостаточный набор в документе, на странице, в приложении или на сайте. Он может независимо распространяться или повторно использоваться.
Ключевыми моментами этого определения являются самодостаточный набор и независимо распространяться. В то время как section
может содержать любой контент, который может быть сгруппирован тематически, article
должен представлять собой единый контент, который может использоваться сам по себе. Это различие может быть трудно различимо для вас.
Поэтому, когда вы сомневаетесь, попробуйте протестировать синдикацию: если часть контента может быть переиздана на другом сайте без изменения, или если ее можно выложить как обновление через RSS
, у нее есть признаки article
.
сообщение на форуме;
журнальная или газетная статья;
запись в блоге;
комментарий, оставленный пользователем в блоге или к статье.
Как и в случае с section
, элементы article
могут быть вложены в другие article
. Также можно вложить элемент section
внутрь article
, и наоборот.
Элемент nav
Можно предположить, что элемент nav
будет использоваться практически в каждой структуре HTML файла
. Он представляет собой то, что подразумевается: группу навигационных ссылок. Хотя наиболее распространенное использование для nav
будет заключаться в размещении маркированных списков ссылок. Есть и другие варианты. Например, можно обернуть в элемент nav
абзац текста, содержащего основные ссылки навигации страницы или раздела.
В любом случае элемент nav
должен быть зарезервирован для навигации, и это его первостепенное значение. Рекомендуется избегать использования nav для краткого списка ссылок, размещаемого в подвале сайта.
Примечание: Пропуск ссылок навигации
Решение, применение которого вы видели на многих сайтах — это ссылка «пропустить навигацию»
. Идея состоит в том, чтобы позволить пользователям экранных дикторов быстро пропустить основную навигацию сайта, если они уже прослушали ее.
При каждом переходе на новую страницу нет смысла слушать главное меню навигации сайта! Элемент nav может помочь в решении этого вопроса. Если экранный диктор видит элемент nav, он может позволить пропустить навигацию, не требуя дополнительной ссылки . В спецификации указано:
«Пользовательские агенты (например, программы чтения с экрана
), предназначенные для пользователей, которые могут получить пользу от навигационной информации , опущенной при первоначальном рендеринге, или получить пользу от немедленного доступа к навигационной информации, могут использовать элемент в качестве способа определения, какой контент на странице сначала пропустить или предоставить по запросу
».
Примечание. Пользовательские агенты
При изучении спецификации структуры HTML 5
вы столкнетесь с термином «пользовательский агент
». Он обозначает браузер, который пользователь использует для доступа к содержимому веб-страницы. Причина, по которой в спецификации не говорят просто «браузер
», заключается в том, что пользовательские агенты могут включать в себя программы чтения с экрана или другие технологические средства.
Можно использовать nav более одного раза на странице. Если у вас есть основная панель навигации сайта, она обертывается в элемент nav
. Кроме этого, если есть вторичный набор ссылок, указывающих на разные части текущей страницы , его тоже можно обернуть в элемент nav
.
Некоторые разработчики считают, что nav подходит для разбивки на страницы или ссылок «хлебных крошек
». А также для формы поиска, которая является основным средством навигации по сайту.
Данное решение в конечном итоге зависит от вас. Ян Хиксон
, главный редактор спецификации HTML5 WHATWG
, прямо ответил на этот вопрос: «Используйте [его] там, где бы вы использовали class = nav
».
Элемент aside
Представляет часть страницы, которая «связана с содержимым вокруг элемента aside и может рассматриваться отдельно от этого содержимого
».
Элемент aside
можно использовать для обертывания части контента, которая имеет отношение к:
Конкретному контенту (например, статья или раздел
);
Целой странице или документу, как это обычно делается при добавлении боковой панели на страницу или сайт.
Элемент aside
не должен использоваться для обертывания разделов страницы, которые являются частью основного содержимого.
Другими словами, aside
не должен быть основным родительским элементом. Содержимое aside
может размещаться само по себе, но оно все равно должно быть частью большего целого.
Варианты использования элемента aside
в структуре index html
: боковая панель, дополнительный список ссылок или блок рекламы. Следует также отметить, что элемент aside
(как и в случае с элементов header
) не определяется его позицией на странице. Он может располагаться сбоку или в другом месте.
Элемент footer
Как и в случае с элементом header
, может быть несколько элементов footer
на одной странице, и вы должны использовать footer
вместо