@@ -0,0 +1,128 @@
Основные семантические теги 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 >
```
