iiiypuk/snipplets.dev
iiiypuk
/
snipplets.dev
1
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
snipplets.dev/~/HTML/SEMATIC-HTML5.md

7.5 KiB
Raw Blame History

Основные семантические теги 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> не обязан находиться в конце раздела. Типовые ошибки: использовать только как подвал сайта.

Как разметить страницу с точки зрения семантики

Процесс разметки можно разделить на несколько шагов с разной степенью детализации.

  1. Крупные смысловые блоки на каждой странице сайта. Теги: <header>, <main>, <footer>.
  2. Крупные смысловые разделы в блоках. Теги: <nav>, <section>, <article>, <aside>.
  3. Заголовок всего документа и заголовки смысловых разделов. Теги: <h1>-<h6>.
  4. Мелкие элементы в смысловых разделах. Списки, таблицы, демо-материалы, параграфы и переносы, формы, цитаты, контактная информация и прогресс.
  5. Фразовые элементы. Изображения, ссылки, кнопки, видео, время и мелкие текстовые элементы.

Сомневаюсь, какие теги использовать

Есть простые правила для выбора нужных тегов.

  1. Получилось найти самый подходящий смысловой тег — использовать его.
  2. Для потоковых контейнеров — <div>.
  3. Для мелких фразовых элементов (слово или фраза) — <span>.
  4. Правило для определения <article>, <section> и <div>:
  5. Можете дать имя разделу и вынести этот раздел на другой сайт? — <article>
  6. Можете дать имя разделу, но вынести на другой сайт не можете? — <section>
  7. Не можете дать имя? Получается что-то наподобие «новости и фотогалерея» или «правая колонка»? — <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>