7.5 KiB
Основные семантические теги HTML
Среди «старых» тегов из ранних версий HTML тоже есть семантические —
например, тег <p>, который обозначает параграф.
При этом теги <i> или <b> не семантические,
потому что они не добавляют смысла выделенному тексту,
а просто определяют его внешний вид.
Но в актуальной версии стандарта HTML Living Standard есть семантические теги почти для всех основных частей сайта, и лучше пользоваться ими. Вот несколько примеров семантических тегов.
<article>
Значение: независимая, отделяемая смысловая единица, например комментарий, твит, статья, виджет ВК и так далее.
Особенности: желателен заголовок внутри.
Типовые ошибки: путают с тегами <section> и <div>.
<section>
Значение: смысловой раздел документа. Неотделяемый, в отличие от <article>.
Особенности: желателен заголовок внутри.
Типовые ошибки: путают с тегами <article> и <div>.
<aside>
Значение: побочный, косвенный для страницы контент.
Особенности: может иметь свой заголовок. Может встречаться несколько раз на странице.
Типовые ошибки: считать <aside> тегом для «боковой панели»
и размечать этим тегом основной контент, который связан с окружающими его элементами.
<nav>
Значение: навигационный раздел со ссылками на другие страницы или другие части страниц.
Особенности: используется для основной навигации,а не для всех групп ссылок.
Основной является навигация или нет — на усмотрение верстальщика.
Например, меню в подвале сайта можно не оборачивать в <nav>.
В подвале обычно появляется краткий список ссылок
(например, ссылка на главную, копирайт и условия) — это не является основной навигацией,
семантически для такой информации предназначен <footer> сам по себе.
Типовые ошибки: многие считают, что в <nav> может быть только список навигационных ссылок,
но согласно спецификации там может быть навигация в любой форме.
<header>
Значение: вводная часть смыслового раздела или всего сайта, обычно содержит подсказки и навигацию. Чаще всего повторяется на всех страницах сайта.
Особенности: этих элементов может быть несколько на странице.
Типовые ошибки: использовать только как шапку сайта.
<main>
Значение: основное, не повторяющееся на других страницах, содержание страницы.
Особенности: должен быть один на странице, исходя из определения.
Типовые ошибки: включать в этот тег то, что повторяется на других страницах (навигацию, копирайты и так далее).
<footer>
Значение: заключительная часть смыслового раздела или всего сайта, обычно содержит информацию об авторах, список литературы, копирайт и так далее. Чаще всего повторяется на всех страницах сайта.
Особенности: этих элементов может быть несколько на странице.
Тег <footer> не обязан находиться в конце раздела.
Типовые ошибки: использовать только как подвал сайта.
Как разметить страницу с точки зрения семантики
Процесс разметки можно разделить на несколько шагов с разной степенью детализации.
- Крупные смысловые блоки на каждой странице сайта. Теги:
<header>,<main>,<footer>. - Крупные смысловые разделы в блоках. Теги:
<nav>,<section>,<article>,<aside>. - Заголовок всего документа и заголовки смысловых разделов. Теги:
<h1>-<h6>. - Мелкие элементы в смысловых разделах. Списки, таблицы, демо-материалы, параграфы и переносы, формы, цитаты, контактная информация и прогресс.
- Фразовые элементы. Изображения, ссылки, кнопки, видео, время и мелкие текстовые элементы.
Сомневаюсь, какие теги использовать
Есть простые правила для выбора нужных тегов.
- Получилось найти самый подходящий смысловой тег — использовать его.
- Для потоковых контейнеров —
<div>. - Для мелких фразовых элементов (слово или фраза) —
<span>. - Правило для определения
<article>,<section>и<div>: - Можете дать имя разделу и вынести этот раздел на другой сайт? —
<article> - Можете дать имя разделу, но вынести на другой сайт не можете? —
<section> - Не можете дать имя? Получается что-то наподобие «новости и фотогалерея» или «правая колонка»? —
<div>
Пример
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Заголовок страницы</title>
</head>
<body>
<header class="main-header">
<!— Шапка сайта —>
</header>
<main>
<!— Основное содержимое страницы —>
</main>
<footer class="main-footer">
<!— Подвал сайта —>
</footer>
</body>
</html>