ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ
HTML5. Уроки для начинающих. W3Schools на русском

Ua En Es De Fr

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


HTML содержит несколько элементов для определения текста со специальным значением.



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

Этот текст жирный

Этот текст курсивом

Это нижний индекс и верхний индекс

Попробуйте сами »

HTML элементы форматирования

В предыдущем разделе вы узнали об HTML атрибуте style.

HTML также определяет специальные элементы для определения текста с особой важностью.

HTML использует такие элементы, как <b> и <i> для форматирования выведения, например жирный или курсивный текст.

Элементы форматирования были разработаны для отображения специальных типов текста:

  • <b> - Жирный текст
  • <strong> - Важный текст (выделяется жирным)
  • <i> - Курсивный текст
  • <em> - Важный текст (выделяется курсивом)
  • <mark> - Помеченный (маркированный) текст
  • <small> - Маленький текст
  • <del> - Удаленный текст
  • <ins> - Вставленный текст
  • <sub> - Подстрочный текст (нижний индекс)
  • <sup> - Надстрочный текст (верхний индекс)

HTML элементы <b> и <strong>

HTML элемент <b> определяет жирный текст без дополнительного значения.

Пример

<b>Этот текст является жирным</b>
Попробуйте сами »

HTML элемент <strong> определяет важный текст с дополнительным семантически "важным" значением.

Пример

<strong>Этот текст является выделенным</strong>
Попробуйте сами »

HTML элементы <i> и <em>

HTML элемент <i> определяет курсивный текст без какого-либо дополнительного значения.

Пример

<i>Этот текст является курсивным</i>
Попробуйте сами »

HTML элемент <em> определяет выделенный текст с дополнительным семантическим значением.

Пример

<em>Этот текст является выделенным</em>
Попробуйте сами »

Примечание: Браузеры отображают <strong> как <b>, и <em> как <i>. Однако, есть разница в значении этих тегов: <b> и <i> определяют жирный и курсивный текст, но <strong> и <em> означают, что текст "важный" со смысловым значением.


HTML элемент <small>

HTML элемент <small> определяет уменьшенный текст (относительно размера основного текста по умолчанию):

Пример

<h2>HTML <small>Уменьшенное</small> форматирования</h2>
Попробуйте сами »

HTML элемент <mark>

HTML элемент <mark> определяет маркированный/выделенный текст:

Пример

<h2>HTML <mark>Маркированное</mark> форматирование</h2>
Попробуйте сами »

По умолчанию маркированный текст выделяется желтым цветом.


HTML элемент <del>

HTML элемент <del> определяет удалённый/изъятый текст.

Пример

<p>Мой любимый цвет <del>синий</del> красный.</p>
Попробуйте сами »

Текст отображается зачеркнутым.


HTML элемент <ins>

HTML элемент <ins> определяет вставленный/добавленный текст.

Пример

<p>Мой любимый <ins>цвет</ins> красный.</p>
Попробуйте сами »

Текст отображается подчеркнутым.


HTML элемент <sub>

HTML элемент <sub> определяет подстрочный текст (нижний индекс).

Пример

<p>Это есть <sub>подстрочный</sub> текст.</p>
Попробуйте сами »

Текст отображается как нижний индекс.


HTML элемент <sup>

HTML элемент <sup> определяет надстрочный текст (верхний индекс).

Пример

<p>Это есть <sup>надстрочный</sup> текст.</p>
Попробуйте сами »

Текст отображается как верхний индекс.


HTML Упражнения

Проверьте себя с помощью упражнений

Упражнение:

Добавьте дополнительное значение к слову 'деградацию' в параграфе ниже.

<p>
Миссия этого сайта - это остановить массовую деградацию молодого поколения нашей страны.
</p>


HTML элементы форматирования текста

Тег Описание
<b> Определяет жирный текст
<em> Определяет семантически важный текст
<i> Определяет курсивный текст
<small> Определяет маленький текст
<strong> Определяет семантически важный текст
<sub> Определяет подстрочный текст (нижний индекс)
<sup> Определяет надстрочный текст (верхний индекс)
<ins> Определяет вставленный текст
<del> Определяет удалённый текст
<mark> Определяет маркированный/помеченный текст

Для получения полного списка всех доступных HTML тегов, посетите HTML Справочник тегов на нашем сайте W3Schools на русском.


Вопросы для самоконтроля

  • Что такое форматирование текста HTML-страницы?
  • Какие HTML-элементы форматирования?
  • Для чего нужны элементы форматирования?
  • Какой HTML-элемент определяет жирный текст без дополнительного значения?
  • Какой HTML-элемент определяет жирный текст с дополнительным семантически важным значением?
  • Какой HTML-элемент определяет курсивный текст без какого-либо дополнительного значения?
  • Какой HTML-элемент определяет курсивный текст с дополнительным семантически важным значением?
  • Какой HTML-элемент определяет уменьшенный текст относительно размера основного текста?
  • Какой HTML-элемент определяет маркированный/выделенный текст?
  • Какой HTML-элемент определяет удалённый/изъятый текст?
  • Какой HTML-элемент определяет вставленный/добавленный текст?
  • Какой HTML-элемент определяет подстрочный текст (нижний индекс)?
  • Какой HTML-элемент определяет надстрочный текст (верхний индекс)?