В этой статье мы рассмотрим, какие элементы необходимо использовать при построении базовой структуры 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 вместо .

Элемент footer , согласно спецификации, представляет собой футер для раздела контента, являющегося его ближайшим предком. Разделом контента может быть весь документ или элемент section , article , aside .

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

Не используйте как обёртку для оформления

Одна из самых распространённых проблем, которую я часто вижу в разметке сайтов - это произвольная замена элементов структурными элементами из HTML5, особенно замена оформительской обёртки на . В XHTML или HTML4 я бы увидел что-нибудь такое:

Моя супер-пупер страница

Вместо этого я вижу следующее:

Честно говоря, это неправильно: - это не обёртка. Элемент определяет смысловую секцию содержимого для создания структуры документа . Он должен содержать заголовок. Если вы ищете элемент для того чтобы обернуть в него всю страницу (в стиле HTML или XHTML), подумайте, не применить ли стили непосредственно к элементу , как описано у Крока Кеймена . Если же вам всё ещё нужна дополнительная обёртка, используйте . Раз уж Доктор Майк объясняет, что не мёртв , а вам не удаётся найти ничего более удачного, пожалуй, этот элемент будет самым подходящим для создания оформительской обёртки.

Таким образом, корректной разметкой для упомянутого выше примера с использованием HTML5 и пары ролей ARIA будет следующий код. Обратите внимание, что вам, в зависимости от дизайна, всё ещё могут понадобится экстра-элементы .

Моя супер-пупер страница

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

Используйте и осознанно

Элемент удалён из спецификации HTML5 и не рекомендован к использованию, прим. редактора.

Нет смысла писать разметку, если этого можно не делать, так ведь? К сожалению, я часто вижу элементы и там, где они совсем не нужны. Вы можете узнать все подробности в наших статьях, посвящённых элементу и элементу , но я коротко резюмирую:

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

Думаю, что вы в курсе, что можно использовать в документе несколько раз. Но эта возможность привела к следующим ошибкам:

Мой лучший пост

Если ваш содержит единственный заголовок, избавьтесь от ненужного . Элемент в любом случае гарантирует, что заголовок войдёт в смысловую структуру документа. И поскольку не содержит нескольких элементов, как указано в его описании, зачем вам код, который, в общем-то, не нужен? Будьте проще:

Мой лучший пост

Неправильное использование

Раз уж зашла речь о заголовках - я часто вижу неправильное использование . Не следует использовать в сочетании с в случае, когда:

  • дочерний заголовок всего один или
  • элемента будет достаточно и без .

Первая проблема выглядит так:

Мой лучший пост

Ричард Кларк

В этом случае стоит избавиться от и оставить только заголовок:

Мой лучший пост

Ричард Кларк

Следующая проблема состоит в очередном использовании элементов там, где они необязательны:

Моя компания Основана в 1893 году

Когда - это единственный дочерний элемент , то какой смысл в этом ? Если в нём нет дополнительных элементов, соседствующих с , смело избавляйтесь от .

Моя компания Основана в 1893 году

Больше примеров использования вы можете найти .

Не оборачивайте все списки ссылок в

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

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

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

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

  • Самая главная навигация;
  • Поиск по сайту;
  • Вторичная навигация (что спорно);
  • Внутренняя навигация (по длинной статье, например).

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

  • Постраничная навигация;
  • Социальные ссылки, за исключением тех случаев, когда такие ссылки являются основной навигацией, к примеру, на сайтах About Me и Flavours ;
  • Тэги к записи в блоге;
  • Категории записи;
  • Навигация третьего уровня;
  • Подвалы, набитые ссылками.

Если вы не уверены, стоит ли оборачивать список ссылок в , просто спросите у себя: «главная ли это навигация?» Чтобы было легче ответить на этот вопрос, обратитесь к следующим правилам:

  • «Не используйте , если кажется, что в этом случае может подойти и с заголовком », - Ян Хиксон, IRC .
  • Добавите ли вы этот блок в список ссылок «перейти» для улучшения доступности?

Если ответ на оба эти вопроса «нет», то, скорее всего, это не .

Общие ошибки с элементом

Ах, . Правильным использованием этого элемента вместе с подельником не так-то просто овладеть. Рассмотрим некоторые общие проблемы, которые я вижу при использовании .

