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

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