HTML-теги для форматирования текста
Теги форматирования текста HTML: семантические strong и em против презентационных b и i, почему это важно и примеры.
HTML предоставляет набор строчных элементов для форматирования текста. Они делятся на две группы, и понимание разницы между ними — самое важное на этой странице.
- Семантические (логические) теги описывают, что означает текст — что слово важно, выделено, является определяемым термином или аббревиатурой. Примеры:
<strong>,<em>,<mark>,<abbr>. - Презентационные (физические) теги описывают, как текст должен выглядеть — жирным, курсивом, подчёркнутым — не говоря ничего о его смысле. Примеры:
<b>,<i>,<u>,<small>.
Почему это различие важно
Два элемента могут выглядеть одинаково в браузере, но нести совершенно разный смысл:
- Скринридеры и доступность. Скринридер может изменить тон голоса для
<strong>и<em>, сигнализируя важность и выделение слепому пользователю. Он не делает этого для<b>и<i>, которые молчат и являются сугубо визуальными. - SEO. Поисковые системы придают значение семантической разметке. Обёртывание ключевой фразы в
<strong>сообщает поисковым роботам о её важности;<b>лишь меняет шрифт. - Сопровождаемость. Смысл остаётся корректным при изменении CSS. Если впоследствии вы решите, что важный текст должен быть красным вместо жирного,
<strong>по-прежнему означает «важно», и вы просто переопределяете его стиль.
Хорошее практическое правило: сначала используйте семантический тег. Презентационный тег используйте только тогда, когда вам нужен конкретный визуальный эффект без какого-либо значения.
Рассмотрим каждый тег форматирования подробно.
Теги <h1>-<h6>
Теги <h1>-<h6> используются для определения заголовков HTML. В HTML существует 6 уровней заголовков: <h1> определяет наиболее, а <h6> — наименее важные заголовки.
Пример тегов HTML <h1>-<h6>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>Результат
Теги <b> и <strong>
Оба по умолчанию отображаются жирным шрифтом, но в HTML5 они имеют разные значения.
- Тег
<strong>— семантический тег, который помечает текст как имеющий большую важность, серьёзность или срочность — содержимое, которое читатель не должен пропустить. - Тег
<b>— презентационный тег, который помечает текст как стилистически выделенный из окружающего текста без передачи дополнительной важности — например, название продукта, ключевое слово в индексе или начальное предложение статьи.
Что выбрать? Если жирное начертание служит для обозначения важности, используйте <strong>. Если жирный нужен лишь для типографического соглашения без дополнительного смысла, используйте <b> (или, что лучше, стилизуйте текст через CSS).
Пример тегов HTML <b> и <strong>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>We use the <strong> tag to highlight the importance <strong> of this part of the text</strong>.</p>
<p>The <b> tag is a physical tag that stands for <b>bold text</b>.</p>
</body>
</html>Теги <i> и <em>
Оба по умолчанию отображаются курсивом, но в HTML5 они имеют разные значения.
- Тег
<em>— семантический тег, обозначающий смысловое ударение — такое, которое меняет значение предложения («Я люблю HTML» против «Я люблю HTML»). Скринридер может произнести его с дополнительным ударением. - Тег
<i>— презентационный тег для текста в альтернативном стиле или тоне: технический термин, иностранное выражение, мысль, название корабля или другое содержимое, традиционно набираемое курсивом, — без подразумевания выделения.
Что выбрать? Если вы выделяете слово так, чтобы при чтении вслух на него падало ударение, используйте <em>. Для типографического курсива без смыслового выделения используйте <i>.
Пример тегов HTML <i> и <em>:
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph</p>
<p>The important part of the text is defined <em> in italic</em>.</p>
<p><i>Lorem ipsum</i>, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. </p>
</body>
</html>Тег <pre>
Тег <pre> используется для определения предварительно отформатированного текста. Браузеры отображают заключённый в него текст с сохранением пробелов и переносов строк.
Пример тега HTML <pre>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<pre>Spaces
and line breaks
within this element
are shown as typed.
</pre>
</body>
</html>Тег <mark>
Тег <mark> используется для выделения части текста в документе как помеченной или подсвеченной для справочных целей.
Пример тега HTML <mark>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Learn the HyperText Markup Language on <mark>W3Docs.com</mark>.</p>
</body>
</html>Результат
Тег <small>
Тег <small> уменьшает размер шрифта текста на один размер меньше базового размера шрифта документа (например, с среднего до малого или с очень крупного до крупного). Обычно тег содержит элементы второстепенной важности: уведомления об авторских правах, побочные комментарии или юридические уведомления.
Пример тега HTML <small>:
<!DOCTYPE html>
<html>
<head>
<title>Usage of the SMALL tag</title>
</head>
<body>
<p>The interest rate is only 10%*</p>
<small>* per day</small> /
</body>
</html>Теги <del> и <s>
Тег <del> обозначает часть текста, которая была удалена из документа. Браузеры отображают этот текст с зачёркиванием.
Пример тега HTML <del>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p> She likes <del>violets</del> snowdrops․</p>
</body>
</html>Тег <s> помечает текст, который больше не является точным или актуальным — например, старую цену рядом со сниженной. (Примечание: <s> не предназначен для обозначения удалений в редактируемом документе; для этого используйте <del>.)
Пример тега HTML <s>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p><s>I am studying in high school.</s></p>
<p>I am studying in a university.</p>
</body>
</html>Содержимое обоих тегов отображается зачёркнутым. Однако, несмотря на визуальное сходство, эти теги не могут заменять друг друга: <del> означает «удалено при редактировании», а <s> означает «больше не актуально».
Теги <ins> и <u>
Тег <ins> определяет текст, который был вставлен (добавлен) в документ, обычно как парный к <del>. Содержимое по умолчанию отображается подчёркнутым.
Пример тега HTML <ins>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>She likes <del>violets</del> <ins>snowdrops</ins>․</p>
</body>
</html>Результат
В HTML5 тег <u> представляет невербальную, нетекстовую аннотацию — текст, помеченный определённым стилем (по умолчанию подчёркиванием), который несёт смысл, явно не выраженный в самом тексте. Типичное применение — обозначение слова с орфографической ошибкой или выделение имён собственных в китайском тексте. Избегайте <u> для простого декорирования, так как пользователи могут принять подчёркивание за ссылку; вместо этого используйте CSS text-decoration.
Пример тега HTML <u>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Here we used <u>the <u> tag</u>.</p>
</body>
</html>Теги <sub> и <sup>
Тег <sub> определяет подстрочный текст. Подстрочный текст располагается ниже базовой линии остальных символов строки и имеет меньший размер шрифта. Тег <sup> определяет надстрочный текст, который располагается немного выше обычной линии текста и имеет относительно меньший размер. Базовая линия проходит через верхний или нижний край символов.
Пример тегов HTML <sub> и <sup>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>The formula of water is H<sub>2</sub>O, and the formula of alcohol is C<sub>2</sub>H<sub>5</sub>OH </p>
<p>E = mc<sup>2</sup>, where E — rest energy, m — mass, c — the speed of light. </p>
</body>
</html>Результат
Тег <dfn>
Тег <dfn> отмечает определяющее вхождение термина — место в тексте, где термин определяется, а не каждое место, где он встречается. Это семантический тег; браузеры по умолчанию отображают его курсивом, но это стилистическое оформление является случайным и может быть изменено с помощью CSS.
Пример тега HTML <dfn>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p><dfn>HTML</dfn> (HyperText Markup Language ) — The standardized markup language for documents on the World Wide Web. Most web pages contain a description of the markup in the language HTML</p>
</body>
</html>Другие семантические текстовые элементы
HTML имеет несколько других строчных тегов, добавляющих смысл к конкретным видам текста. Они не предназначены для стилизации — каждый описывает что представляет собой текст:
<abbr>— аббревиатура или акроним, например<abbr title="HyperText Markup Language">HTML</abbr>. Атрибутtitleпредоставляет полную расшифровку при наведении.<cite>— название цитируемого произведения (книги, фильма, статьи и т. д.).<q>— короткая строчная цитата; браузер автоматически добавляет кавычки.<code>— фрагмент программного кода, отображаемый моноширинным шрифтом.<kbd>— ввод с клавиатуры, который пользователь должен набрать, например Ctrl + C.<samp>— образец вывода программы или системы.<var>— переменная в математическом выражении или программном контексте.
Пример семантических текстовых элементов:
<!DOCTYPE html>
<html>
<body>
<p>The <abbr title="HyperText Markup Language">HTML</abbr> spec is huge.</p>
<p>As stated in <cite>The HTML Handbook</cite>:
<q>Use the right element for the job.</q></p>
<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to run <code>document.title</code>.</p>
<p>The program printed <samp>Hello, world!</samp> where <var>x</var> = 5.</p>
</body>
</html>Устаревшие теги — не используйте
Ряд старых тегов форматирования был удалён из стандарта HTML. Они могут по-прежнему отображаться в браузерах, но использовать их не следует — заменяйте оформление с помощью CSS, а смысл — семантическими тегами:
| Устаревший тег | Что делал | Используйте вместо |
|---|---|---|
<font> | Задавал цвет, размер, гарнитуру | CSS color, font-size, font-family |
<center> | Центрировал содержимое | CSS text-align: center или margin: auto |
<tt> | Телетайп / моноширинный текст | <code>, <kbd>, <samp> или CSS font-family: monospace |
<strike> | Зачёркнутый текст | <del> / <s> или CSS text-decoration: line-through |
<big> | Увеличенный текст | CSS font-size |
Структурные теги: <p>, <br> и <hr>
Следующие три тега не являются тегами форматирования текста — они структурируют поток содержимого, а не стилизуют слова в строке, — но тесно связаны с темой и заслуживают рассмотрения здесь.
Тег <p> определяет абзац. Браузеры автоматически добавляют отступ 1em до и после каждого абзаца.
Пример тега HTML <p>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>The first paragraph</p>
<p>The second paragraph</p>
</body>
</html>Тег <br> вставляет одиночный перенос строки. В отличие от тега <p>, перед строкой не добавляется пустой отступ.
Пример тега HTML <br>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document.</title>
</head>
<body>
<h1>How to use the <br /> tag</h1>
<p> We can insert the <br /> tag inside the paragraph, <br /> to transfer a part of the text to another line if necessary.</p>
</body>
</html>В HTML5 тег <hr> обозначает тематическую смену между элементами уровня абзаца на HTML-странице. В предыдущих версиях HTML он использовался для визуального рисования горизонтальной линии, разделяющей содержимое. В HTML5 элемент приобрёл семантическое значение.
Пример тега HTML <hr>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Football</h1>
<p>A team sport involving kicking a ball to score a goal. </p>
<hr />
<h1>Basketball</h1>
<p>A game that is played between two teams of five players.</p>
</body>
</html>