Не каждая картинка это

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

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

Если это исключительно оформительская картинка, никаким образом не упомянутая в основном документе, то это точно не . Есть и другие варианты использования, но просто спросите себя: «Нужна ли эта картинка для лучшего понимания контекста?» Если нет, то это вероятно не , а, возможно, . Если да, спросите себя: «Можно ли переместить эту картинку в примечания к тексту?» Если ответ на оба вопроса «да», то это, вероятнее всего, .

Ваш логотип - это не

Плавно переходим к следующей проблеме, вышеупомянутые правила применимы и к ней. Вот пара регулярно встречающихся примеров:

Название компании

Добавить здесь нечего: это совсем неправильно. Мы можем спорить до посинения насчёт того, должно ли лого находиться внутри , но мы здесь не за этим. Настоящая проблема - в неправильном употреблении . Этот элемент должен использоваться, только если он упоминается в документе или контексте общего структурного элемента. Будет честным признать, что ваш логотип вряд ли будет упомянут подобным образом. Просто не делайте так. Всё, что вам нужно, это:

Название компании

Элемент - это не только картинки

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

Простой документ HTML5

Рассмотрим один из простейших документов HTML5. Он начинается с указания типа документа с помощью специального кода описания типа документа (значение этого кода объясняется в следующем разделе), после чего задается кодировка и название документа, а потом идет его содержимое. В данном случае содержимое состоит из одного абзаца текста:

Крошечный документ HTML5

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

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

Крошечный документ HTML5

Дадим встряску браузеру в стиле HTML5!

Наконец, весь документ (за исключением строки doctype) можно облачить в традиционный элемент , как показано в следующем листинге:

Крошечный документ HTML5

Дадим встряску браузеру в стиле HTML5!

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

Использование элементов , и является просто вопросом стиля. Страница без этих элементов будет работать отличнейшим образом даже на старых браузерах, которые и слыхом не слыхивали ни о каком HTML5. Фактически, браузер автоматически предполагает наличие этих элементов. Поэтому, если посмотреть на модель DOM (набор программных объектов, представляющих страницу) страницы с помощью сценария JavaScript, она будет содержать объекты для элементов , и , даже если разработчик и не использовал их.

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

Описание типа документа HTML5

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

Первое, что бросается в глаза в описании типа документа HTML5 - это его поразительная простота. Сравните его, например, с неуклюжим описанием типа документа, который требуется использовать веб-разработчикам при работе со строгим XHTML 1.0:

Даже профессиональные веб-разработчики были вынуждены вставлять описание типа документа XHTML методом копирования и вставки из другого документа. А описание типа документа HTML5 короткое, четкое и легко вводится вручную.

Описание типа документа HTML5 также примечательно тем, что оно не содержит номера официальной версии HTML (5 для HTML5). В нем просто указывается, что страница является HTML-страницей. Это соответствует новой концепции HTML5 как живого языка. Добавленные в HTML новые возможности автоматически доступны для размещения на странице, не требуя для этого изменений в описании типа документа.

Все это порождает непростой вопрос: если HTML5 - живой язык, то зачем тогда для страницы вообще нужно описание типа документа?

Ответ на этот вопрос таков: описание типа документа продолжает использоваться по историческим причинам. При обработке страницы с отсутствующим описанием типа документа большинство браузеров (включая Internet Explorer и Firefox) переходят в режим совместимости (quirks mode) . В этом режиме они пытаются отобразить страницу с учетом ошибок в правилах, которые использовались в более ранних версиях. Проблема с этим состоит в том, что режим совместимости одного браузера может отличаться от режима совместимости другого браузера, вследствие чего страницы, разработанные для одного браузера, на другом браузере будут, скорее всего, отображаться с ошибками, такими как неправильный размер шрифта, нарушенная структура оформления и т.п.

А обнаружив на странице описание типа документа, браузер знает, что обработку этой страницы требуется выполнять, следуя более строгим правилам режима стандартов (standards mode) , который обеспечивает единообразное форматирование и структуру страницы при ее отображении любым современным браузером. За некоторыми исключениями, браузеру совершенно безразлично, какой именно тип документа указан в описании. Он просто проверяет, что страница имеет какое-либо описание типа документа. Описание типа документа HTML5 просто самое короткое действительное описание типа документа, которое задействует режим стандартов браузера.

