Содержание:
HTML5 - Основы создания структуры документа
Статья, которая повествует об основах создания структуры документа в HTML 5.
Семантика и структура документа в HTML 5
Структура документа играет очень важную роль для понимания того, как устроена веб-страница. Она определяет то, как контенты организованы и взаимосвязаны между собой в документе, а также их относительную важность. Если воспользоваться схемой документа, то можно увидеть, как более просто стало просматривать информацию. Правильно спроектированная структура придаёт содержимому страницы смысл, делает его более лёгким для чтения, которое осуществляется поисковыми системами и другими пользовательскими агентами. На сайте, в котором правильно спроектирована структура, проще ориентироваться и находить нужную информацию.
Создание структуры документа до HTML 5
Перед изучением процесса создания структуры документа в HTML 5, желательно познакомиться с тем, как это осуществлялось в предыдущей версии языка и с какими проблемами веб-разработчику при этом приходилось сталкиваться.
Как образуется структура документа в HTML 4
Создание структуры документа в 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 и с проблемами при её реализации можно в следующей статье.
Создание структуры документа в HTML 5
Стратегия создания структуры документа в HTML5 значительно изменилась. Теперь она не определяется только одними заголовками, т.к. это всегда для большинства веб-разработчиков выглядело как-то нелепо. Заголовки позволяют определить структуру документа, но они не группируют контент. До HTML 5 авторы группировали контент с помощью элементов div, а затем использовали атрибуты классов или id атрибуты для того, чтобы присвоить этим разделам более семантически верное значение. К счастью в HTML5 появилась новая группа элементов sectioning, которые позволяют авторам создавать описание (структуру) документа. К этой группе относятся элементы article, aside, nav и section. Их основное назначение сделать код HTML более семантическим, добавить в него смысл с помощью разметки.
Элементы, предназначенные для создания структуры в HTML 5
Для создания структуры документа в 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. Данный элемент создаёт основную секцию (раздел на уровне документа).
HTML
<body>
</body>
--> Вышеприведённый пример будет создавть следующую структуру документа:
[document] UntitledПосле этого обычно переходят к созданию секций внутри body (основной секции). Например, создадим секции nav, section и aside. Эти секции будут являться дочерними по отношению к body.
HTML
<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.
HTML
<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.
HTML
<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:
HTML
<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
Вопрос относительно данного момента: «Элементы h1, h2, h3, h4, h5 и h6 в HTML5 применяются для указания названия секции (т.е. выступают в качестве заголовка секции) и для создания неявных разделов внутри секции. Причём взаимосвязь между неявными разделами осуществляется только в пределах одной секции.»
Следуя этой логике и логике предоставленного примера получается, что в документе мы можем использовать несколько заголовков первого уровня и это не будет нарушением SEO-логики?
(В то время как в других источниках говорят о том, что в документе должен быть только один такой заголовок)
Спецификация HTML разрешает иметь несколько элементов на одной странице. Есть интересная статья на эту тему: Are H1 Tags Necessary for Ranking? [SEO Experiment].
В этой статье рассказывается про интересный эксперимент, а также приводятся слова Джона Мюллера из Google, который ответил, что тегов H1 на странице может быть сколь угодно много, нет никаких ограничений.
Мне, например, не нужно несколько на странице. В помещаю контент, который описывает содержание страницы. Уровни заголовков задаю так, чтобы они шли последовательно от большего к меньшему, без пропусков. При этом неважно в или нет.
на вашей практике какие приемущества даёт данная структура html 5?
Подумайте, сколько Google и Yandex тратит время, пытаясь выяснить, в какой части находится заголовок, футер, навигация и основное содержимое и т.д.
Конечно, мы не знаем, как точно работают поисковые роботы… Но, их работа должна соответствовать стандарту. Есть, конечно, обязательные SEO критерии и можно не заморачиваться не всё остальное, но кто знает. Наша задача всегда сводится к тому, чтобы передать с помощью разметки более точный смысл страницы поисковым роботам. Т.е. показать, где есть, что… Для этого и был придуман HTML5. А также можно взять элемент div и сверстать всё что нужно… Тогда зачем другие элементы?