Гайд по HTML

Дата последней правки:

Отображение сайта. Метаданные

<!DOCTYPE html>  <!-- указывает, что в документе используется HTML5-версия -->
<html lang="ru">  <!-- открывает содержимое страницы и указывает браузеру язык, на котором написан текст -->
<head>  <!-- описание характеристик сайта -->
  <meta charset="UTF-8">  <!-- кодировка сайта -->
  <meta content="IE=edge" http-equiv="X-UA-Compatible">
  <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">  <!-- параметры окна просмотра в браузере -->
  <meta content="frontrabotka" name="author">  <!-- имя автора страницы -->
  <meta content="Описание" name="description">  <!-- описание страницы -->
  <title>...</title>  <!-- название вкладки страницы в браузере -->
</head>
<body>  <!-- тело сайта -->
</body>
</html>  <!-- закрывает содержимое страницы -->

Структура HTML-документа

✒️ Метаданные — это настройки веб-страницы.

Вертикальный поток документа идёт сверху вниз, и элементы отображаются в том порядке, в котором они указаны в HTML-документе. Горизонтальный поток идёт слева направо или справа налево.

Атрибут charset помещается как можно выше в теге <head>, чтобы избежать ошибок кодировки.

Значение viewport указывает браузеру, как масштабировать и отображать страницу на разных устройствах. Страницу можно сделать адаптивной, подогнав ширину окна под размеры устройства. viewport принимает пять параметров:

Не рекомендуется отключать масштабирование пользователем (user-scalable="no" или maximum-scale и minimum-scale с одинаковым значением), так как это ухудшает доступность для людей с ограниченными возможностями.

Значение атрибута name="description" задаёт краткое описание страницы, которое будет отображаться в поисковых системах и влияет на сниппеты. Для улучшения отображения в поисковой выдаче рекомендуется описание длиной от 150 до 160 символов.

Тег <title> — заголовок документа.

Open Graph (OG) теги используются для настройки внешнего вида ссылок при их обмене в социальных сетях и других сервисах.

✒️ ️Open Graph — это открытый стандарт для описания контента веб-страниц. Эти теги определяют, как будет выглядеть страница при её публикации в VK, Facebook, LinkedIn, Pinterest и других платформах:

<meta property="og:title" content="Conspect">
<meta property="og:description" content="Коллекция практических конспектов по веб-разработке">
<meta property="og:url" content="https://frontrabotka.github.io/conspect/">
<meta property="og:type" content="website">
<meta property="og:image" content="https://frontrabotka.github.io/conspect/og-image.png">
<meta property="og:locale" content="ru_RU">
<meta property="og:site_name" content="Conspect">
Open Graph теги

Каждый из этих тегов отвечает за определённый аспект отображения:

Twitter Cards позволяют создавать расширенные карточки с контентом при публикации ссылок в Twitter:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="https://frontrabotka.github.io/conspect/">
<meta name="twitter:title" content="Conspect">
<meta name="twitter:description" content="Коллекция практических конспектов по веб-разработке">
<meta name="twitter:image" content="https://frontrabotka.github.io/conspect/og-image.png">
<meta name="twitter:site" content="@conspect">
Twitter Card теги

Twitter Card теги включают:

Для Facebook/Open Graph: рекомендуемый размер изображения 1200x630px. Для Twitter: оптимальный размер 1024x512px.

Тег <base> определяет основной адрес для относительных путей и должен располагаться как можно ближе к открывающему тегу <head>, чтобы относительные ссылки, которые идут ниже, правильно обрабатывались. На странице должен быть только один тег <base>.

<base href="URL" target="_self">

Ссылки и формы на сайте откроются в зависимости от значения атрибута target="...":

Для быстрой загрузки сайта код для отображения верхней «шапки» и критически важный CSS вставляют в тег <head> в формате <style>...</style>. Туда можно встроить шапку сайта, верхние баннеры, заголовки — всё то, что отображается сразу при открытии сайта.

Форматирование текста

Блочный тег разрешается вкладывать в другие блочные элементы (но не во все, это зависит от конкретного элемента и его определения в спецификации HTML). Строчные теги можно вкладывать как в строчные, так и в блочные элементы, если они поддерживают вложение строчных элементов.

✒️ Глобальный атрибут — это атрибут, который применяется почти к любому тегу.

Тег <h1> — главный заголовок страницы и должен находиться на странице в единственном экземпляре. Если по дизайну заголовка нет, то <h1> скрывают от пользователя с помощью стилей. После заголовка <h1> идёт заголовок <h2>, что соблюдает иерархию заголовков. Хотя браузеры отображают вложенные заголовки шрифтом всё меньшего размера, они не поддерживают структурирование на основе уровней заголовков. Тем не менее, заголовки контента располагаются так, как будто это делается.

<h1>Заголовок 1</h1>  <!-- заголовок 1 уровня -->
<h2>Заголовок 2</h2>  <!-- заголовок 2 уровня -->
<h3>Заголовок 3</h3>  <!-- заголовок 3 уровня -->
<h4>Заголовок 4</h4>  <!-- заголовок 4 уровня -->
<h5>Заголовок 5</h5>  <!-- заголовок 5 уровня -->
<h6>Заголовок 6</h6>  <!-- заголовок 6 уровня -->

Тег <p> преобразует текст в абзац.

<p>Текст</p>  <!-- новый абзац -->

Тег <b> используется для привлечения внимания к части текста без добавления какой-либо семантической важности или изменения тона. Этот тег следует использовать только тогда, когда ни один из других тегов не подходит.

<b>текст</b>  <!-- жирный текст -->

Тег <strong> придаёт тексту большую степень важности.

<strong>текст</strong>  <!-- жирный текст -->

Тексту внутри тега <em> придаётся смысловой акцент.

<em>текст</em>  <!-- текст курсивом -->

Тег <i> используется для выделения текста, который отличается по голосу или настроению, например, технические термины, иностранные слова (вместе с атрибутом lang) или изложение мыслей.

<i lang="ar" dir="rtl">ريشة</i>  <!-- текст курсивом -->

Глобальный атрибут lang="..." определяет язык текста внутри элемента, для которого задан этот атрибут.

Глобальный атрибут dir="..." определяет направление письма:

Тег <s> обозначает содержимое, которое уже не корректно или потеряло актуальность, например, старая цена товара.

<s>текст</s>  <!-- перечеркнутый текст -->

Тег <del> выделяет текст, который был удалён в новой версии документа.

<del>текст</del>  <!-- перечеркнутый текст -->

Тег <ins> выделяет текст, который был добавлен в новой версии документа.

<ins>текст</ins>  <!-- подчеркнутый текст -->

