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

Содержание:
  1. Уровень поддержки HTML5-структуры пользовательскими агентами
  2. Создание HTML5-структуры обратно совместимой с заголовочной (HTML4)
  3. Инструменты для проверки HTML-структуры документа
  4. Заключение
  5. Комментарии

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

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

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

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

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

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

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

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

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

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

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

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

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

HTML
<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):

HTML
В 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 структуры документа. Этап первый

HTML
<!-- Секция 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>
HTML
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 структуры документа. Этап второй

HTML
<!-- Секция 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>
HTML
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 структуры документа. Этап третий

HTML
<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>
HTML
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] О блоге

Инструменты для проверки HTML-структуры документа

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

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

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

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

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

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

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

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

Заключение

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

Комментарии: 11

Виктор
Виктор
спасибо!!! хорошая стотья!!!
Аноним
Аноним
Пытался скрыть заголовок атрибутом hidden
<h2 hidden="hidden">

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