Секреты семантического HTML5 для структурирования документа

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

Семантические теги предоставляют поисковым роботам более точную информацию о том, какой контент более важен, какой является вспомогательным и многое другое.

HTML

Семантический HTML5
HTML-теги сообщают браузерам, как должен быть представлен контент.

Семантические теги HTML5 четко указывают браузерам на то, какой тип контента содержит этот тег.

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

Но такие теги как <b> и <i>, не являются семантическими, поскольку они определяют только внешний вид текста (жирный и курсив), но ничего не сообщают о типе контента.

Яркими примерами семантических тегов HTML являются теги <h> , <code>, <blockquote> и <em>.

Почему следует использовать семантический HTML 5?

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

Почему следует использовать семантический HTML 5?

Семантические теги делают структуру контента сайта полностью понятной для браузера. Эта ясность также позволяет Google правильно представлять ваш контент в поисковой выдаче.

Как выглядит семантический HTML?

К основным семантическим тегам HTML5 относятся <nav>, <footer> и <section>. Также существует большое количество других семантических тегов. Но мы поговорим о тех, которые нужны для разбиения содержимого веб-страницы на основные части:

  1. <header>;
  2. <nav>;
  3. <main>;
  4. <article>;
  5. <section>;
  6. <aside>;
  7. <footer>

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

Как правильно использовать семантические теги HTML

Многие вебмастера допускают ошибки при использовании следующих семантических тегов:

  • Применение тега<blockquote> для добавления отступа к тексту, который не является цитатой. Так как цитаты по умолчанию выделяются отступом. Вместо этого лучше использовать CSS-свойство margin.
  • Применение <p> для добавления разрывов между элементами веб-страницы. Но этот тег предназначен для определения абзаца текста. Для добавления разрывов лучше применять CSS-свойства padding или margin.
  • Применение<ul> для добавления отступа к тексту. Это семантически неверный и неправильный HTML-код, так как теги <li> используются только вместе с <ul>.

Какие теги HTML являются семантическими?

  • <abbr> — сокращение/аббревиатура.
  • <acronym> — акроним.
  • <blockquote> — длинная цитата.
  • <dfn> — определение.
  • <address> — адрес автора (авторов) документа.
  • <cite> — цитата.
  • <code> — часть кода.
  • <div> — блочный элемент.
  • <span> — контейнер для встроенного стиля;
  • <del> — удаленный текст.
  • <ins> — добавленный текст.
  • <em> — акцент, выделение.
  • <strong> — сильный акцент.
  • <h1> — заголовок первого уровня.
  • <h2> — заголовок второго уровня.
  • <h3> — заголовок третьего уровня.
  • <h4> — заголовок четвертого уровня.
  • <h5> — заголовок пятого уровня.
  • <h6> — заголовок шестого уровня.
  • <hr> — тематический разрыв;
  • <kbd> — названия клавиш.
  • <pre> — предварительно отформатированный текст.
  • <q> — короткая встроенная цитата;
  • <samp> — пример вывода.
  • <sub> — подстрочный текст.
  • <sup> — надстрочный текст.
  • <var> — переменная или пользовательский текст.

Пример использования семантических тегов HTML5 приведен ниже.

Какие теги HTML являются семантическими?

Пожалуйста, опубликуйте свои комментарии по текущей теме материала. За комментарии, дизлайки, отклики, лайки, подписки огромное вам спасибо!

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

Сергей Бензенкоавтор-переводчик статьи «The Secrets of Semantic HTML5 for Document Structure»