update folders
This commit is contained in:
7
snipplets/code/HTML/README.md
Normal file
7
snipplets/code/HTML/README.md
Normal file
@ -0,0 +1,7 @@
|
||||
# HTML
|
||||
|
||||
- [Sematic HTML5](SEMATIC-HTML5.md) - Гайд по сематическим тегам
|
||||
|
||||
- [favicons.html](favicons.html)
|
||||
- [anchors.html](anchors.html) - Пример использования якоря на странице
|
||||
- [humans.txt](humans.txt)
|
||||
128
snipplets/code/HTML/SEMATIC-HTML5.md
Normal file
128
snipplets/code/HTML/SEMATIC-HTML5.md
Normal file
@ -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>
|
||||
```
|
||||
3
snipplets/code/HTML/anchors.html
Normal file
3
snipplets/code/HTML/anchors.html
Normal file
@ -0,0 +1,3 @@
|
||||
<p><a name="top"></a></p>
|
||||
<p>...</p>
|
||||
<p><a href="#top">Наверх</a></p>
|
||||
9
snipplets/code/HTML/favicons.html
Normal file
9
snipplets/code/HTML/favicons.html
Normal file
@ -0,0 +1,9 @@
|
||||
<head>
|
||||
<!-- Icons -->
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="120x120" href="favicon-120x120.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
|
||||
<link rel="icon" href="favicon.ico" type="image/x-icon">
|
||||
<link rel="manifest" href="site.webmanifest">
|
||||
</head>
|
||||
13
snipplets/code/HTML/humans.txt
Normal file
13
snipplets/code/HTML/humans.txt
Normal file
@ -0,0 +1,13 @@
|
||||
/* SITE */
|
||||
Last update: Thu Apr 13 04:50 PM MSK 2022
|
||||
Language: Russian
|
||||
Doctype: HTML5
|
||||
IDE: Sublime Text 4
|
||||
Components: None
|
||||
|
||||
/* TEAM */
|
||||
Chef: Alexander Popov
|
||||
Contacts: iiiypuk [at] fastmail.fm
|
||||
Twitter: @_iiiypuk
|
||||
Ko-Fi: iiiypuk
|
||||
From: Russia
|
||||
3
snipplets/code/HTML/update-css.html
Normal file
3
snipplets/code/HTML/update-css.html
Normal file
@ -0,0 +1,3 @@
|
||||
<script>
|
||||
document.write("<link type='text/css' href='../ui/css/ui.css?version=" + new Date().getTime() + "' rel='stylesheet' />");
|
||||
</script>
|
||||
Reference in New Issue
Block a user