Тег <u> выделяет фрагмент текста, который имеет аннотации, например, слова с орфографическими ошибками или имена на китайском языке.

<u>текст</u>  <!-- подчеркнутый текст -->

Тег <mark> выделяет важный фрагмент текста ярким фоном, без учёта контекста, который располагается вокруг элемента <mark>, например, найденные слова во время поиска по тексту.

<mark>текст</mark>  <!-- выделение желтым цветом -->

Тег <sub> выводит подстрочный текст.

<sub>текст</sub>  <!-- перевод в нижний регистр -->

Тег <sup> выводит надстрочный текст.

<sup>текст</sup>  <!-- перевод в верхний регистр -->

Тег <br> принудительно переносит текст на новую строку.

<br>  <!-- новая строка -->

Тег <wbr> указывает браузеру место, где желателен перенос строки, если это необходимо для оптимального отображения. Он полезен, если в тексте присутствуют длинные слова или URL-адреса.

<wbr>  <!-- перенос строки -->

Тег <hr> определяет тематический разрыв на уровне абзаца, например, переход к другой теме в разделе справочника.

<hr>  <!-- горизонтальная линия -->

Тег <small> используется для пояснений или комментариев, которые дополняют или раскрывают предшествующий текст, например, копирайт или информация о лицензии.

<small>текст</small>  <!-- уменьшение текста -->

Тег <pre> отображает текст без обработки, сохраняя пробелы и переносы строк.

<pre>текст</pre>  <!-- выводит текст в том виде, в котором он записан в редакторе -->

Тег <code> используется для оформления фрагментов программного кода. <code> можно вкладывать в тег <pre>, но наоборот — нельзя.

<code>код</code>  <!-- используется для вывода фрагмента кода -->

Тег <var> используется для обозначения переменных в математических выражениях и программном коде. Внутри тега оборачиваются отдельные переменные.

<var>x</var> + <var>y</var> = <var>z</var>  <!-- маркировка имен переменных -->

Тег <kbd> обозначает пользовательский ввод: с клавиатуры, голосом или другим интерфейсом ввода.

<kbd>Alt</kbd> + <kbd>F4</kbd>  <!-- используется для маркировки клавиш клавиатуры и ввода с них -->

Тег <samp> используется для образцов оформления вывода данных, которые показываются пользователю в результате выполнения программы.

<samp>Установка выполнена успешно</samp>  <!-- маркировка вывода программы -->

Комментарий в HTML-документе указывается так: < !--комментарий-- >, и он не виден пользователю в браузере.

Глобальный атрибут title="текст" добавляет элементу подсказку, которая всплывает при наведении курсора мыши.

Списки

Списки в разметке оборачивают последовательность однотипных элементов, например, список пунктов меню в шапке сайта или последовательность кнопок.

Тег <ol> создаёт упорядоченный список элементов.

Тег <li> — отдельный элемент списка.

<ol start="1" type="1">  <!-- пронумерованный список -->
  <li>...</li>  <!-- каждый элемент списка заключается в этот тег -->
</ol>

Атрибут start="число" указывает, с какого пункта начинается список. Применим только для тега <ol>.

Атрибут type="значение" указывает формат маркировки: алфавит (a, b, c), арабские (1, 2, 3) или римские цифры (I, II, III). Это устаревший атрибут представления.

Тег <ol> используется для создания рейтингов, меню «хлебные крошки», вёрстки плейлистов в музыкальной библиотеке и других ситуаций, где важен порядок элементов.

Тег <ul> создаёт неупорядоченный маркированный список.

<ul>...</ul>  <!-- неупорядоченный список -->
  <li>...</li>
</ul>

С помощью тега <ul> верстается навигация, рубрикация и кнопки социальных сетей в подвале сайта.

В теги <ul> и <ol> нельзя вкладывать ничего, кроме тега <li>. Тег <li> может содержать любой контент.

Тег <dl> предназначен для создания списков пар «ключ-значение», которые представляют набор элементов и их связанные описания, такие как термины, определения или вопросы и ответы.

Элемент <dt> используется для обозначения термина или ключа в паре «ключ-значение». Как правило, следом за ним идёт либо ещё один тег <dt> (если нужно выделить несколько терминов с одним определением), либо тег <dd>.

Тег <dd> используется для описания термина или значения в паре «ключ-значение». Следом за этим тегом может идти как ещё один тег <dd> (если у термина несколько определений), так и тег <dt> (для следующего термина).

<dl>  <!-- список описания -->
  <dt>Термин</dt>  <!-- внутри оборачивается термин -->
  <dd>Описание</dd>  <!-- внутри оборачивается описание или определение -->
</dl>

Ссылки

✒️ Абсолютный URL — это ссылка, которая указывает на местоположение, определяемое его абсолютным положением в интернете, включая протокол и доменное имя. Она указывает на одно и то же местоположение, независимо от того, где используется.

✒️ Относительный URL указывает расположение относительно файла, с которым взаимодействует пользователь. Он указывает на различные места в зависимости от того, где расположен файл, в котором он используется.

Операнды относительных ссылок:

По умолчанию ссылка — строчный элемент.

Пути к HTML-файлам чувствительны к регистру. Имя файла и расширение в атрибуте src должны точно совпадать с фактическим именем файла. При использовании нескольких слов в названии файла рекомендуется использовать - или _ в качестве разделителя, а не пробел.

Тег <a> преобразует любой объект в ссылку.

<a href="https://github.com/frontrabotka" rel="noopener noreferrer" target="_blank">Сайт</a>  <!-- ссылка на сайт -->
<a href="mailto:email@ya.ru">E-mail</a>  <!-- ссылка на почтовый адрес -->
<a href="../document.pdf" download>Скачать</a>  <!-- ссылка на скачивание файла -->
<a href="tel:+78000000000">Позвонить</a>  <!-- ссылка на номер телефона. Он записывается без пробелов, скобок и дефисов -->

Ссылки в HTML

Атрибут href="URL" содержит адрес, по которому перейдёт пользователь, когда нажмёт на ссылку. Атрибут href является обязательным.

Атрибут rel="noopener" позволяет игнорировать скрипты сторонней страницы, которые могут влиять на безопасность открываемого окна.

Атрибут rel="noopener noreferrer" добавляется для повышения безопасности при переходе на другие сайты и рекомендуется использовать с атрибутом target="_blank".

Атрибут target="значение" указывает, где откроется страница:

Атрибут download позволяет скачать файл. Например, если добавить атрибуту значение download="Перо.zip", то загружаемому файлу будет дано название Перо.zip.

✒️ Ссылка-якорь перенаправляет к конкретному месту или разделу на текущей странице.

<a href="#anchor">...</a>  <!-- ссылка-якорь на раздел с id="anchor" -->
<h1 id="anchor">...</h1>  <!-- место перехода -->

