Как выглядит на html5 структура страницы?

Приветствую вас у себя на блоге. Html5 появился уже очень давно, но не все мы до сих пор знаем все его особенности и нововведения. Я вот буквально вчера узнал новый тег, о существовании которого не догадывался. Ну да ладно, сегодня мы рассмотрим более простой вопрос. А именно, как выглядит в html 5 структура страницы? Вопрос достаточно важный, потому что семантические элементы — одно из главных нововведений этой версии html.

Структура страницы наглядно

В такой статье просто не обойтись без картинки, а именно изображения этой самой структуры, поэтому я быстро нарисовал в paint простой вариант верстки на html5. Схема кривая, прошу простить, талантом рисовальщика обделен:

Как видите, здесь новые теги, которых небыло в html4. И это:

1. header — первый новый семантический тег, который используется для обозначения шапки как у сайта в целом, так и у каких-то конкретных секций. Своя шапка может быть в статье, в новости, в карточке товара и т.д. Поэтому не удивляйтесь, если видите несколько header-ов на странице.
2. nav — контейнер для важных навигационных ссылок на сайте. Иными словами, в него помещают главное меню, а также дополнительные меню, если они есть на сайте.
3. article — тег для основного текста на странице. Это может быть статья, новость, описание товара, заметка в блог, анонс статьи и т.д.
4. aside — спорный тег. Многие говорят, что его нужно использовать для вывода сайдбара или боковой колонки, другие говорят, что в него помещается информация в статье, которая не имеет прямого отношения к основному содержимому. Мне более логичным видится вывод боковой колонки через этот тег.
5. footer — подвал сайта, хотя, как и header, может быть подвалом статьи, новости и т.д.

Это те теги, которые вы можете увидеть на рисунке. Помимо этого я не упомянул еще один важный тег. Это section или секция. Как его использовать — вопрос тоже спорный. Вообще, в большой статье, например, мощно сделать несколько секций. Определение секции таково, что в ней должен быть заголовок.

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

Так ли важна идеальная разметка?

Я вам сразу скажу — нет. Если вы не совсем правильно будете использовать теги, ничего катастрофического не случится. Просто есть оптимальный вариант, о нем я попытался вам сказать в этой статье и его лучше придерживаться.

Но не нужно думать, что если заключить article в section или в nav занести не самые приоритетные ссылки, то вы потеряете много поискового трафика. Я уверен, что минимально все это влияет на оптимизацию и качество сайта, но не более того. Да и к тому же, кто сказал, что статья не может располагаться в секции?

Конечно, не совершайте грубых ошибок. Не стоит заключать в тег header основной текст. Я не говорю о том, что это катастрофа для сео, но лучше так не делать, чтобы не запутывать лишний раз поискового робота.

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