W3Docs

Тема

Русский

HTML-теги для форматирования текста ​

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

Давайте подробнее разберёмся и поговорим о тегах форматирования.

Теги <h1>-<h6> ​

Теги <h1>-<h6> используются для определения заголовков HTML. В HTML существует 6 уровней заголовков: <h1> определяет самый важный заголовок, а <h6> — наименее важный.

Пример тегов HTML <h1>-<h6>: ​

Пример тегов HTML <h1>|Теги для форматирования текста|W3Docs

html
<!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>
Try it Yourself »

Результат ​

HTML headings

Теги <b> и <strong> ​

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

Пример тегов HTML <b> и <strong>: ​

Пример тега HTML <b> и <strong>|Теги для форматирования текста|W3Docs

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>We use the &lt;strong&gt; tag to highlight the importance <strong> of this part of the text</strong>.</p>
    <p>The &lt;b&gt; tag is a physical tag that stands for <b>bold text</b>.</p>
  </body>
</html>
Try it Yourself »

Теги <i> и <em> ​

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

Пример тегов HTML <i> и <em>: ​

Пример тегов <i> и <em>|Теги для форматирования текста|W3Docs

html
<!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>
Try it Yourself »

Тег <pre> ​

Тег <pre> используется для определения предварительно форматированного текста. Браузеры отображают заключённый в него текст с пробелами и переносами строк.

Пример тега HTML <pre>: ​

Пример тега HTML <pre>|Теги для форматирования текста|W3Docs

html
<!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>
Try it Yourself »

Тег <mark> ​

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

Пример тега HTML <mark>: ​

Пример тега HTML <mark>|Теги для форматирования текста|W3Docs

html
<!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>
Try it Yourself »

Результат ​

marked-text

Тег <small> ​

Тег <small> уменьшает размер шрифта текста на один шаг по сравнению с базовым размером шрифта документа (с medium до small или с x-large до large). Обычно этот тег содержит элементы второстепенной важности, такие как уведомления об авторских правах, примечания или юридические уведомления.

Пример тега HTML <small>: ​

Пример тега HTML <small>|Теги для форматирования текста|W3Docs

html
<!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>
Try it Yourself »

Теги <del> и <s> ​

Тег <del> указывает на часть текста, удалённую из документа. Браузеры отображают этот текст как зачёркнутый.

Пример тега HTML <del>: ​

Пример тега HTML <del>|Теги для форматирования текста|W3Docs

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
     <p> She likes <del>violets</del> snowdrops․</p>
  </body>
</html>
Try it Yourself »

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

Пример тега HTML <s>: ​

Пример тега HTML <s>|Теги для форматирования текста|W3Docs

html
<!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>
Try it Yourself »

Содержимое обоих тегов отображается как зачёркнутое. Однако, несмотря на визуальное сходство, эти теги не могут заменять друг друга.

Теги <ins> и <u> ​

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

Пример тега HTML <ins>: ​

Пример тега HTML <ins>|Теги для форматирования текста|W3Docs

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>She likes <del>violets</del> <ins>snowdrops</ins>․</p>
  </body>
</html>
Try it Yourself »

Результат ​

inserted-text

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

Пример тега HTML <u>: ​

Пример тега HTML <u>|Теги для форматирования текста|W3Docs

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>Here we used <u>the &lt;u&gt; tag</u>.</p>
  </body>
</html>
Try it Yourself »

Теги <sub> и <sup> ​

Тег <sub> определяет подстрочный текст. Подстрочный текст располагается ниже базовой линии других символов строки и имеет меньший размер шрифта. Тег <sup> определяет надстрочный текст, который располагается немного выше обычной строки и относительно меньше остального текста. Базовая линия проходит через верхний или нижний край символов.

Пример тегов HTML <sub> и <sup>: ​

Пример тегов HTML <sub> и <sup>|Теги для форматирования текста|W3Docs

html
<!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>
Try it Yourself »

Результат ​

subscript-superscript-text

Тег <dfn> ​

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

Пример тега HTML <dfn>: ​

Пример тега HTML <dfn>|Теги для форматирования текста|W3Docs

html
<!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>
Try it Yourself »

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

Тег <p> определяет абзац. Браузеры автоматически добавляют отступ 1em до и после каждого абзаца.

Пример тега HTML <p>: ​

Пример тега HTML <p>|Теги для форматирования текста|W3Docs

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>The first paragraph</p>
    <p>The second paragraph</p>
  </body>
</html>
Try it Yourself »

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

Пример тега HTML <br>: ​

Пример тега HTML <br>|Теги для форматирования текста|W3Docs

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document.</title>
  </head>
  <body>
    <h1>How to use the &lt;br /&gt; tag</h1>
    <p> We can insert the &lt;br /&gt; tag inside the paragraph, <br /> to transfer a part of the text to another line if necessary.</p>
  </body>
</html>
Try it Yourself »

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

Пример тега HTML <hr>: ​

Пример тега HTML <hr>|Теги для форматирования текста|W3Docs

html
<!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>
Try it Yourself »

Практика ​

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

Считаете ли это полезным?

Предпросмотр dual-run — сравните с маршрутами Symfony на продакшене.