Якорная ссылка

Для создания якорной ссылки на нужный раздел внешней страницы, после URL-ссылки в конце нужно добавить # и ID якоря: https://...#id.

Для отправки пользователя в самый верх страницы можно использовать href="#top" или href="#".

Пустая ссылка-заглушка без атрибута href называется логической. Обычно используется, чтобы показать, что пользователь находится на текущей странице.

<a>Главная страница</a>  <!-- логическая ссылка -->

Блоки разрешается оборачивать в ссылки, главное, чтобы внутри не было интерактивных элементов. Ссылки также можно вкладывать в блочный элемент, но нельзя вставлять ссылку в <button> или <label>.

Ссылку нельзя вкладывать в другие ссылки, оборачивать интерактивные элементы, такие как <button> и <input>, и элементы, которые содержат tabindex.

Элемент будет «ссылкой», если при нажатии на него подразумевается переход на другую страницу. Элемент будет «кнопкой», если при нажатии на него произойдёт действие на текущей странице, откроется диалоговое окно или прокрутится слайдер. В любой непонятной ситуации нужно использовать кнопку — тег <button>.

Изображения

Изображение встраивается в HTML-код, если оно играет ключевую роль, то есть является контентом. Если картинка — декорация или фоновое изображение, лучше использовать её через CSS.

Указание атрибутов width и height в теге <img> необходимо для того, чтобы браузер мог зарезервировать место под изображение до его загрузки, что предотвращает «прыжки» контента. Визуальное изменение размеров изображения рекомендуется делать с помощью CSS. Атрибуты width и height в HTML задают соотношение сторон и резервируют место под изображение, а CSS позволяет масштабировать изображение, сохраняя это соотношение, или изменять его для адаптивного дизайна.

Тег <img> добавляет изображение на страницу. По умолчанию, элемент <img> ведёт себя как строчно-блочный элемент.

HTML позволяет загружать разные изображения в зависимости от различных условий:

<img src="image.png"
loading="lazy"
width="1280"
height="600"
alt="перо"
srcset=
  "small.png 320w,
  medium.png 480w,
  large.png 800w"
sizes=
  "(max-width: 320px) 280px,
  (max-width: 480px) 440px,
  800px
">

Картинка с разными размерами в HTML

Браузер читает эти атрибуты так:

  1. Смотрит на ширину экрана устройства (или размер окна браузера).
  2. Определяет первое подходящее условие из списка в атрибуте sizes.
  3. Смотрит на размер блока для изображения, который соответствует этому медиавыражению.
  4. Выбирает изображение из списка в атрибуте srcset со значением ширины, ближайшим и не меньшим, чем ширина слота. Если такого нет, то загружается самое большое изображение из списка.

Изображения с двойным разрешением, например, srcset="logo_2x.png 2x", указываются для экранов с высокой плотностью пикселей, таких как Retina-экраны. 2x — число указывает на плотность пикселей, для которой будет использоваться изображение. Такой метод подходит, когда картинки имеют одинаковые пропорции.

Атрибут src="image.png" указывает путь к изображению из интернета или проекта и является обязательным.

Атрибут width="число" задаёт ширину картинки, а атрибут height="число" — её высоту.

Значение атрибута loading="lazy" («ленивая загрузка») означает, что изображение загружается только тогда, когда попадает в поле видимости пользователя.

Атрибуты srcset="список_изображений" и sizes="медиа_условия" добавляются, если имеются версии изображения разных размеров.

Атрибут srcset="small.png 320w" включает название изображения и его ширину, из которых браузер выберет нужное.

Атрибут sizes="(max-width: 320px) 280px" определяет перечень медиавыражений. Формат атрибута: медиа-условия и ширина слота. Медиа-условие описывает возможное состояние экрана и располагается от меньшего к большему. Ширина слота — это ширина, которую занимает изображение, когда медиа-условие истинно. Для ширины слота указываются абсолютные значения (px или em) или значения относительно окна просмотра (vw), но не проценты.

Атрибут alt="перо" описывает, что изображено на картинке, и является обязательным. Этот текст отобразится, если изображение не загрузится, и используется скринридерами.

Тег <picture> указывает несколько источников изображения для различных устройств и разрешений экрана, чтобы браузер мог выбрать подходящее изображение в зависимости от возможностей устройства пользователя.

<picture>  <!-- адаптирует картинки под разные устройства -->
  <source
  srcset="small.jpg"
  media="(max-width: 768px)">
  <source
  srcset="medium.jpg"
  media="(max-width: 1024px)">
  <source
  srcset="large.jpg">
  <img src="image.jpg" alt="текст">
</picture>

Адаптивные изображения в HTML под разные устройства

В случае, если тег <picture> не поддерживается браузером или ни один из элементов <source> не удовлетворяет условиям, отобразится изображение из тега <img>.

Атрибуты тега <source> содержат ссылки, которые указывают различные источники изображения с разными параметрами: размеры, разрешение или тип файла. Браузер использует эти источники для выбора подходящего изображения, которое соответствует характеристикам устройства, и отображает его.

<picture>
  <source srcset="small.avif" type="image/avif">
  <source srcset="small.webp" type="image/webp">
  <img src="small.jpg" alt="текст">
</picture>

Адаптивные изображения в HTML под разные форматы

Использование <picture> для адаптации изображений под разные форматы может увеличивать количество узлов в DOM-дереве, что незначительно увеличит расход памяти и повлияет на производительность. Этот эффект обычно незначителен и оправдан выигрышем в размере файлов изображений.

Если браузер не поддерживает атрибут srcset или ни один из файлов, указанных в srcset не может быть загружен, будет использован атрибут src. Атрибут src в теге <img> внутри <picture> обязателен.

Медиавыражения используются для определения тёмной темы на устройстве пользователя и подмены изображения, делая интерфейс более приятным:

<picture>
  <source
  srcset="картинка-для-темной-темы.png"
  media="(prefers-color-scheme: dark)">
  <img src="картинка-для-светлой-темы.png" alt="текст">
</picture>

Медиавыражение для тёмной темы

SVG-изображения можно подключать через тег <img>. В этом случае можно управлять размерами изображения на странице, но нельзя напрямую изменить цвет фона или заливки SVG с помощью CSS. Если SVG-изображение не является контентным, его можно подключить как фон с помощью CSS. Также можно подключить SVG через тег <svg> и управлять им через стили.

✒️ SVG-спрайт — это файл, полученный в результате объединения нескольких SVG-файлов.

Спрайт используется для сокращения количества запросов к сети: вместо загрузки нескольких файлов загружается один. Это также помогает уменьшить размер и улучшить читаемость HTML-кода при многократном использовании векторной графики. Часто SVG-графика применяется для создания систем иконок. Использование спрайтов позволяет избежать дублирования кода и уменьшить размер HTML-файла.

