Создание HTML 5 структуры на практике

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

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

Поддержка HTML5 структуры пользовательскими агентами

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

Чтобы авторы обратили на это внимание, разработчики спецификации опубликовали в стандарте HTML5 следующий абзац.

Фрагмент спецификации, содержащий сведения о поддержки HTML 5 структуры пользовательскими агентами

Основное содержимое вышеприведённого абзаца заключается в том, что они призывают авторов не полагаться полностью на структуру документа, описанной в этой спецификации, по крайне мере до тех пор, пока новая структура не получит широкую поддержку. Стандарт рекомендует авторам, как и прежде, создавать структуру веб-страниц с помощью элементов h1, h2, h3, h4, h5 и h6 или такую, которая была бы обратно совместимой с заголовочной.

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

До тех пор пока HTML 5 структура документа, не будет однозначно пониматься пользовательскими агентами, её создание будет обусловлено необходимостью использования обратной совместимости с HTML4. Таким образом, при создании структуры документа авторам следует учитывать то, что она должна быть правильной как в отношении HTML4, так и в отношении HTML5.

Создавать такую структуру не так уж сложно как это может показаться на первый взгляд. Для этого авторам всего лишь необходимо использовать внутри секционных элементов заголовки соответствующего ранга. Определяется ранг по уровню вложенности секционного элемента. Корневой секционный элемент имеет 1 ранг. Секции, которые расположены непосредственно в нём, имеют 2 ранг. Секции, которые расположены внутри секций второго ранга, соответственно имеют 3 ранг и т.д.

Создание HTML5-структуры обратно совместимой с заголовочной

<body>
  <!-- Заголовок секции документа (1 уровень) -->
  <h1>Заголовок документа</h1>
  <!-- Секция nav, вложенная в секцию документа (2 уровень) -->
  <nav>
      <h2>Навигация</h2>
      ...
  </nav>
  <!-- Секция article, вложенная в секцию документа (2 уровень) -->
  <article>
    <h2>Заголовок секции article</h2>
    ...
    <!-- Секция section, вложенная в секцию article 2 уровня -->
    <section>
      <h3>Заголовок секции section</h3>
      ...
    </section>
    <!-- Секция aside, вложенная в секцию article 2 уровня -->
    <aside>
      <h3>Заголовок секции aside</h3>
      ...
       <!-- Секция section, вложенная в секцию aside 3 уровня -->
      <section>
        <h4>Заголовок секции section</h4>
        ...
      </section>
    </aside>
    ...
  </article>
  ...
</body>

Вышеприведенный пример будет иметь следующую структуру (outline):

В HTML5:
[document] Заголовок документа
  [nav] Навигация
  [article] Заголовок секции article
    [section] Заголовок секции section
    [aside] Заголовок сеции aside
      [section] Заголовок секции section
В HTML4:
[h1] Заголовок документа
  [h2] Навигация
  [h2] Заголовок секции article
    [h3] Заголовок секции section
    [h3] Заголовок сеции aside
      [h4] Заголовок секции section

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

Начнём процесс проектирования с рассмотрения основных групп контента, из которых состоит данная страница.

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

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

Процесс создания HTML5-структуры документа обратно совместимой с заголовочной (HTML4) и оптимизированной под поисковые системы выполним поэтапно.

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

Для этого воспользуется элементами article, section, nav и aside из категории sectioning, и элементом h1 из группы heading.

Создание HTML5 структуры документа. Этап первый

<!-- Секция document (документа) -->
<body>
  <h1>Название сайта</h1>
  <!-- Секция nav (навигация) -->
  <nav>
    <h1>Навигация по сайту</h1>
  </nav>
  <!-- Секция article (статьи) -->;
  <article>
    <h1>Название статьи</h1>
    <section>
      <h1>1 раздел статьи</h1>
      ...
      <section>
        <h1>1 подраздел 1 раздела</h1>
        ...
      </section>
    </section>
    <section>
      <h1>2 раздел статьи</h1>
      ...
      <section>
        <h1>1 подраздел 2 раздела</h1>
        ...
      </section>
      <section>
        <h1>1 подраздел 2 раздела</h1>
        ...
      </section>
    </section>
    <section>
      <h1>3 раздел статьи</h1>
      ...
    </section>
    <section>
      <h1>Комментарии к статье</h1>
      ...
    </section>
  </article>
  <!-- Секция aside (содержимое, косвенно связанное с остальным содержимым страницы) -->
  <aside>
    <h1>Дополнительные разделы</h1>
    <section>
      <h1>Поиск</h1>
      ...
    </section>
    <section>
      <h1>Облако тегов</h1>
      ...
    </section>
    <section>
      <h1>Комментарии</h1>
      ...
    </section>
    <section>
      <h1>Статьи</h1>
      ...
    </section>
    <section>
      <h1>Голосование</h1>
      ...
    </section>
    <section>
      <h1>О блоге</h1>
      ...
    </section>
  </aside>
