snipplets.dev/~/HTML/SEMATIC-HTML5.md
2023-06-03 23:49:12 +03:00

129 lines
7.5 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

Основные семантические теги 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>`
Пример
======
```html
<!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>
```