1. Разметка текста, часть 2

1.1. Тег <dl>

Тег <dl> (description list) это контейнер для списка пар терминов (теги <dt>) и их описаний (определений) (теги <dd>). Используется для разметки списка определений, например при создании глоссария, телефонного справочника и т. п.

<dl>
  <dt>JPEG</dt>
  <dd>
    Большие файлы не требующие прозрачного фона или анимации. Этот формат
    идеален для красочных фотореалистичных фотографий, так как они могут
    содержать миллионы цветов.
  </dd>

  <dt>PNG</dt>
  <dd>
    Имеет дополнительный параметр для описания прозрачности - альфа канал.
    Подходит для изображений, фон которых должен быть прозрачный или
    одноцветный. Используется для иконок и декоративных элементов.
  </dd>

  <dt>webP</dt>
  <dd>
    Формат заменяющий PNG и JPEG, но еще с неполной поддержкой в браузерах. При
    равном качестве изображения, сжатые файлы будут меньше PNG и JPEG в среднем
    на 25%.
  </dd>
</dl>

1.2. Тег <span>

Универсальный контейнер для текстового контента, например отдельных слов, частей слов или целых фраз внутри текстового массива. Аналогично тегу <div>, не имеет никакого семантического значения и используется для дополнительной стилизации.

<p>
  Тег <span class="accent">div</span> это универсальный контейнер для
  группировки контента с последующей стилизацией.
</p>

1.3. Тег <pre>

По умолчанию браузер игнорирует переносы строк и более одного пробела подряд. Этот тег позволяет добавить преформатированный текст с принудительными переносами строк для визуального форматирования. Например разметка текста песни или стихотворения.

<pre>
  А ты когда-то слушал тишину?
  Как жаль, что ничего ты не услышал,
  Лишь тронь её беззвучную струну,
  И ты поймёшь, что можно даже тише.
</pre>

<pre>
  А ты когда-то спорил с тишиной?
  И не пытайся, я однажды спорил,
  Как будто смыло штормовой волной,
  Противоречия всех моих историй.
</pre>

<pre>
  А ты когда-то видел тишину?
  Как идёт дождь, или летают птицы,
  А может видел ночью синеву,
  Или улыбку на любимых лицах.
</pre>

1.4. Теги <sup> и <sub>

Предназначены для отображения символов в верхнем (<sup>, сокращение от superscript) и нижнем (<sub>, сокращение от subscript) индексе. Например для разметки несложных математических или химических формул.

<p>Формула воды H<sub>2</sub>O</p>

<p>Общая площадь помещения 150м<sup>2</sup>.</p>

<p>Решите уравнение a<sup>3</sup>+a<sup>2</sup>=4</p>

1.5. Тег <time>

Дату и время можно написать просто текстом, но лучше использоват специальный тег <time>. Дата для человека это текст внутри тега, а для машины - значение атрибута datetime в формате ISO 8601.

<p>
  Последние новости на <time datetime="2019-12-14">14 декабря 2019 года</time>.
</p>

<p>
  Заседание состоялось в <time datetime="2018-07-14T11:30">11:30 утра</time>.
</p>

Браузер отобразит только текст внутри тега, а значение атрибута datetime нет. Человек увидит понятный текст, а асистивная технология прочитает атрибут datetime и получит точное значение в нужном формате.

1.6. Тег <address>

Предназначен для хранения контактной информации об авторе статьи, блока информации или веб-страницы в целом. Контактная информация может быть в любой подходящей форме, например физический адрес, адрес электронной почты, ссылка на сайт, номер телефона, тег соцсети.

<address>
  г. Киев, <br />
  Бульвар Леси Украинки, д. 26, <br />
  4й этаж офис 427
</address>

<address>
  <a href="mailto:[email protected]">[email protected]</a>
  <a href="tel:+1112223344">(111) 222-33-44</a>
</address>

Обратите внимание на тег <br>, он используется для разметки массива текста с принудительными переносами строк для визуального форматирования. Например разметка одной строки адреса в несколько строк.

:::warning Внимание

Тег <br/> (сокращение от line break) не используется для того чтобы принудительно добавить разрывы строки между тегами или разбить массив текста на абазцы.

:::

1.7. Теги <strong> и <b>

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

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

<p>
  <strong>Внимание!</strong> Заканчивается срок подписки.
  <strong>Учётная запись будет приостановлена.</strong> Пожалуйста продлите
  подписку или свяжитесь со службой поддержки.
</p>

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

:::note Интересно

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

:::

1.8. Теги <em> и <i>

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

Тег <em> (сокращение от emphasis) семантически выделяет текст на который сделан особый акцент, меняющий смысл фразы. Например можно выделить сарказм.

<p>Я <em>в полном восторге</em> когда задерживают зарплату!</p>

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