Кодировка символов

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

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

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

Крошечный документ HTML5

Инструменты для веб-разработки, такие как Dreamweaver или Expression Web, вставляют этот элемент автоматически при создании страницы. Эти инструменты также обеспечивают сохранение файлов в кодировке UTF. Но при создании веб-страницы с помощью обычного текстового редактора, чтобы обеспечить сохранение файлов в правильной кодировке, может потребоваться выполнить дополнительные шаги.

Язык

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

Вставить в веб-страницу информацию о языке легче всего через элемент :

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

Добавление таблицы стилей

Практически в каждой странице должным образом разработанного профессионального веб-сайта используются таблицы стилей. Для указания требуемой таблицы стилей используется элемент в блоке документа HTML5:

Крошечный документ HTML5

Этот способ похож на указание таблиц стилей в традиционных HTML-документах, но немного проще. Так как существует единственный язык каскадных таблиц стилей - CSS, то в добавлении атрибута type="text/css", который требовался ранее, больше нет надобности.

Добавление JavaScript-кода

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

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

Крошечный документ HTML5

Атрибут language="JavaScript" не является обязательным, т. к. если не указан какой-либо другой язык сценариев (а поскольку JavaScript - единственный широко-поддерживаемый язык сценариев для HTML, то вероятность такого развития ничтожно мала), браузеры автоматически предполагают, что используется JavaScript. Но даже ссылаясь на внешний файл с кодом JavaScript, все равно нужно помнить о закрывающем теге . Если упустить этот тег по недосмотру или при попытке укоротить код, используя синтаксис пустых элементов, то страница не будет работать должным образом.

Если вы уделяете много времени тестированию своих страниц с JavaScript в Internet Explorer, может быть полезным добавление метки MOTW (Mark of the Web - метка особенности сети) в блок сразу же после строки кодировки. Делается это таким образом:

Крошечный документ HTML5

Эта строка кода указывает Internet Explorer обрабатывать страницу таким образом, как будто бы она была загружена с удаленного веб-сайта. В противном случае IE переключается в особый режим блокировки, выводит предупреждение безопасности в строке сообщений и отказывается исполнять любой код JavaScript до тех пор, пока вы не нажмете кнопку "Разрешить заблокированное содержимое".

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

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

Основной принцип построения дерева страницы основывается на дроблении всей страницы на структурные элементы – блоки или секции. К числу этих секций относят такие теги, как < header> (шапка сайта), < section>, < aside> , и < footer> (подвал). До момента создания вышеперечисленных тегов верстальщики использовали теги < div> для структуризации документа с использованием уникальных классов и id. Код, построенный исключительно на < div> очень сложный для восприятия и не читабельный. Причиной этого является отсутствие логической нагрузки на теге. Это было главным камнем преткновения для поисковых систем.

Данный факт стимулировал появления на свет тегов со смысловой нагрузкой, что стало так называемой «картой» для роботов в дремучем лесу кода.

Положительные стороны использования новых тегов Поисковая оптимизация

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

Вследствие этого поисковые системы повысят эффективность нахождения уникального контента и плагиата.

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

Доступность

Для наглядного разбора доступности новых методов верстки рассмотрим пример сайта:

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

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

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

Коротко об основном назначении структурных тегов:

section

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

Более подробно о использовании этого тега для построения семантической структуры документа можно прочесть в статье "Построение структуры документа в HTML5 используя section "

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

< article> < h1> Заголовок статьи < p> Вступительное слово... < section> < h1> Заголовок подраздела статьи < p> Контент подраздела < section> < h1> Заголовок второго подраздела статьи < p> Контент подраздела

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

Некоторые пользователи утверждают, что < section> - это не более, чем замена тега блочной верстки < div> . Однако это утверждение не верно. Существует четкое разграничение, когда применение section уместно, а когда нет. К примеру, при привязки некоторому контейнеру особого стиля нужно обращаться только к < div> . Также стоит обращать внимание и на смысловую нагрузку, которая есть в блоке- section не употребляется при отсутствии естественного заголовка.

article

