Html5 структура страницы: Типовая структура страницы в HTML5 — CSS-LIVE

). Когда мы используем здесь слово «раздел», мы не ограничиваем себя фактическими секция элемент описан в следующей части; технически мы имеем в виду то, что HTML5 называет «разделением контента». Это означает, что любой фрагмент контента может нуждаться в собственном заголовке, даже если это означает, что на одной странице есть несколько таких фрагментов.

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

Хотя элемент заголовка часто размещается в верхней части страницы или раздела, его определение не зависит от его положения. Макет вашего сайта может потребовать, чтобы заголовок статьи или поста в блоге располагался слева, справа или даже под содержимым; независимо от того, вы все еще можете использовать заголовок для описания этого содержимого.

Раздел

Элемент

Следующий элемент, с которым вы должны познакомиться, — это элемент HTML5

section . Спецификация определяет раздел следующим образом:

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

Далее поясняется, что раздел 9 0052 не следует использовать в качестве универсального контейнера, который существует только для целей стилизации или сценариев. Если вы не можете использовать раздел в качестве универсального контейнера, например, для достижения желаемого макета CSS, то что вам следует использовать? Наш старый друг, элемент div , семантически бессмысленный.

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

Некоторые примеры допустимого использования элементов раздела включают:

• отдельные разделы интерфейса с вкладками

• сегмента страницы «О нас»; например, страница «О компании» может включать разделы, посвященные истории компании, ее миссии и команде

  .

• разные части длинной страницы «условия обслуживания»

• различных раздела новостного интернет-сайта; например, статьи можно сгруппировать в разделы, посвященные спорту, событиям в мире и экономическим новостям 9.0003

Примечание. Правильное использование раздела

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

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

Короче:

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

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

  секция , используя всего несколько слов, скорее всего, вместо этого вам нужен семантически нейтральный контейнер: скромный div .

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

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

Элемент

, статья

Элемент , статья аналогичен элементу , раздел , но есть некоторые заметные отличия. Вот определение согласно спецификации:

Элемент article представляет полную или автономную композицию в документе, странице, приложении или сайте, которая, в принципе, может распространяться или повторно использоваться независимо друг от друга, т.

е. в синдикации.

Ключевыми терминами в этом определении являются автономный состав и независимо распространяемый . В то время как раздел может содержать любой контент, который может быть тематически сгруппирован, статья должна быть отдельным фрагментом контента, который может стоять сам по себе. Это различие может быть трудно усвоить, поэтому, если вы сомневаетесь, попробуйте проверить синдикацию: если часть контента может быть повторно опубликована на другом сайте без изменений или если ее можно отправить в виде обновления через RSS, или на сайтах социальных сетей, таких как Twitter или Facebook, у него есть задатки

статья .

В конечном счете, вам решать, что представляет собой статья, но вот некоторые предложения в соответствии с рекомендациями в спецификации:

Наконец, точно так же, как элементы раздела , элементы статьи могут быть вложены в другие статьи . элемента. Вы также можете вложить раздел внутрь артикула и наоборот. Все зависит от контента, который вы размечаете.

Навигация

Элемент

Можно с уверенностью предположить, что элемент nav появится практически в каждом проекте. nav представляет именно то, что подразумевает: группу навигационных ссылок. Хотя чаще всего nav используется для переноса неупорядоченного списка ссылок, существуют и другие варианты. Например, вы можете обернуть элемент nav вокруг абзаца текста, содержащего основные навигационные ссылки для страницы или раздела страницы.

В любом случае 9Элемент 0051 nav должен быть зарезервирован для навигации, которая имеет первостепенное значение. Поэтому рекомендуется избегать использования nav , например, для краткого списка ссылок в нижнем колонтитуле.

Примечание. Пропуск навигационных ссылок

Шаблон проектирования, который вы, возможно, видели реализованным на многих сайтах, — это ссылка «пропустить навигацию». Идея состоит в том, чтобы позволить пользователям программ чтения с экрана быстро пропустить основную навигацию вашего сайта, если они уже слышали ее — в конце концов, нет смысла прослушивать все меню навигации большого сайта каждый раз, когда вы переходите на новую страницу! 9Элемент 0051 nav может устранить эту потребность; если средство чтения с экрана увидит элемент nav , оно может позволить пользователям пропускать навигацию, не требуя дополнительной ссылки. Спецификация гласит: «Пользовательские агенты (такие как программы для чтения с экрана), предназначенные для пользователей, которые могут извлечь выгоду из того, что навигационная информация будет пропущена при первоначальном отображении, или которые могут извлечь выгоду из немедленного доступа к навигационной информации, могут использовать этот элемент как способ определить, какой контент на странице изначально пропускать или предоставлять по запросу (или и то, и другое)».

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

Примечание. Пользовательские агенты

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

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

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

Это решение, в конечном счете, зависит от вас, разработчика. Ян Хиксон, главный редактор спецификации HTML5 WHATWG, прямо ответил на вопрос: «используйте [это] всякий раз, когда вы использовали бы class=nav». [7]

Элемент

aside

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

9Элемент 0051 aside можно использовать для переноса части контента, касающейся:

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

Некоторые возможные варианты использования помимо включают боковую панель, вторичный список ссылок или рекламный блок. Также следует отметить, что 9Элемент 0051 side (как и в случае header ) не определяется его положением на странице. Может быть сбоку, а может быть где-то еще. Само содержание и его отношение к другим элементам определяют его.

Элемент нижнего колонтитула

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