add sematic guide

~/HTML/SEMATIC-HTML5.md

@@ -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>
+```