</body>
HTML5 структура страницы:
[document] Название сайта
  [nav] Навигация по сайту
  [article] Название статьи
    [section] 1 раздел статьи
      [section] 1 подраздел 1 раздела
    [section] 2 раздел статьи
      [section] 1 подраздел 2 раздела
      [section] 2 подраздел 2 раздела
    [section] 3 раздел статьи
    [section] Комментарии к статье
  [aside] Дополнительные разделы
    [section] Поиск
    [section] Облако тегов
    [section] Комментарии
    [section] Статьи
    [section] Голосование
    [section] О блоге

HTML4 структура страницы:
[h1] Название сайта
[h1] Навигация по сайту
[h1] Название статьи
[h1] 1 раздел статьи
[h1] 1 подраздел 1 раздела
[h1] 2 раздел статьи
[h1] 1 подраздел 2 раздела
[h1] 2 подраздел 2 раздела
[h1] 3 раздел статьи
[h1] Комментарии к статье
[h1] Дополнительные разделы
[h1] Поиск
[h1] Облако тегов
[h1] Комментарии
[h1] Статьи
[h1] Голосование
[h1] О блоге

На 2 этапе доработаем структуру, полученную на 1 этапе, таким образом, чтобы она была обратно совместимой с заголовочной.

Создание HTML5 структуры документа. Этап второй

<!-- Секция document (документа) -->
<body>
  <h1>Название сайта</h1>
  <!-- Секция nav (навигация) -->
  <nav>
    <h2>Навигация по сайту</h2>
  </nav>
  <!-- Секция article (статьи) -->;
  <article>
    <h2>Название статьи</h2>
    <section>
      <h3>1 раздел статьи</h3>
      ...
      <section>
        <h4>1 подраздел 1 раздела</h4>
        ...
      </section>
    </section>
    <section>
      <h3>2 раздел статьи</h3>
      ...
      <section>
        <h4>1 подраздел 2 раздела</h4>
        ...
      </section>
      <section>
        <h4>1 подраздел 2 раздела</h4>
        ...
      </section>
    </section>
    <section>
      <h3>3 раздел статьи</h3>
      ...
    </section>
    <section>
      <h3>Комментарии к статье</h3>
      ...
    </section>
  </article>
  <!-- Секция aside (содержимое, косвенно связанное с остальным содержимым страницы) -->
  <aside>
    <h2>Дополнительные разделы</h2>
    <section>
      <h3>Поиск</h3>
      ...
    </section>
    <section>
      <h3>Облако тегов</h3>
      ...
    </section>
    <section>
      <h3>Комментарии</h3>
      ...
    </section>
    <section>
      <h3>Статьи</h3>
      ...
    </section>
    <section>
      <h3>Голосование</h3>
      ...
    </section>
    <section>
      <h3>О блоге</h3>
      ...
    </section>
  </aside>
</body>
HTML5 структура страницы:
[document] Название сайта
  [nav] Навигация по сайту
  [article] Название статьи
    [section] 1 раздел статьи
      [section] 1 подраздел 1 раздела
    [section] 2 раздел статьи
      [section] 1 подраздел 2 раздела
      [section] 2 подраздел 2 раздела
    [section] 3 раздел статьи
    [section] Комментарии к статье
  [aside] Дополнительные разделы
    [section] Поиск
    [section] Облако тегов
    [section] Комментарии
    [section] Статьи
    [section] Голосование
    [section] О блоге

HTML4 структура страницы:
[h1] Название сайта
  [h2] Навигация по сайту
  [h2] Название статьи
    [h3] 1 раздел статьи
      [h4] 1 подраздел 1 раздела
    [h3] 2 раздел статьи
      [h4] 1 подраздел 2 раздела
      [h4] 2 подраздел 2 раздела
    [h3] 3 раздел статьи
    [h3] Комментарии к статье
  [h2] Дополнительные разделы
    [h3] Поиск
    [h3] Облако тегов
    [h3] Комментарии
    [h3] Статьи
    [h3] Голосование
    [h3] О блоге

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

Создание HTML5 структуры документа. Этап третий

