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 и смекалки. Подумайте (или не думайте) об этом