HTML5 - Основы создания структуры документа

Статья, которая повествует об основах создания структуры документа в HTML 5.

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

HTML 5 - Корректные и не корректые структуры страниц

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

Создание структуры документа в HTML 4 осуществляется с помощью 6 элементов (h1, h2, h3, h4, h5, h6). Эти элементы, при их размещении на странице, создают неявные разделы. Данные разделы называются неявными, потому что автор их в документе явно не создаёт. Они образуются автоматически, как только user agent встречает один из этих элементов в документе. Впоследствии из всех созданных user agent-ом разделов образуется структура документа.

Модель структуры документа, использованная в HTML 4, имеет существенные ограничения, которые связаны с тем, что автору доступны для её создания всего 6 элементов h1, h2, h3, h4, h5 и h6. С помощью этих элементов веб-разработчик не может спроектировать структуру документа, которая одновременно обеспечивала бы логическую взаимосвязь между разделами и отвечала критериям SEO.

Более подробно познакомиться с процессом создания структуры документа в HTML 4 и с проблемами при её реализации можно в следующей статье.

Стратегия создания структуры документа в HTML5 значительно изменилась. Теперь она не определяется только одними заголовками, т.к. это всегда для большинства веб-разработчиков выглядело как-то нелепо. Заголовки позволяют определить структуру документа, но они не группируют контент. До HTML 5 авторы группировали контент с помощью элементов div, а затем использовали атрибуты классов или id атрибуты для того, чтобы присвоить этим разделам более семантически верное значение. К счастью в HTML5 появилась новая группа элементов sectioning, которые позволяют авторам создавать описание (структуру) документа. К этой группе относятся элементы article, aside, nav и section. Их основное назначение сделать код HTML более семантическим, добавить в него смысл с помощью разметки.

Для создания структуры документа в HTML 5 используются заголовочные элементы (h1, h2, h3, h4, h5 и h6) и элементы nav, aside, section и article из группы sectioning. Данные элементы в отличие от заголовков предназначены для создания явных разделов и установления этим разделам некоторого смысла.

HTML5 - Элементы предназначенные для создания структуры документа

Для того чтобы было более просто понять основные принципы структурирования документа в HTML 5 будет считать, что элементы body, nav, aside, section и article создают секции (явные разделы), а элементы h1, h2, h3, h4, h5 и h6 - обычные разделы (неявные разделы).

Процесс разработки структуры документа рассмотрим посредством пошаговых инструкций.

В HTML 5 создание структуры документа начинается с элемента body. Данный элемент создаёт основную секцию (раздел на уровне документа).

<body>
</body>

--> Вышеприведённый пример будет создавть следующую структуру документа:
[document] Untitled

После этого обычно переходят к созданию секций внутри body (основной секции). Например, создадим секции nav, section и aside. Эти секции будут являться дочерними по отношению к body.

<body>
  <nav></nav>
  <section></section>
  <aside></aside>
</body>

--> Вышеприведённый пример будет создавать следующую структуру документа:
[document] Untitled
  [nav] Untitled
  [section] Untitled
  [aside] Untitled

Каждая из секций (nav, aside, section, article) в свою очередь тоже может содержать секции. Таким образом, в HTML 5 получается структура документа. Т.е. одни секции вкладываются в другие. Секции, которые расположены непосредственно в body, имеют 2 уровень. А секции, которые расположены непосредственно в секциях 2 уровня будут уже иметь 3 уровень и т.д.

Например, создадим в section 3 секции article.

<body>
  <nav></nav>
  <section>
    <article></article>
    <article></article>
    <article></article>
  </section>
  <aside></aside>
</body>

--> Вышеприведённый пример будет создавать следующую структуру документа:
[document] Untitled
  [nav] Untitled
  [section] Untitled
     [article] Untitled
     [article] Untitled
     [article] Untitled
  [aside] Untitled

Элементы h1, h2, h3, h4, h5 и h6 в HTML5 применяются для указания названия секции (т.е. выступают в качестве заголовка секции) и для создания неявных разделов внутри секции. Причём взаимосвязь между неявными разделами осуществляется только в пределах одной секции. Т.е. заголовочные элементы, находящиеся в одной секции, не связаны с заголовочными элементами, находящимися в другой секции. Другими словами неявные разделы одной секции изолированы от неявных разделах другой секции. В качестве заголовка секции выступает заголовочный элемент, находящийся в этой секции и имеющий самый высокий ранг (уровень). Если секция не содержит заголовочный элемент, то она не имеет названия (Untitled).

Внимание: В HTML 4 в отличие от HTML 5 взаимосвязь между неявными разделами осуществлялась в пределах всего документа, а не в пределах секции (body, nav, aside, section, article). В HTML 4 нет элементов для создания секций.
Например, создадим названия для всех секций кроме nav.
<body>
  <h1>A</h1>
  <nav></nav>
  <section>
    <h1>B</h1>
    <article>
      <h1>C</h1>
    </article>
    <article>
      <h1>D</h1>
    </article>
    <article>
      <h1>E</h1>
    </article>
  </section>
  <aside>
    <h1>F</h1>
  </aside>
</body>

--> Вышеприведённый пример будет создавать следующую структуру документа:
[document] A
  [nav] Untitled
  [section] B
     [article] C
     [article] D
     [article] E
  [aside] F

Например, создадим неявные разделы в секции section и aside:

<body>
  <h1>A</h1>
  <nav></nav>
  <section>
    <h1>B</h1>
    <article>
      <h1>C</h1>
    </article>
    <article>
      <h1>D</h1>
    </article>
    <article>
      <h1>E</h1>
    </article>
    <h2>B-R1</h2>
    <h3>B-R2</h3>
    <h2>B-R3</h2>
  </section>
  <aside>
    <h1>F</h1>
    <h2>F-R1</h2>
    <h3>F-R2</h3>
    <h4>F-R3</h4>
    <h3>F-R4</h3>
    <h3>F-R5</h3>
  </aside>
</body>

--> Вышеприведённый пример будет создавать следующую структуру документа:
[document] A
  [nav] Untitled
  [section] B
     [article] C
     [article] D
     [article] E
     [h2] B-R1
       [h3] B-R2
     [h2] B-R3
  [aside] F
    [h2] F-R1
      [h3] F-R2
        [h4] F-R3
      [h3] F-R4
      [h3] F-R5

HTML5 - Пример структуры документа



   HTML и CSS 0    1674 +1

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

  1. Виктор # 0
    вы при создании сайтов всегда пользуетесь этой структурой?
    на вашей практике какие приемущества даёт данная структура html 5?
    1. Александр Мальцев # 0
      По возможности всегда стараюсь размечать страницы, используя элементы исходя из их семантического смысла. Что, на мой взгляд, особенно важно при создании структуры страницы. Т.е. правильно использовать элементы из группы h (h1-h6) и элементы из группы sectioning (section, article, nav и aside). А не оборачивать всё подряд в section и использовать h там, где не следует…
      Подумайте, сколько Google и Yandex тратит время, пытаясь выяснить, в какой части находится заголовок, футер, навигация и основное содержимое и т.д.
      Конечно, мы не знаем, как точно работают поисковые роботы… Но, их работа должна соответствовать стандарту. Есть, конечно, обязательные SEO критерии и можно не заморачиваться не всё остальное, но кто знает. Наша задача всегда сводится к тому, чтобы передать с помощью разметки более точный смысл страницы поисковым роботам. Т.е. показать, где есть, что… Для этого и был придуман HTML5. А также можно взять элемент div и сверстать всё что нужно… Тогда зачем другие элементы?

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