Для создания SVG-спрайта:

  1. Создайте отдельный файл vector.svg. Внутри укажите атрибут xmlns="http://www.w3.org/2000/svg", который указывает на используемый диалект XML.
  2. Каждая иконка помещается в тег <symbol>, который позволяет группировать элементы. Каждый элемент <symbol> содержит:
    • id: уникальный идентификатор для ссылки на иконку в HTML;
    • viewBox: определяет систему координат и область просмотра для содержимого символа. Значение viewBox копируется из исходной SVG иконки.
<svg xmlns="http://www.w3.org/2000/svg">
  <symbol id="Lada" viewBox="0 0 24 24">
    <path d="..."/>
  </symbol>
  <symbol id="Volga" viewBox="0 0 24 24">
    <path d="..."/>
  </symbol>
</svg>

Создание SVG-спрайта

Чтобы использовать иконку из спрайта на странице, нужно добавить тег <svg> в HTML-разметку и внутрь него тег <use> с атрибутом href, который ссылается на файл vector.svg с указанием id нужного изображения. Полученные элементы стилизуются с помощью CSS.

<svg class="icon" viewBox="0 0 24 24" width="24" height="24">
  <use href="vector.svg#Lada">
  </use>
</svg>

Использование SVG-спрайта

Этот метод позволяет сократить количество HTTP-запросов, стилизовать иконки с помощью CSS и обеспечивает адаптивность и масштабируемость без потери качества. Спрайт нельзя использовать как фоновое изображение.

✒️ Область просмотра — это ограниченный прямоугольник, который определяет, какая часть холста видна пользователю в настоящий момент.

<svg xmlns="http://www.w3.org/2000/svg">
  <view id="icon-first" viewBox="0 0 24 24"/>
  <path d="..."/>
  <view id="icon-second" viewBox="0 24 24 24"/>
  <path d="..."/>
</svg>

В атрибуте viewBox первые два числа задают координаты верхнего левого угла области просмотра (обычно 0 0). Последние два числа определяют ширину и высоту области просмотра в единицах, используемых внутри SVG. Они задают «масштаб», в котором отрисовывается иконка. Для использования в HTML указывается путь к спрайт-файлу и ID нужного символа: vector.svg#Lada.

Видео и аудио

Тег <video> встраивает видео на страницу.

<video
controls
autoplay
loop
poster="thumbnail.jpg"
muted
playsinline>
  <source src="path/to/video.webm" type="video/webm">
  <source src="path/to/video.av1" type="video/av1">
  <source src="path/to/video.mp4" type="video/mp4">
</video>

Вставка видео в HTML

Атрибут controls добавляет элементы управления видео- и аудио-плеером.

Атрибут autoplay включает автовоспроизведение видео после загрузки страницы и работает только с атрибутом muted. С атрибутом muted видео начнёт воспроизводиться без звука; рекомендуется использовать его для фоновых видео.

Атрибут loop зацикливает воспроизведение видео после завершения.

Атрибут poster="путь" указывает путь к изображению обложки, которое отображается до начала воспроизведения видео.

Атрибут playsinline изменяет поведение видеоплеера на мобильных устройствах. Вместо полноэкранного режима плеер открывается в стандартных рамках.

В атрибуте src="путь" указывается путь к видеофайлу.

С помощью тега <source> можно предоставить несколько версий видео или аудио в разных форматах. Браузер выберет первый поддерживаемый формат из списка, что обеспечивает совместимость с разными браузерами и устройствами. Форматы рекомендуется располагать в порядке убывания эффективности сжатия и качества, начиная с самых современных.

Форматы WebM и AV1 отлично сжимают видео. Если они не поддерживаются браузером, то используется более распространённый формат MP4 как запасной вариант.

Хорошей практикой считается конвертировать формат GIF в MP4 перед загрузкой на сайт, так как это уменьшит размер файла.

Тег <audio> встраивает аудиофайл на страницу.

<audio controls>
  <source src="audio/file.mp3" type="audio/mp3">
  <source src="audio/file.ogg" type="audio/ogg">
  Ваш браузер не поддерживает элемент audio.
</audio>

Вставка аудио в HTML

Внутри тега <audio>...</audio> размещается текст, который появится, если браузер не поддерживает встроенное аудио.

Таблицы

Тег <table> используется для создания таблицы.

Тег <caption> добавляет таблице подпись. Если заголовок не предусмотрен дизайнером, его всё равно нужно добавить и скрыть через CSS, чтобы повысить доступность контента. Тег <caption> должен быть первым дочерним элементом <table>.

Тег <th> создаёт заголовок для столбцов или строк.

Тег <tr> создаёт строки в таблице. Тег <tr> создаёт строки в таблице. Дочерними элементами строки <tr> могут быть только ячейки <td> или <th>, но не наоборот.

Тег <td> создаёт ячейку для данных в таблице.

<table>  <!-- тег для создания таблицы -->
  <caption>Заголовок таблицы</caption>  <!-- общий заголовок таблицы -->
  <colgroup>  <!-- группировка столбцов для стилизации -->
    <col>  <!-- для применения стиля к столбцу -->
    <col span="2">  <!-- стиль применяется ко второму и третьему столбцу -->
    <col>
  </colgroup>
  <thead>  <!-- шапка таблицы -->
    <tr>  <!-- тег для создания ряда в таблице -->
      <th scope="col">Заголовок столбца</th>  <!-- заголовок столбца -->
      <th>...</th>
      <th>...</th>
    </tr>
  </thead>
  <tbody>  <!-- основная часть таблицы -->
    <tr>
      <td rowspan="3">...</td>  <!-- ячейка с объединением строк по вертикали -->
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody>
  <tfoot>  <!-- заключительная часть таблицы -->
    <tr>
      <td colspan="2">...</td>  <!-- ячейка с объединением строк по горизонтали -->
      <td>...</td>
      <td>...</td>
    </tr>
  </tfoot>
</table>

Структура таблицы в HTML

С помощью тега <col> удобно стилизовать столбцы таблицы через CSS. Для группировки тегов <col> применяют тег <colgroup>, который прописывается после тега <table> и задаёт стиль для группы столбцов. У <col> есть атрибут span, который распространяет стиль на несколько столбцов.

Атрибут scope="значение" добавляется к элементу <th> и сообщает скринридеру, какие ячейки являются заголовками. Скринридер распознаёт такую разметку и зачитывает столбец или строку целиком. Атрибут scope принимает следующие значения:

Заголовок верхнего уровня у столбцов получает значение scope="colgroup", а у его подзаголовков — scope="col". Заголовок верхнего уровня у строк получает значение scope="rowgroup", а у его подзаголовков — scope="row".

Атрибут colspan="число" указывается для ячеек таблицы, чтобы объединить несколько ячеек по горизонтали, а rowspan="число" — для вертикального объединения.

Тег <tfoot> может быть только один внутри тега <table> и должен идти непосредственно перед <tbody> (если он присутствует).

Подключение ресурсов

Тег <link> подключает внешние ресурсы: стили, фавиконки, шрифты и прочее.

<link rel="stylesheet" href="/style.css" media="screen and (max-width: 600px)">  <!-- подключение CSS файла. Прописывается внутри тега <head> -->

Атрибут rel="stylesheet" указывает, что подключается таблица стилей.

Атрибут href="URL" указывает путь к файлу.

Атрибут media="медиа-запрос" определяет условия, при которых применяется подключённый ресурс (например, таблица стилей). Это позволяет использовать разные стили в зависимости от типа устройства, размера экрана, ориентации, разрешения, цветовой схемы и других характеристик. Например, можно указать стили для печати (media="print") или для тёмной темы ОС (media="(prefers-color-scheme: dark)").

Для CSS не нужно использовать type="text/css" — устарело.

✒️ Правило специфичности: если стиль описан ниже в коде, то браузер отдаст ему больший приоритет при одинаковой специфичности у обоих стилей. Специфичность также определяется селекторами.

Браузеры загружают фавиконки в фоновом режиме, поэтому размер файла не сильно влияет на производительность сайта.

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml" sizes="any">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">  <!-- 180x180 -->
<link href="manifest.webmanifest" rel="manifest">  <!-- файл с манифестом веб-приложения -->
Подключение фавиконки

Атрибут rel="icon" указывает на фавиконку.

Атрибут sizes="32x32" устанавливает ширину и высоту в пикселях.

Если указать sizes="any", то браузер сможет масштабировать SVG-фавиконку до любого размера без потери качества, что делает её идеальным выбором для адаптивных иконок.

✒️ Манифест веб-приложения (manifest.webmanifest) — это файл в формате JSON, который содержит данные для браузера, необходимые для установки веб-сайта как системного приложения (PWA).

В манифесте рекомендуется включать поле icons, которое представляет собой массив объектов, описывающих различные иконки приложения. Важно предоставить иконки разных размеров и типов для различных устройств и целей: 192x192 — для отображения на главном экране Android; 512x512 — для экрана-заставки (splash screen) и других целей; maskable (с purpose: "maskable") — адаптируемая иконка для Android, которая позволяет системе применять маску к иконке для соответствия визуальному стилю устройства.

