Ниже приводится выдержка из нашей книги « HTML5 и CSS3 для реального мира», 2-е издание , написанной Алексисом Гольдштейном, Луи Лазарисом и Эстель Вейль. Копии продаются в магазинах по всему миру, или вы можете купить их в электронном виде здесь .
Теперь, когда мы разбили основы нашего шаблона, давайте начнем добавлять мясо в кости и придать нашей странице некоторую структуру.
Позже в этой книге мы будем специально разбираться с добавлением функций CSS3 и других достоинств HTML5; сейчас мы рассмотрим, какие элементы мы хотим использовать при создании общего макета нашего сайта. Мы многое расскажем в этом разделе и в последующих главах о семантике. Когда мы используем термин «семантика», мы имеем в виду способ, которым данный элемент HTML описывает значение его содержимого.
Если вы посмотрите на скриншот The HTML5 Herald (или просмотрите сайт онлайн ), вы увидите, что он разделен следующим образом:
-
заголовок раздела с логотипом и заголовком
-
Панель навигации
-
содержание тела разделено на три колонки
-
статьи и рекламные блоки внутри столбцов
-
нижний колонтитул, содержащий информацию об авторе и авторских правах
Прежде чем мы решим, какие элементы подходят для этих различных частей нашей страницы, давайте рассмотрим некоторые из наших вариантов. Прежде всего, мы познакомим вас с некоторыми из новых семантических элементов HTML5, которые можно использовать, чтобы помочь разделить нашу страницу и добавить больше смысла в структуру нашего документа.
Элемент header
Естественно, первый элемент, который мы рассмотрим, это элемент header . Спецификация описывает его лаконично как «группу вводных или навигационных средств».
Вопреки тому, что вы обычно предполагаете, вы можете включить новый элемент заголовка, чтобы представить каждый раздел вашего контента. Он не только зарезервирован для заголовка страницы (который обычно можно пометить с помощью <div id="header"> ). Когда мы используем здесь слово «раздел», мы не ограничиваемся фактическим элементом section описанным в следующей части; технически мы имеем в виду то, что HTML5 называет «секционированием контента». Это означает, что любой кусок контента может нуждаться в собственном заголовке, даже если это означает, что на одной странице имеется несколько таких порций.
Элемент header может использоваться для включения вводного содержимого или навигационных средств, которые относятся к любому отдельному разделу страницы или применяются ко всей странице, или к обоим.
Хотя элемент header часто размещается в верхней части страницы или раздела, его определение не зависит от его положения. Макет вашего сайта может потребовать, чтобы заголовок статьи или сообщения в блоге был слева, справа или даже ниже содержимого; независимо от того, что вы можете использовать header для описания этого содержимого.
Элемент section
Следующим элементом, с которым вы должны ознакомиться, является элемент section HTML5. Спецификация определяет section следующим образом:
Элемент
sectionпредставляет общий раздел документа или приложения. Раздел в этом контексте представляет собой тематическую группу контента, обычно с заголовком.
Далее объясняется, что section не должен использоваться в качестве универсального контейнера, который существует только для стилей или сценариев. Если вы не можете использовать section в качестве универсального контейнера — например, для достижения желаемого макета CSS — тогда что вы должны использовать? Наш старый друг, элемент div , который семантически бессмыслен.
Возвращаясь к определению из спецификации, содержимое элемента section должно быть «тематическим», поэтому было бы неправильно использовать его универсальным способом для обертывания несвязанных частей содержимого.
Некоторые примеры допустимого использования для элементов section включают в себя:
-
отдельные разделы интерфейса с вкладками
-
сегменты страницы «О нас»; например, страница «О компании» может содержать разделы об истории компании, ее миссии и ее команде
-
различные части длинной страницы «Условия использования»
-
различные разделы новостного интернет-сайта; например, статьи могут быть сгруппированы в разделы, посвященные спорту, мировым событиям и экономическим новостям
Примечание. Правильное использование section
Каждый раз, когда новая семантическая разметка становится доступной для веб-дизайнеров, будут споры о том, что представляет собой правильное использование этих элементов, каковы были намерения спецификации и так далее. Возможно, вы помните дискуссии о правильном использовании элемента dl в предыдущих спецификациях HTML. Неудивительно, что HTML5 не был застрахован от этого явления, особенно когда речь идет об элементе section . Даже Брюс Лоусон, уважаемый авторитет в области HTML5, в прошлом признавался в неправильном использовании section . Для большей ясности стоит прочитать сообщение Брюса, объясняющее его ошибку.
Короче говоря:
-
sectionявляется общим , поэтому, если подходит более конкретный семантический элемент (например,article,asideилиnav), используйте его вместо этого. -
sectionимеет семантическое значение ; это подразумевает, что содержание, которое это содержит, связано некоторым образом. Если вы не можете кратко описать весь контент, который вы пытаетесь поместить вsectionиспользуя всего несколько слов, скорее всего вам нужен семантически нейтральный контейнер: скромныйdiv.
Тем не менее, как всегда в случае с семантикой, в некоторых случаях она открыта для интерпретации. Если вы чувствуете, что можете объяснить, почему вы используете данный элемент, а не другой, сделайте это. В маловероятном случае, когда кто-либо когда-либо вас к вам призовет, итоговая дискуссия может быть интересной и полезной для всех участников, и может даже способствовать пониманию спецификации более широким сообществом.
Помните также, что вам разрешено вложить элементы section в существующие элементы section , если это необходимо. Например, для новостного веб-сайта в Интернете раздел «Мировые новости» может быть дополнительно подразделен на раздел для каждого основного глобального региона.
Элемент article
Элемент article похож на элемент section , но есть некоторые заметные различия. Вот определение согласно спецификации:
Элемент article представляет собой полную или самодостаточную композицию в документе, странице, приложении или сайте и, в принципе, может независимо распространяться или использоваться повторно, например, в синдикации.
Ключевые термины в этом определении являются автономной композицией и могут быть независимо распределены . Принимая во внимание, что section может содержать любой контент, который может быть сгруппирован тематически, article должна быть отдельной частью контента, которая может стоять сама по себе. Это различие может быть трудно обернуть, поэтому, если вы сомневаетесь, попробуйте тест синдикации: если часть контента может быть переиздана на другом сайте без изменения, или если он может быть выдан как обновление через RSS, или на сайтах социальных сетей, таких как Twitter или Facebook, в нем есть article .
В конечном счете, вам решать, из чего состоит статья, но вот несколько советов в соответствии с рекомендациями в спецификации:
-
сообщение на форуме
-
журнальная или газетная статья
-
запись в блоге
-
пользовательский комментарий к записи в блоге или статье
Наконец, так же, как элементы section элементы article могут быть вложены в другие элементы article . Вы также можете вкладывать section в article , и наоборот. Все зависит от контента, который вы размечаете.
nav Элемент
Можно с уверенностью предположить, что элемент nav появится практически в каждом проекте. nav представляет именно то, что он подразумевает: группа навигационных ссылок. Хотя наиболее распространенное использование для nav будет для упаковки неупорядоченного списка ссылок, есть и другие варианты. Например, вы можете обернуть элемент nav вокруг абзаца текста, который содержит основные навигационные ссылки для страницы или раздела страницы.
В любом случае элемент nav должен быть зарезервирован для навигации, которая имеет первостепенное значение. Поэтому рекомендуется избегать использования nav для краткого списка ссылок в нижнем колонтитуле.
Примечание: пропустить навигационные ссылки
Шаблон дизайна, который вы, возможно, видели на многих сайтах, это ссылка «Пропустить навигацию» Идея состоит в том, чтобы позволить пользователям программ чтения с экрана быстро пропустить основную навигацию вашего сайта, если они уже слышали ее — в конце концов, нет смысла слушать все меню навигации большого сайта каждый раз, когда вы переходите на новую страницу! Элемент nav может устранить эту необходимость; если программа чтения с экрана видит элемент nav , он может позволить своим пользователям пропустить навигацию, не требуя дополнительной ссылки. Спецификация гласит: «Пользовательские агенты (такие как программы чтения с экрана), предназначенные для пользователей, которые могут извлечь выгоду из-за того, что навигационная информация пропущена при первоначальном рендеринге, или для кого может быть полезна немедленная доступность навигационной информации, могут использовать этот элемент как способ определить, какой контент на странице нужно изначально пропустить или предоставить по запросу (или обоим) ».
Хотя не все вспомогательные устройства распознают nav на момент написания этой статьи, теперь благодаря стандартам вы гарантируете, что по мере улучшения программ чтения с экрана ваша страница со временем станет более доступной.
Примечание. Агенты пользователей
Вы часто сталкиваетесь с термином «пользовательский агент» при просмотре спецификаций. На самом деле, это просто модный термин для браузера — программный «агент», который пользователь использует для доступа к содержимому страницы. Причина, по которой спецификации не просто говорят «браузер», заключается в том, что пользовательские агенты могут включать программы чтения с экрана или любые другие технологические средства для чтения веб-страницы.
Вы можете использовать nav более одного раза на данной странице. Если у вас есть основная панель навигации для сайта, для этого потребуется элемент nav . Кроме того, если у вас есть вторичный набор ссылок, указывающих на разные части текущей страницы (с использованием привязок внутри страницы или «локальных» ссылок), это тоже может быть заключено в элемент nav .
Как и в случае с section , были некоторые споры о том, что представляет собой приемлемое использование nav и почему оно не рекомендуется в некоторых обстоятельствах (например, в нижнем колонтитуле). Некоторые разработчики считают, что этот элемент подходит для нумерации страниц или ссылок, а также для формы поиска, которая представляет собой основное средство навигации по сайту (как в случае с Google).
Это решение в конечном итоге будет зависеть от вас, разработчика. Ян Хиксон, главный редактор спецификации HTML5 WHATWG, ответил на вопрос напрямую: «используйте [это] всякий раз, когда вы использовали бы class = nav». [7]
Элемент в aside
Этот элемент представляет собой часть страницы, которая «косвенно связана с контентом вокруг элемента aside и которую можно рассматривать отдельно от этого контента».
Элемент aside может использоваться для переноса части содержимого, которая имеет отношение к:
-
конкретная отдельная часть содержимого (например,
articleилиsection). -
вся страница или документ, как это обычно делается при добавлении боковой панели на страницу или веб-сайт.
Элемент aside никогда не должен использоваться для переноса разделов страницы, которые являются частью основного содержимого; иными словами, в aside не должно быть в скобках. Дополнительный контент может стоять сам по себе, но он все равно должен быть частью большего целого.
Некоторые возможные варианты использования включают боковую панель, вторичный список ссылок или рекламный блок. Следует также отметить, что элемент aside (как в случае с header ) не определяется его положением на странице. Это может быть на стороне, или это может быть в другом месте. Это сам контент и его отношение к другим элементам, которые его определяют.
Элемент footer
Последний элемент, который мы обсудим в этой главе — это элемент footer . Как и в случае с header , вы можете иметь несколько элементов footer на одной странице, и вам следует использовать footer вместо чего-то общего, такого как <div id="footer"> .
Элемент нижнего колонтитула, согласно спецификации, представляет нижний колонтитул для раздела содержимого, который является его ближайшим предком. Раздел содержимого может быть целым документом или section , article или дополнительным элементом.
Часто footer будет содержать информацию об авторских правах, списки связанных ссылок, информацию об авторе и аналогичную информацию, о которой вы обычно думаете, что она находится в конце блока контента; однако, как и в случае с aside и header колонтитулом, элемент нижнего колонтитула не определяется с точки зрения его положения на странице, поэтому он не должен появляться в конце раздела или в нижней части страницы. Скорее всего, так и будет, но это не обязательно. Например, информация об авторе сообщения в блоге может отображаться над сообщением, а не под ним, и все равно будет считаться информацией нижнего колонтитула.
Примечание: как мы сюда попали?
Если вам интересно узнать о пути к HTML5 и о том, как мы закончили с тегами, которые мы сделали, вы можете проверить книгу Люка Стивенса под названием «Правда о HTML5» . В настоящее время во втором издании книга Люка несколько противоречива. Помимо того, что он охватывает многие из технологий HTML5, таких как видео и холст, он также углубленно освещает историю HTML5, объясняет некоторые проблемы семантики и доступности, присущие новым элементам, и дает некоторые рекомендации о том, как справиться с этими проблемами.