Intro
HTML [HyperText Markup Language] - язык разметки, с помощью которого описывается [размечается] структура, например, веб-сайта
Существуют различные (по возможностям и правилам написания) версии [редакции] языка HTML. Здесь рассмотрена последняя (на данный момент: 06.03.2019) - HTML5
Tags
Код на языке HTML состоит из блоков. Начало и конец блока отмечаются соответствующим кодом - открывающим и закрывающим тегами [Tag - Ярлык, этикетка, бирка]. Некоторые типы блоков имеют только открывающий тег (являются самозакрывающимися). По имени тега определяется тип блока
<тип_блока>содержимое_блока</тип_блока>
В блоки многих типов можно помещать другие блоки таких же или других типов. То же касается и текста
<тип_блока1>
<тип_блока2>
<тип_блока3>содержимое_блока</тип_блока3>
<тип_блока1>содержимое_блока</тип_блока1>
<тип_блока2>
содержимое_блока
<тип_блока2></тип_блока2>
</тип_блока2>
</тип_блока2>
</тип_блока1>
Типы блоков можно разделить на:
Стандартные
являются общепринятыми и воспринимаются большей частью веб-браузеровСмысловые [семантические]
помогают сделать код читаемым и понятнымВизуальные
изменяют отображение текста (и изредка блоков) внутри себя. Иногда имеют и смысловую составляющуюУникальные [функциональные]
позволяют использовать особые возможности языка HTML и веб-браузеров (переход на другие сайты, вставка изображений, вставка и воспроизведение аудио и видео, и так далее)
Нестандартные
создаются при решении конкретных задач и не имеют смысла в отрыве от нихКомментарии
используются для заметок и не будут восприниматься как код
Также блоки можно разделить на:
Необходимые
Вспомогательные [нахуй не нужные]
Далее будут рассмотрены типы блоков только первого вида
Semantic
<!-- Division - раздел, часть -->
<div></div>
<!-- Paragraph - параграф -->
<p></p>
<!--
Span - диапазон, интервал
Используется для выделения в отдельный блок части текста
-->
<span></span>
Visual
<!--
Heading - заголовок
Разделяются между собой уровнями
Среди стандартных - шесть уровней
Не рекомендуется использовать более одного
заголовока первого уровня на документ
-->
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
<!-- Ordered List - Упорядоченный [нумерованный] список -->
<ol></ol>
<!-- Unordered List - Неупорядоченный список -->
<ul></ul>
<!-- List Item - Элемент списка -->
<li></li>
<!-- Таблица -->
<table></table>
<!-- Table Row - Ряд таблицы -->
<tr></tr>
<!-- Table Data - Обычная ячейка ряда таблицы -->
<td></td>
<!-- Table Headers - Ячейка ряда таблицы с заголовком столбца -->
<th></th>
<!--
Horizontal
Горизонтальная разделительная линия
-->
<hr>
<!--
Break
Принудительный перенос строки
Не рекомендуется к использованию
Но может быть полезен
-->
<br>
<!--
Отображает текст как в коде:
Без игнорирования нескольких пробелов подряд, индентаций и переносов строк
-->
<pre></pre>
Unique
<!--
Объявление типа документа
В данном примере - документ на языке HTML5
-->
<!DOCTYPE html>
<!--
Код на языке HTML
Главный блок
-->
<html></html>
<!--
Голова документа, содержащая неотображаемые данные
Подключение дополнительных файлов (стилей CSS, скриптов JS)
-->
<head></head>
<!-- Заголовок документа (сверху, во вкладках браузера, например) -->
<title></title>
<!-- Техническая информация и информация для поисковых систем -->
<meta>
<!-- Изменение значений по-умолчанию -->
<base>
<!-- Подключение стилей CSS (и не только) файлом -->
<link>
<!-- Подключение стилей CSS текстом -->
<style></style>
<!-- Подключение скриптов JS -->
<script></script>
<!--
Отрабатывает свое содержимое как код в случае, если в браузере отключен JavaScript
В противном случае не отрабатывает и не отображает его
-->
<noscript></noscript>
<!--
Тело документа, содержащее отображаемые данные
Подключение дополнительных файлов (скриптов JS)
-->
<body></body>
<!-- Ссылка -->
<a></a>
<!-- Image - Изображение -->
<img>
<!-- Аудиозапись -->
<audio></audio>
<!-- Видеозапись -->
<video></video>
<!-- Форма для заполнения данными -->
<form></form>
<!-- Кнопка (не обязательно для формы) -->
<button></button>
<!-- Поле ввода (не обязательно для формы) -->
<input>
<!-- Поле ввода многострочного текста (не обязательно для формы) -->
<textarea></textarea>
<!-- Подпись для поля ввода -->
<label></label>
<!-- Блок, показывающий содержимое указанного источника -->
<iframe></iframe>
Custom
<fapparty></fapparty>
Comments
<!--
Комментарий в HTML
Может быть многострочным
-->
Paths
Пути к файлам, картинкам, другим страницам и прочему могут быть:
Абсолютными
- путь указывается полностью (начиная с протокола), например,http://fapparty.ru/images/image.jpg
Относительными
- путь указывается относительно текущего местоположения (адреса страницы), например,images/image.jpg
Attributes
Атрибуты - это параметры блоков. Они имеют имя (обязательно) и значение (необязательно). Большая часть упомянутых в статье типов блоков бесполезны без указания атрибутов
Атрибуты можно разделить на:
Стандартные
являются общепринятыми и воспринимаются большей частью веб-браузеров. Некоторые атрибуты одного типа блока могут не работать у другого типа блоков (их работа не предусмотрена браузером, но это можно исправить самостоятельно через JS)Нестандартные
создаются при решении конкретных задач и не имеют смысла в отрыве от них
Также атрибуты можно разделить на:
Необходимые
Вспомогательные [нахуй не нужные]
Далее будут рассмотрены атрибуты только первого вида
Standard
<!-- Язык блока для поисковых систем -->
<html lang="ru"></html>
<!-- Кодировка документа -->
<meta charset="UTF-8">
<!-- Описание сайта для поисковых систем -->
<meta name="description" content="Описание сайта">
<!-- Ключевые слова для поисковых систем -->
<meta name="keywords" content="Ключевые, слова, через, запятые">
<!-- Перезагрузить страницу через 30 секунд -->
<meta http-equiv="refresh" content="30">
<!-- Переслать пользователя на другую страницу через 20 секунд (можно и через 0) -->
<meta http-equiv="refresh" content="20; http://fapparty.ru">
<!--
Делает ширину документа равной ширине устройства,
на котором просматривается документ
Также устанавливает начальный масштаб (для мобильных устройств)
в базовое значение (без увеличения или уменьшения)
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--
Подключение стилей CSS из файла
rel - указывает чем является объект (или что-угодно) по ссылке
В данном примере - файлом стилей
href - указывает путь до объекта (или чего-угодно)
В данном примере:
файл style.css,
расположенный в папке styles,
относительно текущего адреса документа
-->
<link rel="stylesheet" href="styles/style.css">
<!--
Идентификатор
Рекомендуется использовать по одному уникальному на документ
Несколько идентификаторов указываются через &
Значение ограничивается вашей фантазией и английским языком
Не рекомендуется использовать символы в значении
Запрещено логикой и здравым смыслом использовать пробелы в значении
Не рекомендуется к использованию вообще, но иногда нужно
Используется в CSS и JS
Также может быть использован в качестве ссылки именно на этот блок
Добавление к адресу документа #blabla
приведет к открытию документа таким образом
что верхняя граница браузера будет совпадать с верхней границей блока
(если это позволяет структура документа)
-->
<div id="blabla"></div>
<div id="blabla&blabla2"></div>
<!--
Класс
Может быть использован в любом количестве
Несколько классов указываются через пробел
Значение ограничивается вашей фантазией и английским языком
Не рекомендуется использовать символы в значении
Запрещено логикой и здравым смыслом использовать пробелы в значении
Классы никаким образом не связаны с идентификаторами,
поэтому значения могут совпадать
Используется в CSS и JS
-->
<div class="blabla"></div>
<div class="blabla blabla2"></div>
<!--
Подсказка
При наведении на блок с таким атрибутом
отобразится всплывающая подсказка со значением этого атрибута
-->
<div title="This is Division"></div>
<!-- Подключение стилей CSS текстом конкретно этому блоку -->
<div style="color: red;"></div>
<!--
Имя
Вот так просто
Без выебонов
-->
<div name="prost"></div>
<!--
disabled - отключение действий
В данном конкретном примере нажатие на ссылку
не приведет к переходу по адресу в href
-->
<a disabled href="https://google.com"></a>
<!--
Цель
Куда вывести содержимое ссылки при переходе по ней:
_blank - в новой вкладке браузера
_self - в текущей вкладке
_parent - в этом же фрейме, если во фрейме
_top - в этой вкладке, вне фрейма, если во фрейме
framename - выведет содержимое ссылки в iframe с name="framename"
-->
<a target="_blank" href="https://google.com"></a>
<!--
Скачать
Заменяет переход по ссылке на скачание по ней
-->
<a download href="http://fapparty.ru/images/image.jpg"></a>
<!--
Устанавливает target по-умолчанию для всех ссылок в документе
Устанавливает начало значения href для всех ссылок в документе
-->
<base href="http://fapparty.ru/images/" target="_blank">
<!--
Путь до изображения, аудио, видео, скрипта
В отличие от href используется для подключения в документ,
а не в качестве ссылки для перехода или скачивания
-->
<img src="http://fapparty.ru/images/image.jpg">
<!--
Изменение размера ячейки таблицы (объединение двух или более)
colspan - по горизонтали
rowspan - по вертикали
-->
<td colspan="2"></td>
<td rowspan="3"></td>
<!-- Начало отсчета -->
<ol start="3"></ol>
<!-- Отсчет в обратном порядке -->
<ol reversed></ol>
<!-- Скрытый блок -->
<div hidden></div>
<!--
Позволяет редактировать текст и код блока
Без специальных инструментов редактирования
Без отображения кода
-->
<p contenteditable="true"></p>
<!-- Отобразить элементы управления воспроизведением -->
<audio controls></audio>
<!-- Повторять воспроизведение -->
<audio loop></audio>
<!--
Начать загрузку аудиозаписи после загрузки документа
А не при запуске воспроизведения
-->
<audio preload></audio>
<!--
Обрезка аудиозаписи
С какой секунды (3) и сколько секунд (4)
Можно указывать только первое значение
Обычно источник аудио и видео указывается по-другому (описано далее),
но эта возможность работает и там
-->
<audio src="audio.mp3#t=3,4"></audio>
<!-- Другая запись -->
<audio src="audio.mp3#t=03:15:00"></audio>
<!-- Автоматический запуск воспроизведения после загрузки документа -->
<audio autoplay></audio>
<!--
Изображение предпросмотра видеозаписи
Отображается, когда видео не воспроизводится
-->
<video poster="preview.jpg"></video>
<!--
Загрузку видеозаписи можно настроить более точно
none - не предзагружать
metadata - изображение предпросмотра и технические данные (продолжительность)
auto - решение принимает браузер
-->
<video preload="none"></video>
<!--
Тип поля ввода
-->
<input type="text">
<!--
Текст указывается в атрибуте value
button - обычная кнопка
reset - кнопка сброса значений всех полей формы к значениям по-умолчанию
submit - кнопка отправки формы
-->
<input type="button" value="Click it">
<input type="reset" value="Reset it">
<input type="submit" value="Submit it">
<!--
checkbox - флажок (поле, в котором можно поставить или убрать галочку)
Указание атрибута checked поставит галочку изначально
-->
<input type="checkbox" checked>
<!--
date - дата без времени
datetime - дата и время с часовым поясом
datetime-local - дата и время без часового пояса
email - адрес электронной почты (проверка правильности ввода включена)
file - файл
hidden - скрытое поле ввода (его значение можно указать в атрибуте value)
password - пароль (текст, введенный в данное поле, будет скрыт точками)
tel - номер телефона (проверка правильности ввода включена)
text - однострочный текст
time - время без часового пояса
url - веб-адрес (проверка правильности ввода включена)
-->
<input type="date">
<input type="datetime">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden" value="Hidden Info">
<input type="password">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<!--
number - число
Атрибут min ограничивает минимальное значение,
max - максимальное
Атрибут step определяет величину,
на которую будет увеличиваться значение поля ввода
при нажатии на кнопки (они появятся у поля ввода этого типа)
-->
<input type="number" min="1" max="5" step="2">
<!--
radio - переключатели
Для корректной работы необходимо
объединить несколько переключателей в группу
через атрибут name (указав одинаковое значение)
Указание атрибута checked установит переключатель по-умолчанию
-->
<input type="radio" name="sites" value="indi0">
<input type="radio" name="sites" value="noelani">
<input type="radio" name="sites" value="fapparty" checked>
<!-- Ограничение длины вводимого значения -->
<input type="text" maxlength="16">
<!--
Текст-подсказка
Отображается внутри поля, если ничего не введено в поле
-->
<input type="text" placeholder="Текст">
<!-- Сделать поле необходимым к заполнению -->
<input type="text" required>
<!-- Запретить редактирование значения в поле -->
<input type="text" readonly>
<!-- Задать изначальное значение поля -->
<input value="text">
<!--
cols - ширина поля в символах
rows - высота поля в строках текста
-->
<textarea rows="10" cols="45"></textarea>
<!-- Путь до скрипта PHP, который будет запущен при отправке формы -->
<form action="send.php"></form>
<!--
Тип запроса к скрипту из action
Заглавными буквами (необязательно, но так принято)
GET - получение данных
POST - отправка данных
-->
<form method="POST"></form>
<!-- Отключение проверки полей внутри формы на корректность заполнения -->
<form novalidate></form>
<!--
По-умолчанию, нажатие на первую кнопку в форме отправляет ее
Чтобы явным образом указать, какая кнопка должна отправлять форму,
нужно указать атрибут type
button - обычная кнопка
submit - отправка формы
-->
<button type="button"></button>
<button type="submit"></button>
<!--
Чтобы нажатие на label срабатывало как нажатие на input
их нужно связать через атрибут for
Значение атрибута for должно соответствовать
значению атрибута id блока input
-->
<input type="text" id="text1">
<label for="text1"></label>
Custom
<div fapparty="cool"></div>
Secrets
- Несколько пробелов подряд отображаются как один
- Индентации (сдвиги клавишей Tab) и переносы строк внутри текста - игнорируются
- Перенос строки между блоками превращается в пустой символ (с нулевой высотой и шириной примерно в 4 пикселя)
- Не рекомендуется размещать блоки внутри блоков, ожидающих внутри себя текст (исключением являются ссылки)
- Текст сам по себе блоком не является
Good Manners
Современные браузеры решают много проблем с написанием кода:
- Дописывают отсутствующие блоки, если они необходимы
- Прощают неверную смысловую структуру
Стоит придерживаться следующей структуры (и соблюдать индентацию внутри блоков)
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta>
<base>
<link>
<style></style>
<script></script>
</head>
<body>
<div>
<h1>Heading</h1>
<p>Text<span>text</span>text</p>
<p>Lorem ipsum<br>dolor sit amet.</p>
</div>
<a>Link</a>
<a>
<img>
</a>
<audio>
<source=""><!-- Источник в первом формате -->
<source=""><!-- Источник во втором формате -->
<!-- Ссылка, если ни один из представленных форматов не поддерживается -->
<a href=""></a>
</audio>
<video></video>
<iframe></iframe>
<form>
<label>Input №1</label>
<input>
<label>Input №2</label>
<input>
<label>Input №3</label>
<input>
<textarea></textarea>
<button>Form Button</button>
</form>
<button>Button</button>
<input>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
<hr>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<table>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<pre>
Lorem ipsum
dolor sit amet,
consectetur adipisicing elit.
Perferendis, voluptatibus ipsam necessitatibus inventore.
Ab eaque reiciendis sapiente totam commodi
nam ad aperiam voluptates dolorum, at, ipsa, cupiditate quibusdam ut ipsam?
</pre>
<script></script>
<noscript></noscript>
</body>
</html>
Теги стандартных типов блоков и стандартные атрибуты принято писать в нижнем регистре (DOCTYPE
- исключение)
<!-- Bad -->
<Div></Div>
<IMG SrC>
<!-- Nice -->
<!DOCTYPE html>
<div></div>
<img src>
Рекомендуется использовать один тип кавычек во всем документе (или вообще). Предпочтительнее - двойные ""
Epilogue
Здесь описано далеко не все, но самое основное затронуто
P.S.: большую часть типов блоков при должном старании и усердии можно реализовать через обычный div
с помощью CSS, JS и смекалки. Подумайте (или не думайте) об этом