<body>
  ...
  <h1>Название статьи</h1>
  <section>
    <h2>1 раздел статьи</h2>
    ...
    <section>
      <h3>1 подраздел 1 раздела</h3>
      ...
    </section>
  </section>
  <section>
    <h2>2 раздел статьи</h2>
    ...
    <section>
      <h3>1 подраздел 2 раздела</h3>
      ...
    </section>
    <section>
      <h3>1 подраздел 2 раздела</h3>
      ...
    </section>
  </section>
  <section>
    <h2>3 раздел статьи</h2>
    ...
  </section>
  <section>
    <h3>Комментарии к статье</h3>
    ...
  </section>
  <aside>
    <h4>Дополнительные разделы</h4>
    <section>
      <h5>Поиск</h5>
      ...
    </section>
    <section>
      <h5>Облако тегов</h5>
      ...
    </section>
    <section>
      <h5>Комментарии</h5>
      ...
    </section>
    <section>
      <h5>Статьи</h5>
      ...
    </section>
    <section>
      <h5>Голосование</h5>
      ...
    </section>
    <section>
      <h5>О блоге</h5>
      ...
    </section>
  </aside>
</body>
HTML5 структура страницы:
[document] Название статьи
  [section] 1 раздел статьи
    [section] 1 подраздел 1 раздела
  [section] 2 раздел статьи
    [section] 1 подраздел 2 раздела
    [section] 2 подраздел 2 раздела
  [section] 3 раздел статьи
  [section] Комментарии к статье
[aside] Дополнительные разделы
  [section] Поиск
  [section] Облако тегов
  [section] Комментарии
  [section] Статьи
  [section] Голосование
  [section] О блоге

HTML4 структура страницы:
[h1] Название статьи
  [h2] 1 раздел статьи
    [h3] 1 подраздел 1 раздела
  [h2] 2 раздел статьи
    [h3] 1 подраздел 2 раздела
    [h3] 2 подраздел 2 раздела
  [h2] 3 раздел статьи
    [h3] Комментарии к статье
      [h4] Дополнительные разделы
        [h5] Поиск
        [h5] Облако тегов
        [h5] Комментарии
        [h5] Статьи
        [h5] Голосование
        [h5] О блоге

Проверить разработанную структуру документа можно с помощью следующих инструментов:

  • расширения "HTML5 Outliner" для браузера Google Chrome;
  • онлайн инструмента HTML5 Outliner;
  • сервиса проверки разметки W3C, доступного по адресу https://validator.w3.org/;
  • расширения headingsMap 2.1 для браузера Mozilla Firefox.

Сервис W3C предназначен в первую очередь для проверки соответствия кода HTML-документа выбранной спецификации (HTML 4.01, HTML5 и др.). Кроме этого он также позволяет также проверить структуру документа, если будет включена соответствующая опция.

>Проверка структуры документа с помощью сервиса W3C

Расширение HeadingsMap для браузера Mozilla Firefox - это очень удобный инструмент, который позволяет проверить структуру документа в соответствии со спецификацией HTML5 и HTML4.

Проверка структуры документа с помощью HeadingsMap

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



   HTML и CSS 0    2005 +1

Комментарии (9)

  1. ctac # 0
    мой друг, на картинке не правильный перенос
    <nobr>HTML 5</nobr>
    или просто без пробела!
    1. Александр Мальцев # 0
      Спасибо, поправил.
      1. ctac # 0
        это вам спасибо за замечательный ресурс! ))
    2. Дмитрий # 0
      хороший блог! качественный материал
      1. Владимир # 0
        А есть какой нибудь валидный способ скрыть заголовоки от пользователя?
        В структуре HeadingsMap его должно быть видно, а пользователю не должно.
        Например у меня такая структуру:
        <aside>
        	<nav>
        		<h2>Меню сайта</h2>
        		<ul>
        			<li> ....... </li>
        		</ul>
        	</nav>
        </aside>
        
        Может хватить h2 { display: none; }
        Поисковики его не воспримут как скрытый контент?
        1. Владимир # 0
          Пытался скрыть заголовок атрибутом hidden
          <h2 hidden="hidden">

          В в мозилле HeadingsMap все ок, а вот в хроме HTML5 Outliner не видно подписей, вот не знаю правильно ли использовать атрибут hidden
          1. Александр Мальцев # 0
            Все поисковые системы могут определять скрытый у Вас контент или нет. А вот будет это влиять или нет на результаты поиска в Google или Yandex будет зависеть от того что Вы там скрыли. Может там у Вас идёт набор ключевых слов и т.п.
            Атрибут hidden не очень уместно использовать в этом случае, т.е. Вы тем самым говорите что этот текст не имеет никакого отношения к странице, что с точки зрения семантики (смысла) не правильно.
            Скрыть контент лучше с помощью стилей CSS.
            Например так:
            <!--HTML-->
            <h2 class="hidden">
            
            /*CSS:*/
            .hidden {
              position: absolute;
              left: -9999em;
              top: auto;
              width: 1px;
              height: 1px;
              overflow: hidden;
            }
            
            1. Владимир # 0
              Спасибо за разъеснение
          2. Виктор # 0
            спасибо!!! хорошая стотья!!!

            Вы должны авторизоваться, чтобы оставлять комментарии.