Как использовать семантические теги HTML5?
Правильно сверстанный сайт будет лучше ранжироваться поисковыми роботами и с большей вероятностью попадет на первые страницы поисковых систем.
И если для вас это важно, то предлагаю почитать статью, в которой я объясню, как использовать семантические теги.
Что такое семантические теги
Это теги, которые предназначены для того, чтобы компьютерные программы (поисковые системы, сборщики информации, речевые браузеры и т.д.) понимали, какой тип информации заложен в данных тегах.
Проще говоря, это как таблички в супермаркетах, которые указывают, где и какой находится отдел. Таким образом клиент быстрее найдет то, что ему нужно.
И если на вашем сайте будут такие же правильно расставленные таблички в виде тегов, поисковым роботам не составит труда найти информацию, которую запросил пользователь, и вывести в результат именно ваш сайт.
Семантика HTML относится к синтаксису, который делает HTML более понятным за счет лучшего определения различных разделов и макета веб-страниц. Она делает веб-страницы более информативными, позволяя браузерам и поисковым системам лучше ориентироваться на сайте.
Список новых тегов в HTML5
Если вдруг вы еще не знакомы с новыми тегами HTML5, предлагаю быстренько пробежаться и познакомиться
- <main> – используется для определения основного контента страницы. Он дает понять поисковому боту, что здесь содержится главный контент.
- <header> – «шапка» страницы или раздела, в которой обычно располагается навигация по сайту. Но так же этот тег можно использовать в других секция сайта, определяя в нем заголовок этой самой секции.
- <nav> – задает навигацию по сайту.
- <section> – обычно применяется для группировки разделов. Например, может применяться для блока новостей, контактной информации, глав текста, вкладок в диалоговом окне и др.
- <article> – может быть пост на форуме, статья в журнале или газете, заметка в блоге, сообщение пользователя или другая независимая контент-единица.
- <aside> – определяет блок сбоку от контента для размещения рубрик, ссылок на архив, меток и другой информации.
- <audio> – добавляет, воспроизводит и управляет настройками аудиозаписи на веб-странице.
- <video> – добавляет, воспроизводит и управляет настройками видеозаписи на веб-странице.
- <canvas> – создает область, в которой при помощи JavaScript можно рисовать разные объекты, выводить изображения, трансформировать их и менять свойства. При помощи тега <canvas> можно создавать рисунки, анимацию, игры и др.
- <footer> – задает «подвал» сайта или раздела, в нем может располагаться имя автора, дата документа, контактная информация или дополнительная навигация по сайту.
- <command> – устанавливает команду, срабатывающую при активации элемента (нажатием или сочетанием клавиш). Элемент может иметь вид кнопки, переключателя или флажка и должен быть вложен в элемент <menu>, в противном случае он не будет показан.
- <datalist> – создает список вариантов, которые можно выбирать при наборе в текстовом поле. Изначально этот список скрыт и становится доступным при получении полем фокуса или наборе текста.
- <details> – используется для хранения информации, которую можно скрыть или показать по требованию пользователя. По умолчанию содержимое тега не отображается, для изменения статуса применяется атрибут open.
- <embed> – используется для загрузки и отображения объектов (например, видеофайлов, флэш-роликов, некоторых звуковых файлов и т.д.), которые исходно браузер не понимает. Как правило, такие объекты требуют подключения к браузеру специального модуля, который называется плагин, или запуска вспомогательной программы.
- <hgroup> – используется для группирования заголовков веб-страницы или раздела. Внутри располагаются теги заголовков от <h1> до <h6>.
- <keygen> – отвечает за генерацию пары ключей (открытый и закрытый), которые используются для шифрования и расшифровки данных форм, а также для создания и проверки цифровой подписи. Открытый ключ отправляется на сервер вместе с данными формы, а закрытый сохраняется на локальном устройстве пользователя.
- <mark> – помечает текст как выделенный. Такой текст ничем не отличается от обычного, но его вид может быть изменен с помощью стилей. В браузере Chrome и Firefox фоновый цвет текста внутри <mark> выделяется желтым цветом.
- <meter> – используется для вывода значения в некотором известном диапазоне. Используется преимущественно для отображения числовых значений: например, количества результатов поиска, объема жидкости, давления и др.
- <output> – определяет область, в которую выводится информация, преимущественно с помощью скриптов.
- <progress> – используется для отображения прогресса завершенности задачи. Изменение значения происходит через JavaScript.
- <ruby> – используется вместе с <rt> и <rp>. Предназначен для добавления небольшой аннотации сверху или снизу от заданного текста. Такая форма записи преимущественно используется для идеографической письменности вроде китайского языка, но может применяться и для других языков, если требуется написать один текст над другим.
- <time> – помечает текст внутри тега <time> как дата, время или оба значения. Может указываться непосредственно внутри контейнера <time> либо задаваться через атрибут datetime.
- <wbr> — указывает браузеру место, где допускается делать перенос строки в тексте, если этого требует ширина родительского элемента.
Как использовать семантические теги
На самом деле ничего сложного в использовании нет, главное – применять теги там, где они будут лучше всего отражать суть контента.
Например, <div> и <span> являются не семантическими элементами. Они ничего не говорят нам об их содержании. Но <form>, <table> и <article> – это семантические элементы: они четко определяют свое содержание.
Давайте разберем простой пример:
<html>
<head>
<title>Example</title>
</head>
<body>
<div id="header">
Here goes logo, navigation, etc.
</div>
<div id="main-content">
A place for website's main content
</div>
<div id="footer">
Footer information, links, etc.
</div>
</body>
</html>Если внимательнее изучить структуру, вроде как понятно, что <div> c id header – это шапка сайта, <div> c id footer – это подвал сайта и т.д. Но к сожалению, такая структура будет понятна только разработчику и бесполезна для поисковых ботов. Для них это всего лишь кусок текста, который не несет никакого смысла.
Чтобы исправить ситуацию, давайте сверстаем страницу, используя семантические теги.
<html>
<head>
<title>Example</title>
</head>
<body>
<header>
Here goes logo, navigation, etc.
</header>
<main>
A place for website's main content
</main>
<footer>
Footer information, links, etc.
</footer>
</body>
</html>Тут картина меняется сразу. Мы можем без труда и без каких-либо дополнительных атрибутов определить содержимое страницы. Теги <header>, <main> и <footer> четко разделили контент и не только повысили читаемость кода, но также расставили те самые “магазинные таблички”, которые будут направлять поисковых ботов по нужным разделам.
Ну или например блок статьи.
<article>
<header>
<h1>My new article</h1>
<p>Short desctiption...</p>
</header> <p>Main information</p> <footer>
Author: Denisoed
</footer>
</article>
Тут даже без особых знаний верстки можно сразу определить, что это за блок и какая у него роль. И теперь вам не нужно добавлять атрибут id или class, чтобы хоть как-нибудь обозначить элемент на странице.
И напоследок давайте пройдемся по некоторым тегам, к которыми могут возникнуть вопросы.
Теги <article> и <section>
Возможно, у вас сразу возник вопрос: “В чем разница между этими тегами?”
Рассказываю:
<section> – смысловой или логический раздел документа;
<article> – самостоятельный и независимый раздел документа.
Оба служат для разделения контента путем группировки логически связанных элементов и могут использоваться как взаимозаменяемые. Вопрос только в том, в какой ситуации.
Если в пример взять статью, то обычно используют теги в таком порядке
<article>
<section id="part 1">
<!-- first part -->
</section>
<section id="part 2">
<!-- second part -->
</section>
<section id="part 3">
<!-- third part -->
</section>
</article>То есть блок <article> будет независимым и может использоваться в любом месте, но секции в нём уже не получится отделить и переиспользовать в другой части сайта, так как они связаны логически. И если удалить первую часть, то очевидно, что мы потеряем суть статьи.
Думаю суть уловили.
И если попробуем поменять теги местами,
<section>
<article>
<!-- first blog post -->
</article>
<article>
<!-- second blog post -->
</article>
<article>
<!-- third blog post -->
</article>
</section>то блоки <article> можно будет отделять и использовать в других местах, так как они независимы и не связаны друг с другом. Контент внутри них не зависит от предыдущего блока, и если его удалить, то суть не поменяется.
Тег <footer>
Его можно не только использовать как подвал страницы, как может показаться на первый взгляд, но и добавить, например, в нижнюю часть статьи, где будет информация об авторе, дате публикации или какие-то ссылки.
Тег <header>
То же самое можно сказать и про этот тег. Его можно располагать в начале страницы, над основным контентом, или в секции – размещать в нем, например, заголовок или навигацию.
<header>
<h1>Navigate section</h1>
<ul>
<li><a href="/home">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact us</a></li>
</ul>
</header>Тег <nav>
Используется для основной навигации, а не для всех групп ссылок. Например, меню в подвале сайта можно не оборачивать в <nav>. В подвале обычно появляется краткий список ссылок (например, ссылка на главную, копирайт и условия) – это не является основной навигацией.
Тег <aside>
Предназначен для контента, который не является частью основного потока на сайте, однако все равно имеет к нему какое-то отношение. Обычно выступает в качестве боковой панели к вашему основному содержимому.
Обычно располагается около тега <main>
<body>
<header>
<!-- Navigation -->
</header> <main>
<!-- Main content-->
</main> <aside>
<!-- Additional navigation -->
</aside> <footer>
<!-- Footer page-->
</footer>
</body>
Заключение
Я думаю, вы поняли, что использовать семантические теги не так уж и сложно. Главное – понять, где их применять и зачем :)
Если подвести итог, можно определить два основных плюса:
- Теги избавляют структуру от лишнего мусора в виде дополнительных атрибутов. Код становится проще и понятнее.
- Теги помогают быстрее обрабатывать код поисковым роботам, вследствие чего у вашего сайта больше шансов попасть на первые страницы Google, Yandex и т.д.
На этом всё. Надеюсь, у вас появилось представление о том, зачем нужны семантические теги и как их использовать.
Узнать больше о новых элементах HTML5 можно тут:
w3schools – предоставляет простое и ясное описание многих html-элементов и того, как/где их следует использовать.
MDN – также предоставляет отличное описание всех элементов HTML + углубляется в каждый из них.
Спасибо!
