Форматирование текста
Внутри абзаца отдельные слова часто нужно выделить: важное предупреждение, термин, старую цену, кусок кода. Для этого есть строчные элементы — они не начинают новую строку, а оформляют часть текста внутри неё.
Важное и ударение
<strong> отмечает важный текст, <em> (emphasis) — смысловое ударение, с которым фразу произносят иначе:
<p><strong>Внимание:</strong> вход только по записи.</p>
<p>Я просил <em>чёрный</em> чай, а не зелёный.</p>Браузер показывает <strong> жирным, а <em> — курсивом.
Жирный и курсив без особого смысла
Теги <b> и <i> тоже делают текст жирным и курсивным, но не добавляют важности. <b> подходит для ключевых слов, <i> — для терминов, иностранных слов, названий:
<p>В рецепт входят <b>мука</b>, <b>яйца</b> и <b>сахар</b>.</p>
<p>Блюдо называется <i>рататуй</i> и пришло из Прованса.</p>Выбирайте по смыслу: программа чтения с экрана может произнести <strong> с нажимом, а <b> — обычным голосом.
Пометки в тексте
| Тег | Что означает | Как выглядит |
|---|---|---|
<mark> | Выделение, как маркером | Жёлтый фон |
<small> | Примечание, мелкий шрифт | Мельче |
<del> | Удалённый текст | Зачёркнут |
<ins> | Добавленный текст | Подчёркнут |
<sub>, <sup> | Нижний и верхний индекс | Ниже и выше строки |
<p>Найдено: «купить <mark>кофе</mark> в зёрнах».</p>
<p>Цена: <del>$12</del> <ins>$9</ins></p>
<p>Вода — H<sub>2</sub>O, площадь — 20 м<sup>2</sup>.</p>
<p><small>Предложение действует до конца месяца.</small></p>Код и клавиши
<code> отмечает фрагмент кода, <kbd> — клавишу или сочетание клавиш. Браузер показывает их моноширинным шрифтом, где все буквы одной ширины:
<p>Команда <code>git status</code> показывает изменения.</p>
<p>Нажмите <kbd>Ctrl</kbd> + <kbd>S</kbd>, чтобы сохранить файл.</p>Предформатированный текст
<pre> сохраняет все пробелы и переносы строк ровно так, как они написаны в коде. Внутрь него кладут <code>, когда показывают программу:
<pre><code>function hello() {
return "Привет";
}</code></pre>Обратите внимание: отступы и переносы остались на месте, хотя в обычном абзаце браузер бы их схлопнул.
Сокращения и короткие цитаты
<abbr> поясняет аббревиатуру — расшифровка появится при наведении курсора. <q> — короткая цитата внутри абзаца, кавычки браузер добавит сам:
<p><abbr title="Каскадные таблицы стилей">CSS</abbr> отвечает за внешний вид.</p>
<p>Дейкстра писал: <q>Простота — залог надёжности</q>.</p>Частая ошибка
Не используйте теги ради внешнего вида: <strong> для заголовка или <sup> для мелкого текста. Если в абзаце нужно просто покрасить или увеличить слово, это задача CSS. Для этого есть нейтральный строчный тег <span> без собственного смысла:
<p>Сегодня <span style="color: crimson;">скидка 20%</span> на всё меню.</p>