Форматирование текста HTML
В HTML есть несколько элементов для придания тексту особого значения, например, жирного, курсивного или выделенного текста.
Пример
Жирный, курсивный и подстрочный/надстрочный текст.
Результат: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Введение в форматирование</title>
</head>
<body>
<p><b>Этот текст жирный</b></p>
<p><i>Этот текст курсивный</i></p>
<p>Это <sub>подстрочный</sub> и <sup>надстрочный</sup> текст</p>
</body>
</html>
Элементы форматирования HTML
Элементы форматирования показывают особые типы текста: <b> для жирного, <strong> для важного текста, <i> для курсива, <em> для выделенного смыслового текста, <mark> для отмеченного текста, <small> для более мелкого текста, <del> для удалённого текста, <ins> для вставленного текста, <sub> для подстрочного индекса и <sup> для надстрочного индекса.
Элементы HTML <b> и <strong>
Элемент <b> делает текст жирным, не придавая ему дополнительной значимости. Элемент <strong> отмечает текст как важный, и его содержимое также обычно отображается жирным.
Жирный текст
Жирный текст с <b>.
Результат: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Жирный</title>
</head>
<body>
<b>Этот текст жирный</b>
</body>
</html>
Важный текст
Важный текст с <strong>.
Результат: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Strong</title>
</head>
<body>
<strong>Этот текст важен!</strong>
</body>
</html>
Элементы HTML <i> и <em>
Элемент <i> отмечает текст в альтернативном тоне или настроении, обычно отображаемый курсивом; часто используется для технического термина, фразы на другом языке, мысли или названия судна. Элемент <em> отмечает выделенный по смыслу текст, тоже обычно курсивом; программа чтения с экрана произнесёт текст <em> с речевым ударением.
Курсивный текст
Курсивный текст с <i>.
Результат: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Курсив</title>
</head>
<body>
<i>Этот текст курсивный</i>
</body>
</html>
Выделенный текст
Выделенный текст с <em>.
Результат: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Выделенный текст</title>
</head>
<body>
<em>Этот текст выделен</em>
</body>
</html>
Элемент HTML <small>
Элемент <small> делает текст меньше.
Пример
Более мелкий текст с <small>.
Результат: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Мелкий текст</title>
</head>
<body>
<small>Это немного меньший текст.</small>
</body>
</html>
Элемент HTML <mark>
Элемент <mark> отмечает или выделяет текст.
Пример
Выделенное слово с <mark>.
Результат: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Выделение маркером</title>
</head>
<body>
<p>Не забудь купить <mark>молоко</mark> сегодня.</p>
</body>
</html>
Элемент HTML <del>
Элемент <del> отмечает текст, удалённый из документа. Браузеры обычно перечёркивают его.
Пример
Удалённый текст с <del>.
Результат: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Del</title>
</head>
<body>
<p>Мой любимый цвет — <del>синий</del> красный.</p>
</body>
</html>
Элемент HTML <ins>
Элемент <ins> отмечает текст, вставленный в документ. Браузеры обычно подчёркивают его.
Пример
Удалённый и вставленный текст вместе.
Результат: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ins</title>
</head>
<body>
<p>Мой любимый цвет — <del>синий</del> <ins>красный</ins>.</p>
</body>
</html>
Элемент HTML <sub>
Элемент <sub> создаёт подстрочный текст, который располагается на половину символа ниже обычной строки и иногда мельче. Он полезен, например, для химических формул, таких как H2O.
Пример
Подстрочный текст с <sub>.
Результат: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sub</title>
</head>
<body>
<p>Это <sub>подстрочный</sub> текст.</p>
</body>
</html>
Элемент HTML <sup>
Элемент <sup> создаёт надстрочный текст, который располагается на половину символа выше обычной строки и иногда мельче. Он полезен, например, для сносок.
Пример
Надстрочный текст с <sup>.
Результат: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sup</title>
</head>
<body>
<p>Это <sup>надстрочный</sup> текст.</p>
</body>
</html>
Элементы форматирования текста HTML
Краткий справочник тегов форматирования: <b> жирный текст, <em> выделенный текст, <i> альтернативный тон или настроение, <small> более мелкий текст, <strong> важный текст, <sub> подстрочный индекс, <sup> надстрочный индекс, <ins> вставленный текст, <del> удалённый текст, а <mark> отмеченный или выделенный текст.