Опытные веб-мастера называют эту секцию частным случаем тега < section> . Article выделяет «автономную» (такую, которую в целом можно вырезать из страницы, и при этом она не потеряет своего смысла) часть страницы, которая в свою очередь состоит из взаимосвязанных элементов.

К примерам автономных частей можно отнести анонсы статей на блоге, рекламные блоки, различные виджеты (к примеру с погодой).

Однако, в спецификации достаточно заумно описано это понятие, в следствие чего возникло очень много споров по поводу того, что именно использовать: < section> или < аrticle> . К основным разногласиям по этому вопросу можно отнести следующие моменты:

  • для создания главного контейнера веб-страницы следует использовать < section>, < аrticle> или < div> . С одной стороны все содержимое так или иначе связано между собой, однако сайт можно назвать независимой единицей.
  • как именно оформлять шапку сайта, а точнее какие теги использовать?
  • и, наконец, как работать с основным контентом сайта? Нужно использовать < section> с < аrticle> внутри или же исключительно пользоваться одним < аrticle> .

Эта путаница напоминает те времена, когда аналогичные споры возникали при использовании тегов < acronim> и < abbr> . В тот раз проблема была решена достаточно просто, но радикально: отказались от использования < acronim> .

И в связи со всем этим возникает вполне логичный и законный вопрос: зачем использовать < аrticle> , если можно отказаться от него и работать только с < section> ? В конечном итоге модернизация HTML5 была направлена на облегчения работы веб-мастеров.

Скорее всего в данном случае отказаться от < аrticle> будет не корректно, так как мы бы получили абсолютно идентичную разметку в блочном стиле, которая была в предыдущей версии HTML. Решением данного вопроса стало бы усовершенствование < section> таким образом, чтобы были видны четкие различия между основным контентом сайта и вспомогательной информации.