{
  "icons": [
    {
      "src": "/android-chrome-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/mask.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "/android-chrome-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}
Файл manifest.webmanifest

Шрифты TTF и OTF — форматы шрифтов, которые обеспечивают широкую совместимость, но имеют больший размер файла. Шрифты WOFF и WOFF2 обеспечивают лучшую степень сжатия и меньший размер файла, что улучшает производительность веб-сайта. WOFF2 — предпочтительный формат для современных браузеров.

<link rel="preload" href="/font.woff2" as="font" type="font/woff2" crossorigin>
Подключение шрифта

Атрибут rel="preload" сообщает браузеру о необходимости приоритетной загрузки указанного ресурса (например, шрифта, скрипта, таблицы стилей или изображения). Это позволяет браузеру начать загрузку ресурса как можно раньше, улучшая время загрузки страницы. Добавление атрибута as к rel="preload" указывает тип ресурса и помогает браузеру оптимизировать процесс загрузки. Типы ресурсов:

Атрибут crossorigin позволяет браузеру правильно обработать запрос к шрифту (или другому ресурсу), если он находится на другом домене или поддомене. Он используется, когда ресурс требует включения анонимного режима CORS (Cross-Origin Resource Sharing).

<link rel="prefetch" href="/next-page.html">  <!-- ускоряет переход к ресурсу, так как он уже загружен в кэш браузера -->

Атрибут rel="prefetch" просит браузер загрузить и кэшировать ресурс в фоновом режиме. Это полезно, если ресурс понадобится на следующей странице, и его нужно заранее кэшировать. Этот тег можно безопасно использовать в любом объёме. Обычно браузеры планируют prefetch с наименьшим приоритетом, поэтому он никому не мешает.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
Подключение шрифта через Google Fonts

При подключении шрифта через Google Fonts можно использовать параметр &display=swap, который автоматически устанавливает font-display: swap. Это обеспечивает мгновенное отображение текста системным шрифтом, пока загружается веб-шрифт.

Атрибут rel="preconnect" указывает браузеру установить соединение с указанным доменом заранее, что сокращает время загрузки ресурсов с этого домена. Это полезно для доменов, с которых загружаются важные ресурсы, такие как шрифты, стили или скрипты. Использование большого количества preconnect может негативно повлиять на производительность, поэтому рекомендуется использовать его только для важных доменов (не более 4-6). Атрибут rel="preconnect" включает функциональность rel="dns-prefetch", поэтому использовать их вместе имеет смысл только тогда, когда нужно:

<link rel="dns-prefetch" href="https://fonts.googleapis.com">  <!-- предварительное разрешение DNS для внешних ресурсов -->

Атрибут rel="dns-prefetch" указывает браузеру выполнить предварительный DNS-запрос для указанного домена. Это сокращает время, необходимое для установления соединения с доменом, когда ресурс с этого домена потребуется в будущем. Использование dns-prefetch полезно для доменов, к которым часто обращаются, но для которых нецелесообразно устанавливать полное соединение заранее (с помощью preconnect).

<link rel="prerender" href="/next-page.html">  <!-- предзагрузка и пререндер страницы -->

Атрибут rel="prerender" указывает браузеру загрузить и отрендерить указанный URL-адрес в фоновом режиме. Когда пользователь переходит на эту страницу, она отображается мгновенно, поскольку уже загружена и отрендерена. Использовать prerender следует с осторожностью, так как это требует значительных ресурсов (трафик, CPU, память) и может негативно повлиять на производительность, если используется для неподходящих страниц. Рекомендуется использовать его только для тех страниц, вероятность посещения которых пользователем очень высока.

Тег <script> используется для подключения JavaScript-файлов к HTML-документу. Тег <script> рекомендуется размещать непосредственно перед закрывающим тегом </body>, чтобы не блокировать отрисовку страницы во время загрузки скриптов. Если необходимо разместить <script> в <head>, следует использовать атрибуты async или defer, чтобы обеспечить асинхронную загрузку и выполнение скриптов:

Ещё один способ — указать атрибут type="module", который сообщает браузеру, что скрипт нужно запустить как модульный; модульные скрипты по умолчанию отложенные. Использование модулей позволяет организовать JavaScript-код в отдельные файлы и использовать import и export для обмена функциональностью между ними.

<script src="/form.js"></script>  <!-- подключение JavaScript файла -->

Атрибут src="путь" указывает путь к файлу. Если в <script> указан атрибут src, то код внутри тега <script> игнорируется.

Тег <noscript> используется для показа пользователю альтернативного контента, если скрипты отключены в браузере или браузер их не поддерживает.

<noscript>Браузер не поддерживает JavaScript</noscript>

Формы

Тег <form> добавляет на страницу форму для заполнения пользователем. При отправке формы на сервер передаются данные, представляющие собой пары имя=значение. Имя — это значение атрибута name, а значения берутся из содержимого, которое ввёл пользователь. Для <input> с типами text и password значение берётся из того, что ввёл пользователь. Для <textarea> значением является текст, который находится между открывающим и закрывающим тегами. Для <select> значением является атрибут value выбранного элемента <option>, а если атрибут value отсутствует, то используется текст между открывающим и закрывающим тегами <option>.

Тег <label> создаёт подпись для элемента формы. Использование <label> обязательно для обеспечения доступности формы для людей с ограниченными возможностями (например, для пользователей скринридеров). <label> связывается с элементом управления формы с помощью атрибута for, значение которого должно совпадать со значением атрибута id элемента формы. Связанный <label> обеспечивает следующие преимущества: текст <label> считывается скринридером, помогая пользователю понять, какое значение нужно ввести в поле; при нажатии на <label> фокус автоматически переходит на связанное поле, что упрощает навигацию по форме. Если дизайнер создал форму без явных <label> для элементов, их всё равно необходимо добавить и скрыть с помощью CSS для обеспечения доступности.

Тег <input> создаёт интерактивные элементы на сайте, такие как текстовое поле, кнопка, ползунок, переключатель и другие.

<form
  id="form-main"
  action="/process"
  method="post"
  enctype="text/plain"
  novalidate>
  <label class="имя_класса" for="top">Подпись для поля</label>  <!-- создание подписи для поля c id="top" -->
  <input type="text" id="top" placeholder="Текст">  <!-- поле для ввода текста -->
  <input type="password" value="Пароль" pattern="[A-Za-z0-9]{8,}">  <!-- поле для ввода пароля -->
  <input type="email" inputmode="email" autocomplete="email" required>  <!-- поле для ввода почты -->
  <input type="search" minlength="4" maxlength="30" inputmode="search">  <!-- поле для поиска -->
  <input type="url" inputmode="url" autofocus>  <!-- поле для ввода адреса веб-страницы -->
  <input type="tel" inputmode="tel">  <!-- поле для ввода телефона -->
  <input type="number" inputmode="numeric" tabindex="1">  <!-- поле для ввода числа -->
  <input type="color">  <!-- поле для выбора цвета -->
  <input type="date">  <!-- поле для выбора даты -->
  <input type="time">  <!-- поле для установки времени -->
  <input type="datetime-local">  <!-- поле для установки даты и времени -->
  <input type="checkbox" value="sugar">  <!-- создаёт флажок или чекбокс -->
  <input type="radio">  <!-- создаёт радиокнопку -->
  <input type="range" min="1" max="100">  <!-- создаёт ползунок для выбора чисел из заданного диапазона -->
  <input type="file" accept=".jpg, video/*" capture="user">  <!-- создаёт кнопку для выбора файла -->
  <input type="button" value="Кнопка">  <!-- создаёт кнопку, но без отправки формы -->
  <input type="submit">  <!-- создаёт кнопку, для отправки формы -->
  <input type="reset">  <!-- создаёт кнопку, для очистки полей -->
  <button>Кнопка</button>  <!-- создаёт кнопку с типом submit -->
</form>
<textarea
  form="form-main"
  spellcheck="false"
  rows="10"
  cols="10">
</textarea>
Формы в HTML

Атрибут for="id_элемента" указывает, с каким элементом работает подпись (значение должно совпадать со значением id элемента).

Глобальный атрибут class="имя_класса" задаёт имя любому элементу и одному элементу можно присвоить несколько классов, разделяя их пробелом.

Атрибут action="/process" указывает путь к файлу скрипта для обработки данных после отправки формы.

Атрибут enctype="значение" определяет вид кодирования данных из формы. Он обязателен, если через форму отправляются файлы. Три варианта:

Атрибут method="значение" определяет HTTP-метод, используемый для отправки данных формы на сервер. Возможные методы:

Атрибут novalidate отключает встроенную валидацию формы браузером. Это полезно, когда требуется реализовать пользовательскую валидацию с помощью JavaScript или когда нужно отправлять форму даже при наличии ошибок валидации (например, для сохранения промежуточных данных).

Атрибут placeholder="текст" создаёт подсказку внутри поля.

Атрибут autocomplete указывает браузеру, что нужно подставить в поле. Основные значения:

Атрибут autofocus указывает браузеру, что при загрузке страницы элемент нужно автоматически взять в фокус.

Атрибут value="..." для тега <input>:

Атрибут inputmode="значение" предоставляет подсказку мобильным браузерам о том, какую клавиатуру следует отображать для данного поля ввода (<input> или <textarea>). Браузер может игнорировать этот атрибут, но его использование улучшает пользовательский опыт на мобильных устройствах. Возможные значения:

Атрибут pattern="выражение" используется для полей ввода <input>, чтобы задать правило для введённого значения в формате регулярного выражения.

Глобальный атрибут tabindex="значение" используется для задания элементам возможности получения фокуса при навигации по сайту с помощью клавиатуры. Атрибут указывает порядок, в котором пользователь перемещается между элементами на странице. Если у элементов одинаковые значения, они следуют в порядке определённом HTML-кодом. Визуальный порядок фокусировки должен совпадать с логическим. Значения:

Атрибут required устанавливает поле формы обязательным для заполнения пользователем.

Атрибут minlength="число" указывает минимальное количество символов, которое должно быть введено в поле.

Атрибут maxlength="число" указывает максимальное количество символов, которое может быть введено.

Глобальный атрибут id используется для уникальной идентификации элемента на странице. Он используется в CSS для стилизации элемента, в JavaScript для доступа к элементу и в атрибуте < for="..."> для связывания подписи с полем формы. Атрибут name используется для идентификации данных, отправляемых на сервер при отправке формы. Значение атрибута name используется в паре имя=значение при формировании запроса на сервер. Хотя значения id и name могут совпадать, это разные атрибуты с разными целями и разной областью применения.

Атрибут disabled отключает интерактивный элемент формы. Отключенные элементы не отправляются вместе с формой.

Атрибут readonly делает поле формы недоступным для редактирования пользователем, но значение поля отображается, может быть скопировано и отправляется вместе с формой. В отличие от атрибута disabled, который полностью отключает поле и не позволяет отправлять его значение на сервер.

Глобальный атрибут hidden скрывает элемент визуально и и от программ чтения с экранов (скринридеров), но элемент остаётся в DOM (Document Object Model), и его значение может быть отправлено на сервер.

Атрибут accept="тип_файла" позволяет указать, какие типы файлов пользователь может прикрепить. Применяется к <input type="file">. Возможные значения:

Атрибут capture="значение" доступен для <input type="file"> и позволяет выбрать для записи фронтальную или основную камеру телефона, а также микрофон. capture учитывает атрибут accept, в котором указан тип файла для загрузки. Значения:

Тег <button> создаёт кнопку. Значение type="submit" отправляет данные из формы на сервер. Значение type="button" обозначает простую кнопку.

Атрибут form связывает поля ввода с определённой формой. Он применяется для тегов: <input>, <textarea> и <select>.

Глобальный атрибут spellcheck включает проверку правописания. Возможные значения:

Атрибуты cols и rows ограничивают количество столбцов и строк в многострочном поле (textarea).

При указании в теге <input> с типом radio атрибута name с одинаковым значением, пользователю предоставляется возможность выбора только одной кнопки:

<form>
  <label for="apple">Apple</label>
  <input id="apple" type="radio" name="product">
  <label for="samsung">Samsung</label>
  <input id="samsung" type="radio" name="product">
</form>

С помощью селектора <select> создаётся раскрывающийся список, в котором пользователь выбирает подходящий вариант:

<form>
  <select multiple size="2">  <!-- селектор выбора -->
    <optgroup label="Группа 1">  <!-- группировка опций внутри выпадающего списка -->
      <option>Опция 1</option>  <!-- создаёт элемент внутри выпадающего списка -->
      <option selected>Опция 2</option>
      <option>Опция 3</option>
    </optgroup>
  </select>
</form>

Выпадающий список в HTML

Тег <optgroup> позволяет сгруппировать опции внутри элемента <select>. Внутри используются один или несколько тегов <option>.

Атрибут multiple даёт возможность выбора нескольких вариантов.

Атрибут size="число" сколько вариантов отображается для выбора пользователю одновременно и имеет смысл только при наличии атрибута multiple.

Атрибут label="Группа 1" отображает имя группы в выпадающем списке и является обязательным атрибутом для тега <optgroup>.

При загрузке страницы по умолчанию отображается первый элемент <option>, но атрибут selected переопределяет этот выбор. Если selected присутствует у нескольких элементов, то будет выбран последний из них.

Тег <fieldset> визуально группирует несколько полей ввода в один набор:

<form>
  <fieldset>  <!-- группирует элементы формы -->
    <legend>Выбор продукта</legend>  <!-- добавляет заголовок -->
    <label>
      <input type="radio" name="product"> Продукт 1
    </label>
    <label>
      <input type="radio" name="product"> Продукт 2
    </label>
  </fieldset>
</form>
Группировка элементов формы в HTML

Тег <legend> добавляет заголовок в <fieldset>.

Тег <datalist> содержит предопределенные варианты выбора для пользователей.

<form>
  <input type="text" list="fruits">
  <datalist id="fruits">  <!-- набор опций для раскрывающегося списка -->
    <option value="Apple">
    <option value="Cherry">
  </datalist>
</form>
Список опций для элементов ввода в HTML

Атрибут list="значение" связывает <input> с элементами <datalist> через его id. Значения у list и id должны совпадать.

Интерактив

Тег <details> создаёт раскрывающийся блок контента («аккордеон»). По умолчанию содержимое блока скрыто, но становится видимым при нажатии на элемент <summary>. Внутри <details> можно размещать любые элементы, включая другие теги и интерактивные элементы. Атрибут open делает блок открытым по умолчанию при загрузке страницы.

Тег <summary> — это заголовок раскрывающегося списка. Он должен быть первым дочерним элементом <details>.

<details open>  <!-- создаёт «аккордеон» -->
  <summary>Заголовок для раскрывающегося списка</summary>  <!-- заголовок «аккордеона» -->
  <p>Текст</p>
</details>

Раскрывающийся блок в HTML

Тег <progress> создаёт индикатор выполнения задач и подходит для отображения индикатора загрузки.

<progress
max="100"
value="70">
</progress>
Прогресс-бар в HTML

Атрибут max="число" указывает максимальное значение прогресс-бара.

Атрибут value="число" показывает, на какое значение прогресс-бар заполнен.

<iframe> — это элемент, который даёт возможность встраивать HTML-документ из внешнего источника. Чаще всего такой документ обладает интерактивными функциями, например, может быть картой, видео или публикацией из социальной сети. Данный элемент обычно называют фреймом.

<iframe
src="URL"
allow="allow-features"
allowfullscreen
sandbox>
</iframe>

Атрибут src="url" указывает URL-адрес файла. Для ускорения загрузки сайта рекомендуется устанавливать атрибут src с помощью JavaScript после загрузки основного содержимого.

Атрибут allow="..." определяет доступные функции для фрейма: доступ к микрофону, камере, акселерометру, геолокации.

Атрибут allowfullscreen разрешает запуск фрейма в полноэкранном режиме.

Атрибут sandbox задаёт повышенные настройки безопасности.

Тег <meter> нужен для визуального отображения числового значения в определённом диапазоне. Внутри него можно добавлять текст — это рекомендуется для поддержки старых браузеров. Тег используется для отображения доступного места на диске, результата голосования. Для <meter> всегда известны минимальные и максимальные значения, и он не используется для диапазонов с неизвестным максимальным значением.

<meter value="70" min="0" max="100">70%</meter>

Семантика

✒️ Семантическая разметка — HTML-код, в котором теги подобраны гармонично и по смыслу. Другими словами, мы сообщаем браузерам, специальным программам и другим вспомогательным инструментам, как следует интерпретировать различные элементы.

Тег <nav> предназначен для выделения основной или дополнительной навигации. Желательно, чтобы в разметке присутствовал хотя бы один тег <nav>. Обычно это меню сайта. Не каждая группа ссылок на странице оборачивается в <nav>, например, блок со вспомогательными ссылками в «подвале» сайта. Поле поиска, хотя и является элементом навигации по сайту, обычно размещается за пределами тега <nav>. Меню «хлебные крошки» создаются с использованием тегов <nav>, <ol> и <li>.

Размещение заголовка <h> и навигации <nav> внутри других семантических элементов уточняет их контекст: в <header> (на верхнем уровне сайта) они представляют заголовок и навигацию сайта в целом; внутри <main> они относятся к текущей странице; внутри <article> или <section> они относятся к соответствующему разделу контента.

Для главной навигации по странице рекомендуется добавить заголовок <h> и скрыть его через стили.

<nav>...</nav>  <!-- навигация страницы или раздела -->

Тег <header> используется как «шапка» сайта или отдельного блока. Когда он находится на верхнем уровне сайта, его роль — ориентир (banner). Когда <header> вложен в <main>, <article> или <section>, он идентифицируется как заголовок раздела.

<header>...</header>  <!-- «шапка» сайта или раздела -->

Тег <main> используется для обозначения основного контента страницы, который является уникальным для этой страницы и не повторяется на других страницах сайта. На странице должен быть только один видимый элемент <main>. Если на странице используется несколько тегов <main>, то остальные должны быть скрыты. Тег <main> обычно располагается между тегами <header> и <footer> и является прямым потомком тега <body>.

<main>...</main>  <!-- основная часть контента -->

Тег <aside> используется для обозначения контента, который связан с основным контентом страницы, но не является его неотъемлемой частью. Это может быть дополнительная информация, навигация, реклама, виджеты социальных сетей. Контент в <aside> должен быть понятен в контексте основного контента, но его отсутствие не должно существенно влиять на понимание основного содержания страницы.

<aside>...</aside>  <!-- косвенная часть контента -->

Тег <footer> используется для выделения нижней части страницы или окончания смыслового блока. На странице может быть несколько тегов <footer>.

<footer>...</footer>  <!-- «подвал» сайта или раздела -->

Тег <section> используется для выделения независимых функциональных блоков, обычно крупных, которые относятся к странице. <section> представляет собой логический раздел, который можно назвать одним словом или словосочетанием: «программа обучения», «каталог», «наши преимущества». Логическому разделу можно дать имя, но вынести его на другой сайт нельзя. Если приходят в голову названия, которые указывают на его положение на странице («шапка», «подвал») или перечисления («новости и галерея», «фильтры и товары»), то это скорее всего структурный раздел, и тег <section> не подходит. Он используется для создания каталога товаров, блока с новостями, описания компании, адреса с картой. Тег <section> можно использовать внутри <article>, если там нужно выделить отдельный смысловой блок. Внутри <section> рекомендуется использовать заголовок.

<section>...</section>  <!-- независимый смысловой блок с контентом -->

Тег <article> используется для выделения самодостаточного, независимого блока контента, который может быть переиспользован или распространён отдельно от остальной части страницы. Примеры: статья в блоге, новостная заметка, карточка товара, комментарий пользователя. Каждый <article> должен иметь собственный заголовок.

<article>...</article>  <!-- самодостаточный блок -->

Тег <div> группирует или оборачивает другие элементы и семантически нейтрален.

<div contenteditable>блок текста</div>  <!-- создаёт блок для добавления стилей CSS -->

Глобальный атрибут contenteditable позволяет пользователю редактировать содержимое элемента непосредственно в браузере. Возможные значения:

С помощью тега <span> можно выборочно стилизовать часть текста. Он также семантически нейтрален.

<span>текст</span> <!-- применяется к кускам и элементам страницы для добавления к ним стилей CSS -->

Тег <cite> используется для указания ссылки на источник информации, а также названий статей, телешоу, компьютерных программ, книг, картин, скульптур и других объектов искусства. В теге <cite> и атрибуте cite не указывают автора.

<cite>сайт Conspect</cite>  <!-- источник цитаты -->

При цитировании содержимого блока из другого источника, он оборачивается в тег <blockquote>. Не рекомендуется вкладывать <blockquote> внутрь тега <figure> из-за нежелательной озвучки скринридерами всех вложенных элементов.

<blockquote cite="сайт Conspect">Цитата</blockquote>  <!-- большой блок с цитатой -->

Атрибут cite="..." указывает источник цитаты, но не отображается для пользователя.

Тег <q> используется для выделения коротких цитат непосредственно в тексте. Текст оборачивается в кавычки.

<q>текст</q>  <!-- короткая цитата -->

Тег <dfn> используется для обозначения терминов или расшифровки сокращений. Оборачивается только термин, а его определение должно содержаться в ближайшем родительском теге <p>, <dl>, <dt>, <dd> или <section>.

<p>
  <dfn>Термин</dfn>  
  Определение
</p>

Тег <abbr> используется для обозначения аббревиатур и акронимов. Атрибут title в теге <abbr> предназначен для отображения полного написания аббревиатуры или расшифровки сокращения, что важно для доступности и улучшения пользовательского опыта.

<abbr title="Это международный стандарт">ISO 8601</abbr>  <!-- аббревиатура -->

В теге <address> размещают контактную информацию о человеке, людях или организации: адрес сайта, блок со ссылками на социальные сети в подвале сайта, телефоны в «шапке» страницы, имена авторов статей в блоге. Тег не используется для описания почтового адреса, если он не является частью контактной информации.

<address>Адрес организации</address>  <!-- адрес -->

Тег <time> предназначен для обозначения времени и дат в машиночитаемом формате.

<time datetime="2024-11-01T08:52">8:52 утра</time>

Атрибут datetime="..." указывает дату и время в машиночитаемом формате ISO 8601.

Теги <figure> и <figcaption> используются для связывания медиаконтента (изображения, видео, аудио, код и т.д.) с подписью.

Тег <figure> используется для вставки на страницу изображений, кода, аудио, видео, уравнений или таблиц, а также для добавления подписей и описания к этому контенту.

Тег <figcaption> используется для добавления подписи к элементу <figure> и должен быть первым или последним потомком внутри <figure>, располагаясь после элементов <img> или других медиа. Подпись <figcaption> должна отличаться от описания в атрибуте alt.

<figure>
  <img>
  <figcaption>Подпись</figcaption>  <!-- подпись к элементу <figure> -->
</figure>

Код стайл

Вложенный элемент размещают на два или четыре пробела правее родительского элемента.

Открывающий и закрывающий теги пишутся на одной вертикальной линии друг под другом.

Для каждого блочного, табличного или списочного элемента выделяется новая строка.

Для атрибутов используют двойные кавычки, а не одинарные.

Атрибут type больше не требуется при подключении CSS- и JavaScript-файлов (например, <link rel="stylesheet" href="style.css"> и <script src="script.js"></script>), так как браузеры автоматически определяют тип контента.

Для улучшения читаемости кода рекомендуется придерживаться определённого порядка атрибутов в HTML-тегах. Предлагаемый порядок:

  1. class.
  2. id, name.
  3. data-*.
  4. src, for, type, href.
  5. title, alt.
  6. aria-*, role.

Для значений атрибута class:

Наверх