Блог Vaden Pro

Все о самостоятельном создании и продвижении сайтов

Выстраивание логической структуры страницы сайта на HTML5

Раздел: 

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

Структура документа HTML5

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

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

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

Поисковая оптимизация

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

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

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

Доступность

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

Пример сайта

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

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

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

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

section

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

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

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

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

Кстати, обратите внимание на наличие нескольких заголовков с маркером 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>:

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

aside

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

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

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

header

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

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

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

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

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

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

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

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

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

footer

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

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

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

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

nav

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

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

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

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

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