w3docs logo

HTML форматирование текста

Вид текста на экране зависит от того, какие 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>

Результат

Заголовки

Теги <b> и <strong>

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна веб-страницы</title>
  </head>
  <body>
    <p>Мы использовали тег &lt;strong&gt;, чтобы выделить <strong> этот важный фрагмент текста</strong>.</p>
  </body>
</html>

Результат

Заголовок окна веб-страницы

Теги <i> и <em>

Теги <i> и <em> задают курсивное начертание шрифта. Тег <i> текст является элементом физической разметки, то есть вложенный текст отличается только визуально и не воспринимается как важный браузерами и поисковыми машинами. Тег <em> экспрессивно-эмоционально выделяет фрагмент текста.

Пример

<!DOCTYPE html>
<html>
  <body>
    <p>Это обычный абзац</p>
    <p>Важный фрагмент текста выделяется <em>курсивным начертанием</em></p>
  </body>
</html>

Результат

example3

Тег <pre>

Тег <pre> используется для включения в HTML-документ предварительно отформатированного текста. Во вложенном в тег тексте сохраняются все пробелы и разрывы строк (как известно, браузеры по умолчанию любое количество идущих подряд пробелов показывают как один).

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна веб-страницы</title>
  </head>
  <body>
    <pre>Крошка сын
               к отцу пришёл,
               и спросила кроха:
               — Что такое 
                хорошо
                и что такое 
                плохо? —</pre>
  </body>
</html>

Результат

Крошка сын

Как вы заметили, все пробелы и переносы строк сохранены в браузере.

Тег <mark>

Тег <mark> определяет выделенный / подсвеченный текст. Визуально содержимое тега выглядит как отмеченное маркером желтого цвета.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна веб-страницы</title>
  </head>
  <body>
    <p>Изучайте язык гипертекстовой разметки HTML на сайте <mark>W3Docs.com</mark>.</p>
  </body>
</html>

Результат

HTML

Тег <small>

Тег <small> определяет размер шрифта текста на один размер меньше, чем у родительского элемента. В HTML5 тег используется для хранения информации об авторских правах, а также определения мелкого, либо юридического шрифта.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Использование тега SMALL</title>
  </head>
  <body>
    <p>Процентная ставка всего 10%*</p>
    <small>* - в день</small> /
  </body>
</html>

Результат

Использование тега SMALL

Тег <del> и <s>

Тег <del> выделяет часть текста, которая была удалена из документа.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна веб-страницы</title>
  </head>
  <body>
    <p>Мой любимый цвет <del>зеленый</del> <ins>синий</ins>!</p>
  </body>
</html>

Результат

Мой любимый цвет

Тег <s> используется для определения текста, который больше не актуален.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна веб-страницы</title>
  </head>
  <body>
    <p><s>Я учусь в школе</s></p>
    <p>Я учусь в институте.</p>
  </body>
</html>

Результат

Я учусь в школе

Содержимое обоих тегов браузеры отображают как перечеркнутый текст. Несмотря на внешнюю схожесть, теги не могут заменять друг друга.

Тег <ins> и <u>

Тег <ins> используется для определения части текста, которая была добавлена в документ. Содержимое тега в браузере отображается как подчеркнутый текст.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна веб-страницы</title>
  </head>
  <body>
    <p>Ее любимые цветы <del>фиалки</del> <ins>подснежники</ins>․</p>
  </body>
</html>

Результат

Ее любимые цветы

В тег <u> заключается текст, который стилистически отличается от остального текста, например, слова с орфографическими ошибками или текст на другом языке.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
  <body>
    <p>Здесь мы использовали <u>элемент &lt;u&gt;</u>.</p>
  </body>
</html>

Результат

форматирование

Теги <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>

Результат

Формула воды

Тег <dfn>

Тег <dfn> используется для выделения термина, который упоминается впервые. В браузере содержимое тега выделяется курсивом.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна веб-страницы</title>
  </head>
  <body>
    <p><dfn>HTML</dfn> (от англ. HyperText Markup Language — «язык гипертекстовой разметки») — стандартизированный язык разметки документов во Всемирной паутине. Большинство веб-страниц содержат описание разметки на языке HTML</p>
  </body>
</html>

Результат

HTML

Теги <p>, <br> и <hr>

Тег <p> определяет абзац в тексте. Друг от друга абзацы отделяются пустой строкой. Браузер автоматически добавляет верхний и нижний отступ, равный 1em, при этом отступы соседних абзацев «схлопываются».

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна веб-страницы</title>
  </head>
  <body>
    <p>Это первый абзац</p>
    <p>Это второй абзац</p>
  </body>
</html>

Результат

форматирование

Тег <br> устанавливает перевод строки, то есть все написанное после него, будет перенесено на новую строку. В отличие от тега <p> перед строкой пустой отступ не добавляется.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
  <body>
    <h1>Пример использования тега &lt;br&gt;</h1>
    <p> Внутри абзаца мы можем вставить тег &lt;br /&gt;, <br /> чтобы перенести часть текста на другую строку в случае необходимости.</p>
  </body>
</html>

Результат

Пример использования тега BR

В HTML5 тег <hr> используется для тематического разделения контента на странице. В предыдущих версиях HTML он использовался для создания горизонтальной линии на странице, визуально разделяя контент. В новой версии он приобрел смысловую нагрузку и определяет не только визуальный, но и тематический разрыв контента.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна веб-страницы</title>
  </head>
  <body>
    <h1>Футбол</h1>
    <p>Командный вид спорта, в котором целью является забить мяч в ворота соперника.</p>
    <hr>
    <h1>Баскетбол</h1>
    <p>Спортивная командная игра с мячом, в которой мяч забрасывают руками в корзину (кольцо) соперника.</p>
  </body>
</html>

Результат

Командные виды спорта

Практикуйте свои знания

Какие из следующих тегов используются для форматирования текста в HTML?
Считаете ли это полезным?