HTML5 - Структурирование документа в HTML4

Статья, в которой рассматривается процесс структурирования документа в HTML 4.

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

Создание структуры документа до HTML5 осуществлялось с помощью элементов h1, h2, h3, h4, h5 и h6. Каждый из представленных элементов представляет собой заголовок, имеющий определённый ранг (уровень). Уровень заголовка определяется на основании числа, указанного в его наименовании. Т.е. элемент h1 имеет 1 ранг (1 уровень), элемент h2 - 2 ранг (2 уровень), элемент h3 - 3 ранг (3 уровень) и т.д. Ранги определяют важность заголовков и прямым образом влияют на структуру документа.

Из всех заголовков, самым важным является заголовок, который образован с помощью элемента h1 (самый высокий ранг). А самым незначительным из всех заголовков является заголовок, который образован с помощью элемента h6 (самый низкий ранг).

Элементы h1 - h6, кроме придания важности контенту, дополнительно создают ещё неявные разделы на странице, т.е. определяют её структуру.

С процессом создания структуры документа познакомимся с помощью следующего примера:

<body>
 <h1>A</h1>
 <p>B</p>
 <h2>C</h2>
 <p>D</p>
 <h2>E</h2>
 <p>F</p>
</body>

Данный код создаст 3 раздела:

  • 1 раздел определяется элементом h1 и ассоциируется с заголовком "A" и некоторым контентом (параграфом "B").
  • 2 раздел определяется первым элементом h2 и ассоциируется с заголовком "C" и некоторым контентом (параграфом "D").
  • 3 раздел определяется вторым элементом h2 и ассоциируется с заголовком "E" и некоторым контентом (параграфом "F").

Разделы 2 и 3 будут вложены в 1 раздел, т.к. их заголовки имеют более низкий ранг (h2 < h1). Т.е. 1 раздел будет являться для этих разделов родительским. В свою очередь разделы 2 и 3 по отношению друг к другу будут братьями, т.к. они имеют одинаковый ранг (h2 = h2). Но два этих брата для поисковых роботов не будут иметь равную значимость. Это связано с тем, что элемент, который встречается в коде раньше, имеет более высокую значимость для поискового робота, чем тот, с которым он встречается позже. Т.е. первый элемент h2 будет являться по отношению к второму его старшим братом, а второй элемент h2 по отношению к первому его младшим братом.

Заголовочная структура HTML 4

Структуру документа для наглядности удобно представлять в виде иерархического списка. При создании структуры будем использовать правило 2 пробелов. Т.е. если раздел по отношению к предыдущему является дочерним (имеет более низкий ранг), то к заголовку данного раздела будем добавлять 2 пробела. И наоборот, если раздел по отношению к предыдущему имеет более высокий ранг, то будем из его заголовка убирать 2 пробела.

Структура вышеприведённого HTML-документа будет выглядеть следующим образом:

h1
  h2
  h2

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

  1. Первый заголовок который должен появиться раньше всех в HTML коде страницы - это h1. Т.е. структура документа должна всегда начинаться с раздела, образованным элементом h1.
  2. Опускаться и подниматься ранг у заголовков должен всегда последовательно. Т.е. в коде не может после элемента h2 идти элемент h4. Такая структура с точки зрения стандарта HTML является ошибочной, т.е. после h2 должен распологаться h3, а уже потом h4.

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

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

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

h1 (Название сайта)
  h2 (1 Разделы сайта)
    h3 (1 раздел сайта)
    h3 (2 раздел сайта)
    h3 (3 раздел сайта)
    h3 (4 раздел сайта)
  h2 (Облако тегов)
  h2 (Последние статьи)
    h3 (Название статьи 1)
    h3 (Название статьи 2)
    h3 (Название статьи 3)
  h2 (Последние комментарии)
  h2 (Популярные статьи)
  h2 (Дополнительные разделы)
    h3 (Поиск)
    h3 (Голосование)
    h3 (Пользователи)
    h3 (Об блоге и авторе)

Структура главной страницы блога

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

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

h1 (Название сайта)
  h2 (Разделы сайта)
    h3 (1 раздел сайта)
    h3 (2 раздел сайта)
    h3 (3 раздел сайта)
    h3 (4 раздел сайта)
    h3 (Облако тегов)
    h3 (Последние статьи)
      h4 (Название статьи 1)
      h4 (Название статьи 2)
      h4 (Название статьи 3)
      h4 (Последние комментарии
      h4 (Популярные статьи)
        h5 (Дополнительные разделы)
          h6 (Поиск)
          h6 (Голосование)
          h6 (Пользователи)
          h6 (Об блоге и авторе)

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

Теперь, после всех изменений, структура документа стала правильной с точки зрения SEO. Т.е. раздел, содержащий название статьи, теперь имеет более высокую значимость (h4), чем раздел документа, содержащий поиск (h6). Но с точки зрения логики, полученная структура документа потеряла смысл. Т.е. получается, что раздел, содержащий поиск вложен в раздел популярные статьи. Но с такими ограничениями приходится мириться при создании структуры документа в HTML 4, чтобы сделать документ SEO оптимизированным.

Теперь перейдём к рассмотрению структуры страницы, содержащей статью. На этой странице самой важной информацией является название статьи (h1). Следующей по важности идёт информация содержащая разделы статьи (h2) и комментарии к статье (h3).

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

h1 (Название статьи)
  h2 (1 Раздел статьи)
    h3 (1 подраздел 1 раздела)
  h2 (2 раздел статьи)
    h3 (1 подраздел 2 раздела)
    h3 (2 подраздел 2 раздела)
  h2 (3 раздел статьи)
  h2 (Комментарии к статье)
  h2 (Дополнительные разделы блога)
    h3 (Поиск)
    h3 (Облако тегов)
    h3 (Последние комментарии)
    h3 (Популярные статьи)
    h3 (Голосование)
    h3 (Об блоге)

Структура страницы, содержащей статью

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

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

h1 (Название статьи)
  h2 (1 Раздел статьи)
    h3 (1 подраздел 1 раздела)
  h2 (2 раздел статьи)
    h3 (1 подраздел 2 раздела)
    h3 (2 подраздел 2 раздела)
  h2 (3 раздел статьи)
    h3 Комментарии к статье)
      h4 (Дополнительные разделы блога)
        h5 (Поиск)
        h5 (Навигация)
        h5 (Облако тегов)
        h5 (Последние комментарии)
        h5 (Популярные статьи)
        h5 (Голосование)
        h5 (Пользователи)
        h5 (Об блоге и авторе)

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

Теперь, после всех изменений, структура документа стала правильной с точки зрения SEO. Т.е. раздел, содержащий текст статьи, теперь имеет более высокую значимость (h4), чем раздел документа, содержащий информацию о блоге (h5). Но в тоже время, после произведённых изменений, полученная структура, оптимизированная под SEO, потеряла логический смысл. Т.е. получается, что раздел, содержащий информацию о блоге, вложен в раздел «Комментарии к статье», что с логической точки зрения неправильно. Но с такими ограничениями приходится мириться при создании структуры документа в HTML 4, чтобы сделать документ SEO оптимизированным.

Таким образом, заголовочная модель HTML 4 не способна передать структуру документа, которая одновременно была бы не только правильной с точки зрения логики и взаимосвязи между разделами, но и отвечала бы критериям SEO.



   HTML и CSS 0    1203 0

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

  1. Askar # 0
    тэги которые идёт после h1 имеет более важность чем те тэги которые идёт после h2

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