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

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

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

HTML

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

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

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

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

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

Содержание

Почему следует использовать семантический 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 приведен ниже.

Данная публикация представляет собой перевод статьи «The Secrets of Semantic HTML5 for Document Structure» , подготовленной дружной командой проекта Интернет-технологии.ру

Меню