Примечание

Двойной дефис внутри комментария (--) воспринимается как часть комментария и соответственно его наличие приводит к ошибке при валидации документа.

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

Форматирование текста — средства его изменения, такие как выбор начертания шрифта и использование эффектов, позволяющих менять вид текста. В табл. 2перечислены основные теги, которые применяются для изменения оформления текста.

Табл. 2. Теги для форматирования текста
Код HTML	Описание	Пример
<b>Текст</b>	Жирное начертание текста	Текст
<i>Текст</i>	Курсивное начертание текста	Текст
<sup>Текст</sup>	Верхний индекс	e=mc2
<sub>Текст</sub>	Нижний индекс	H2O
<pre>Текст</pre>	Текст пишется как есть, включая все пробелы	Текст
<em>Текст</em>	Курсивный текст	Текст
<strong>Текст</strong>	Жирное начертание текста	Текст

Любые теги форматирования текста можно использовать совместно друг с другом. Чтобы сделать текст одновременно жирным и курсивным шрифтом используется сочетание тегов <b> и <i> (пример 1). Их порядок в данном случае не важен.

Пример 1. Жирный курсивный текст

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Текст</title>

</head>

<body>

<p>Он словно вырезан из <b>камня</b>, стоек и неподвижен в отличие от его противников.

<i>Дух и жизненная сила</i> в нём достигла <b><i>совершенства</i></b>.

Но вот беда — никто не смеет принять его вызов.</p>

</body>

</html>

Результат данного примера показан на рис. 4.

Рис. 4. Вид курсивного жирного начертания текста

Использование тегов <sup> и <sub> сдвигает текст относительно базовой линии и уменьшает размер шрифта (пример 2).

Пример 2. Создание нижнего индекса

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Текст</title>

</head>

<body>

<p><b>Формула изумруда:</b>

<i>Be₃Al₂(SiO₃)₆</i></p>

</body>

</html>

Результат данного примера показан на рис. 5.

Рис. 5. Нижний индекс в тексте

Теги <strong> и <em> выполняют те же функции, что теги <b> и <i>, но написание последних короче, привычней и удобней.

Следует отметить, что теги <b> и <strong>, также как <i> и <em> являются не совсем эквивалентными и заменяемыми. Первый тег <b> — является тегом физической разметки и устанавливает жирный текст, а тег <strong> — тегом логической разметки и определяет важность помеченного текста. Такое разделение тегов на логическое и физическое форматирование изначально предназначалось, чтобы сделать HTML универсальным, в том числе не зависящим от устройства вывода информации. Теоретически, если воспользоваться, например, речевым браузером, то текст, оформленный с помощью тегов <b> и <strong>, будет отмечен по-разному. Однако получилось так, что в популярных браузерах результат использования этих тегов равнозначен.