Блог Vaden Pro

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

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

Раздел: 

В первую очередь следует рассмотреть строение структуры документа HTML. Имеется ввиду именно семантическая структура, которую в некоторых отдельных случаях неопытный пользователь путает с деревом документа (DOM).

Построение структуры документа в среде HTML4

При создании документа в среде HTML4 логическая структуризация базировалась на использовании тегов заголовков — h1, h2,..,h6. Для наглядности стоит рассмотреть следующий пример:

<div class="section">
   <h1>Важный заголовок</h1>
   <p>Какое-либо содержимое страницы</p>
   <div class="subsection">
      <h2>Подзаголовок</h2>
      <p>Какое-либо содержимое страницы</p>
   </div>
</div>

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

1. Важный заголовок
   1.1. Подзаголовок

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

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

<h1>Важный заголовок</h1>
<p>Какое-либо содержимое страницы</p>
<h2>Подзаголовок</h2>
<p>Какое-либо содержимое страницы</p>

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

Недостатки семантики HTML4

  • Во-первых, это невозможность чтения структуры документа в автономном режиме из-за применения тега <div> при отмечании семантических блоков. Это играет важную роль при использовании дополнительных программ браузера, к примеру — голосовой ввод запроса.
  • Следующий недостаток заключается в трудоемкости объединения двух разных документов HTML. В свою очередь эта трудоемкость заключается в сопряжении заголовков. Для построения грамотной структуры документа необходимо изменить уровни заголовков.
  • Также к недостаткам следует отнести невозможность одновременного использования основного и альтернативного заголовков. К примеру, множество компаний под своим названием пишут свой слоган. Вот этот слоган и будет альтернативным заголовком.При разметке
    <h1>Vaden Pro</h1>
    <h2>Выйди за рамки. Ультиматумная веб-разработка</h2>

    Получим ложную ветку в логической структуре документа. Чтобы этого избежать, луче для подзаголовка использовать нейтральные элементы:
    <h1>Vaden Pro</h1>
    <p class=”slogan”>Выйди за рамки. Ультиматумная веб-разработка</p>
  • И в заключении следует отметить неспособность отделять подразделы, относящиеся к разным тематикам и не связаны между собой. Примером этого явления служат вставки рекламы внутри основного содержимого страницы. Под эту же категорию попадает и информация с сайта, которая указана на данной странице, но не связана с ее содержанием (меню навигации, последние обновления блога и тд).

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

Выстраиваем структуру документа по стандартам HTML5

Секции

В первую очередь для пояснения понятия секций необходимо перечислить неотъемлемые составляющие, с помощью которых они формируются: <header>, <body>, <section>, <article>, <aside>,  <nav> и <footer>. Корневая секция представляется тегом <body>. В качестве примера следует изучить следующий код:

<section>
   <h1>Важный заголовок</h1>
   <section>
      <h2>Подзаголовок 1</h2>
      <p>Какое-либо содержимое страницы</p>
   </section>
   <section>
      <h2> Подзаголовок 2</h2>
      <p>Какое-либо содержимое страницы</p>
   </section>
   <aside>
      <p>Информация сайдбара</p>
   </aside>
</section>
<footer>
   <section>
      <p>Копирайты</p>
   </section>
</footer>

Для простоты понимания уберем сложный для восприятия код и представим структуру документа в следующем виде:

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

Вышеуказанная секционное строение носит явный характер. На практике также встречается и не явное секционирование, которое осуществляется посредством заглавных тегов <h1>-<h6>.

продвижение digital агентства.

Примеры на практике

Ниже представлен скриншот сайта с указанием основных его структурных частей:

Структура сайта на HTML5

В виде языка HTML сематническая структура данного сайта будет выглядеть следующим образом:

<header>
   <h1>Vaden pro</h1>
   [форма поиска]
   <nav>
      <ul>
      [содержимое меню]
      </ul>
   </nav>
   <p>слоган</p>
</header>
 
<section>
   [описание страницы блога]
</section>
 
<div class="content">
   <section>
      <article>
         [вывод превью статьи]
      </article>
      <article>
         [вывод превью статьи]
      </article>
   </section>
 
   <acide>
      [сайдбар]
   </acide>
</div>

Стоит обратить внимание на тот факт, что в данном случае тег <div> применяется в целях оформление и не несет в себе семантической нагрузки.

Значимость тега div в HTML5

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

Итог

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

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