В помощь начинающим мастерам сайтостроения предлагаю несколько особенных черт, по которым можно достаточно просто решить, когда именно нужно использовать < аrticle> :

  • Основной подход – имеет ценность для пользователя, привлекает его внимание, тобишь основное содержимое страницы.
  • Если рационально было бы добавить атрибуты pubdat или cite.
  • В случае полной автономности рассматриваемого нами фрагмента кода.
    • aside

    Создан для отделения основного содержимого страницы от вспомогательного.

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

    Чаще всего подобная информация на сайте располагается в сайдбаре.

    header

    Служит для четкого выделения заглавной части страницы. В нем располагаются заглавия как всего документа, так и отдельных его частей. Чаще всего внутри этой секции можно встретить такие теги, как < hgroup> и < h1>-< h6> . Однако это предписание не обязательно, в принципе в header могут распологаться любые теги.

    Стоит отметить, что в первую очередь данный тег применяют при создании шапки, как указано в примере:

    < header> < a href= "/" >< img src= "/logo.png" alt= "Vaden Pro/>

      [меню]
    [поиск]

    Однако не стоит ограничивать данный тег шапкой для веб-страницы. < header> он может располагаться внутри < section>, < article>, < aside> и в особых исключительных случаях в < nav> . При таком подходе тег < header> является дочерним элементом и соответствует заглавию этой отдельной части. Рассмотрим пример, когда < header> используется внутри < article> :

    < article> < header> < h1> Важный текст < time> 21. 02. 10 [ Текст публикации]

    Стоит отметить, что header собирает воедино заголовок части, однако если эта самая часть состоит только из названия, то применять данный тег не следует:

    < article> < header> < h1> Важный текст [ Текст публикации]

    Это нерациональное использование header, более правильной с точки зрения семантики будет следующая запись кода:

    < article> < h1> Важный текст [ Текст публикации]

    footer

    Опускаясь по структуре сайта все ниже мы постепенно подошли к нашему «подвалу», в котором располагается некоторая описательная информация раздела или сайта в общем. Эта информация отделяется тегом < footer> :

    < footer> < p id= "copyright" >& copy ; 2014 Vaden Pro < p> Все права защищены

    В этой части сайта принято располагать информацию о правах на авторство данного ресурса, копирайт, различные ссылки на вспомогательные ресурсы и прочее. Именно поэтому нельзя ограничивать использование тега < footer> исключительно на главной странице. рационально будет его использование и в различных разделах ресурса. Также не стоит заблуждаться, что < footer> обязательно должен находиться в самом низу сайта. К примеру, имеет место такая разметка страницы:

    < article> < header> < h1> Важная информация < time> 05. 04. 2015 < footer> < div class = "autor" > Данил Гойда < a href= "#" > об авторе | < a href= "#" > Все публикации автора [ сама публикация]

    nav

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

    < header> < a href= "/" >< img src= "/logo.png" alt= "Vaden Pro" /> < nav> < ul> [ меню] [ поиск]

    Стоит также обратить внимание на то, что формирует не просто перечень ссылок, а самостоятельную секцию со сложной структурой. Смотрим:

    < nav> < a href= "" > Сложная навигация < section> < h1> Первый раздел сайта < ul> < li>< a href= "" > пункт [ ... ] < section> < h1> Второй раздел сайта < ul> < li>< a href= "" > Пункт

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

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

    Как изменилась структура

    Прежде всего, я хотел бы сказать, что до появления html5 явной структуры как таковой вообще не существовало. Как верстались все шаблоны? В большинстве случаев использовался метод блочной верстки, ставший сегодня стандартным. В качестве контейнеров для элементов использовались обычные div с разными идентификаторами.

    Например, шапка обычно обозначалась как div с идентификатором header, блок с основной информацией называли main или content, боковая колонка получила идентификатор sidebar.

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

    В связи с этим, в html5 назревало появление новых элементов – семантических блоков, которые были призваны заменить обычные div, придать разметке больше смысла.

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

    Новые семантические блоки в разметке

    Стоит отметить, что подходящий тег придумали практически для любого элемента на веб-странице. Например, для шапки. По стандарту ее всегда делали так: div id = “header”. Теперь необходимость в этом отпала – появился контейнер header. Да, это парный тег и в него помещается все содержимое шапки.

    Впрочем, это не означает, что к нему нельзя привязать класс или идентификатор. Конечно, можно, и так и будут делать. Header имеет немного большую роль, чем только контейнер для главной шапки сайта.

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

    Так вот, к чему это я? У статьи (новости, обзора и т.д.) тоже может быть своя шапка, своя заключительная часть и т.д. Соответственно, на странице может быть несколько header-ов, каждый со своим классом.

    К слову, подвал сайта, самая нижняя его часть, формируется в html5 тегом footer. Для вас это будет очевидным, если вы сверстали хотя бы несколько типичных макетов – именно такой класс обычно дают этому блоку.

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

    Вы наверное, замечали, как сильно может отличаться основное содержимое от того, что показывается в боковой колонке? Если подумать, то это вообще разные секции шаблона. Вот именно – секции! Наверняка подобным образом думали и разработчики спецификации html5, поэтому они создали тег – section. Его общий смысл заключается в том, что он содержит в себе часть документа (секцию), в целом независимую от других, у которой может быть свой заголовок и т.д.

    Пример новой разметки

    Хорошо, мы с вами уже узнали о некоторых новых элементах, давайте попробуем сделать разметку c их помощью.

    Шапка Главное меню Сайдбар Заголовок Второстепенная информация о статье Сама статья Подвал

    < header > Шапка< / header >

    < nav > Главноеменю< / nav >

    < section id = “sidebar ”> Сайдбар< / section >

    < section id = “content ”>

    < h1 > Заголовок< / h1 >

    < aside > Второстепеннаяинформацияостатье< / aside >

    < article > Самастатья< / article >

    < / section >

    < footer > Подвал< / footer >

    Конечно, это очень простой пример. В реальности еще к этим элементам добавляются какие-то стилевые классы. Здесь мы с вами применили два абсолютно новых тега – article и aside. Как вы понимаете, тег article обозначает основную информацию на странице, причем исключительно ее текст.

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

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

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

    Конечно, представленный выше вариант разметки является лишь одним из примеров, на каждом реальном сайте по-разному. Например, в любой section можно добавить header и footer – они будут обозначать начало и конец секции, второстепенная информация может находиться ниже самой статьи, а не выше. Тут много разных вариантов, причем вы разбираем только структуру блога, на других типах веб-ресурсов все может быть совсем по-другому. Например, вот другой вариант разметки, и он тоже имеет право на жизнь:

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