Вид текста на экране зависит от того, какие HTML теги были использованы для его форматирования. Теги форматирования делятся на две категории: теги физической разметки, которые отвечают за стилевое оформление (жирное начертание, курсив, шрифт и т.д.) текста, и теги логической разметки, которые несут смысловую нагрузку (например, дают понять поисковым системам по каким словам необходимо ранжировать веб-страницу).
Рассмотрим подробно теги форматирования и объясним нюансы их применения.
Теги <h1>-<h6>
Теги <h1>-<h6> используются для структурирования HTML заголовков. В HTML используются 6 уровней заголовков, от <h1> до <h6>. <h1> используется для обозначения самого важного, а <h6> наименее важного заголовков.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок окна веб-страницы </title>
</head>
<body>
<h1>Заголовок первого уровня</h1>
<h2>Заголовок второго уровня</h2>
<h3>Заголовок третьего уровня</h3>
<h4>Заголовок четвертого уровня</h4>
<h5>Заголовок пятого уровня</h5>
<h6>Заголовок шестого уровня</h6>
</body>
</html>
Результат
![Заголовки](/uploads/media/default/0001/02/650068a6872361812de8042bb66bc61edecccf77.png)
Теги <b> и <strong>
HTML теги <b> и <strong> задают полужирное начертание шрифта. Разница между ними заключается в том, что тег <b> является тегом физической разметки, и выделяет текст без акцента на его важность. Тег <strong> же определяет текст, которому придают особую важность. Содержимое тега имеет большой вес для поисковиков, а устройства, считывающие с экрана, выделяют его определенной интонацией.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок окна веб-страницы</title>
</head>
<body>
<p>Мы использовали тег <strong>, чтобы выделить <strong> этот важный фрагмент текста</strong>.</p>
</body>
</html>
Результат
![Заголовок окна веб-страницы](/uploads/media/default/0001/02/f276ee95347a30406ad2d073a0aab95047e264a5.png)
Теги <i> и <em>
Теги <i> и <em> задают курсивное начертание шрифта. Тег <i> текст является элементом физической разметки, то есть вложенный текст отличается только визуально и не воспринимается как важный браузерами и поисковыми машинами. Тег <em> экспрессивно-эмоционально выделяет фрагмент текста.Пример
<!DOCTYPE html>
<html>
<body>
<p>Это обычный абзац</p>
<p>Важный фрагмент текста выделяется <em>курсивным начертанием</em></p>
</body>
</html>
Результат
![example3](/uploads/media/default/0001/02/a864cdba9d5e725a27bba68f3e6b2695bb21d0d2.png)
Тег <pre>
Тег <pre> используется для включения в HTML-документ предварительно отформатированного текста. Во вложенном в тег тексте сохраняются все пробелы и разрывы строк (как известно, браузеры по умолчанию любое количество идущих подряд пробелов показывают как один).
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок окна веб-страницы</title>
</head>
<body>
<pre>Крошка сын
к отцу пришёл,
и спросила кроха:
— Что такое
хорошо
и что такое
плохо? —</pre>
</body>
</html>
Результат
![Крошка сын](/uploads/media/default/0001/02/a22feef84cb53e00b5c56dbf75edf2cf9e17a13f.png)
Как вы заметили, все пробелы и переносы строк сохранены в браузере.
Тег <mark>
Тег <mark> определяет выделенный / подсвеченный текст. Визуально содержимое тега выглядит как отмеченное маркером желтого цвета.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок окна веб-страницы</title>
</head>
<body>
<p>Изучайте язык гипертекстовой разметки HTML на сайте <mark>W3Docs.com</mark>.</p>
</body>
</html>
Результат
![HTML](/uploads/media/default/0001/02/861752b2b7c05ae601ea817e3978936dbfafafc0.png)
Тег <small>
Тег <small> определяет размер шрифта текста на один размер меньше, чем у родительского элемента. В HTML5 тег используется для хранения информации об авторских правах, а также определения мелкого, либо юридического шрифта.Пример
<!DOCTYPE html>
<html>
<head>
<title>Использование тега SMALL</title>
</head>
<body>
<p>Процентная ставка всего 10%*</p>
<small>* - в день</small> /
</body>
</html>
Результат
![Использование тега SMALL](/uploads/media/default/0001/02/dcb9f201c8fd5d297d777c54e436e64e63e77bbd.png)
Тег <del> и <s>
Тег <del> выделяет часть текста, которая была удалена из документа.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок окна веб-страницы</title>
</head>
<body>
<p>Мой любимый цвет <del>зеленый</del> <ins>синий</ins>!</p>
</body>
</html>
Результат
![Мой любимый цвет](/uploads/media/default/0001/02/d2a576be048ba2be83458e4f7231b98f1a24e135.png)
Тег <s> используется для определения текста, который больше не актуален.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок окна веб-страницы</title>
</head>
<body>
<p><s>Я учусь в школе</s></p>
<p>Я учусь в институте.</p>
</body>
</html>
Результат
![Я учусь в школе](/uploads/media/default/0001/02/00b2e94779d6eb8dd55e964078842ae50c57ea41.png)
Содержимое обоих тегов браузеры отображают как перечеркнутый текст. Несмотря на внешнюю схожесть, теги не могут заменять друг друга.
Тег <ins> и <u>
Тег <ins> используется для определения части текста, которая была добавлена в документ. Содержимое тега в браузере отображается как подчеркнутый текст.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок окна веб-страницы</title>
</head>
<body>
<p>Ее любимые цветы <del>фиалки</del> <ins>подснежники</ins>․</p>
</body>
</html>
Результат
![Ее любимые цветы](/uploads/media/default/0001/02/d5a88925ce628d8e0897e5a1f0339bf01b97146c.png)
В тег <u> заключается текст, который стилистически отличается от остального текста, например, слова с орфографическими ошибками или текст на другом языке.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
</head>
<body>
<p>Здесь мы использовали <u>элемент <u></u>.</p>
</body>
</html>
Результат
![форматирование](/uploads/media/default/0001/02/60c805c6fe1f4a4ee6dea09b44300475b1664bb7.png)
Теги <sub> и <sup>
Тег <sub> используется для определения текста с нижним индексом. Тег выравнивает элемент как подстрочный. Тег <sup> используется для определения текста в верхнем индексе.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок окна веб-страницы</title>
</head>
<body>
<p>Формула воды -H<sub>2</sub>O, а формула спирта - C<sub>2</sub>H<sub>5</sub>ОН </p>
<p>E = mc<sup>2</sup>, где E — энергия объекта, m — его масса, c — скорость света в вакууме. </p>
</body>
</html>
Результат
![Формула воды](/uploads/media/default/0001/02/c06db07d4a5cc20cd0f1d18c4effa3c6b5fa8c82.png)
Тег <dfn>
Тег <dfn> используется для выделения термина, который упоминается впервые. В браузере содержимое тега выделяется курсивом.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок окна веб-страницы</title>
</head>
<body>
<p><dfn>HTML</dfn> (от англ. HyperText Markup Language — «язык гипертекстовой разметки») — стандартизированный язык разметки документов во Всемирной паутине. Большинство веб-страниц содержат описание разметки на языке HTML</p>
</body>
</html>
Результат
![HTML](/uploads/media/default/0001/02/47451f966194b5b5c4ddd9db04a715b1fadf4ae4.png)
Теги <p>, <br> и <hr>
Тег <p> определяет абзац в тексте. Друг от друга абзацы отделяются пустой строкой. Браузер автоматически добавляет верхний и нижний отступ, равный 1em, при этом отступы соседних абзацев «схлопываются».
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок окна веб-страницы</title>
</head>
<body>
<p>Это первый абзац</p>
<p>Это второй абзац</p>
</body>
</html>
Результат
![форматирование](/uploads/media/default/0001/02/fd76fa3e38f10f8fd1b548083f9aa0397d26160f.png)
Тег <br> устанавливает перевод строки, то есть все написанное после него, будет перенесено на новую строку. В отличие от тега <p> перед строкой пустой отступ не добавляется.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
</head>
<body>
<h1>Пример использования тега <br></h1>
<p> Внутри абзаца мы можем вставить тег <br />, <br /> чтобы перенести часть текста на другую строку в случае необходимости.</p>
</body>
</html>
Результат
![Пример использования тега BR](/uploads/media/default/0001/02/7cd6b2abe2e2ee27eb29fdf5d778d929a4f44b8b.png)
В HTML5 тег <hr> используется для тематического разделения контента на странице. В предыдущих версиях HTML он использовался для создания горизонтальной линии на странице, визуально разделяя контент. В новой версии он приобрел смысловую нагрузку и определяет не только визуальный, но и тематический разрыв контента.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок окна веб-страницы</title>
</head>
<body>
<h1>Футбол</h1>
<p>Командный вид спорта, в котором целью является забить мяч в ворота соперника.</p>
<hr>
<h1>Баскетбол</h1>
<p>Спортивная командная игра с мячом, в которой мяч забрасывают руками в корзину (кольцо) соперника.</p>
</body>
</html>
Результат
![Командные виды спорта](/uploads/media/default/0001/02/ba70d2ac135fa6ef764c369517feb1c344241032.png)