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

En Ua

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



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

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

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

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

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

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

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

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

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

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

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

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

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

Пример

<b>This text is bold</b>
Попробуйте сами »

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

Пример

<strong>This text is strong</strong>
Попробуйте сами »

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

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

Пример

<i>This text is italic</i>
Попробуйте сами »

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

Пример

<em>This text is emphasized</em>
Попробуйте сами »

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


HTML элемент <small>

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

Пример

<h2>HTML <small>Small</small> Formatting</h2>
Попробуйте сами »

HTML элемент <mark>

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

Пример

<h2>HTML <mark>Marked</mark> Formatting</h2>
Попробуйте сами »

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


HTML элемент <del>

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

Пример

<p>My favorite color is <del>blue</del> red.</p>
Попробуйте сами »

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


HTML элемент <ins>

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

Пример

<p>My favorite <ins>color</ins> is red.</p>
Попробуйте сами »

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


HTML элемент <sub>

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

Пример

<p>This is <sub>subscripted</sub> text.</p>
Попробуйте сами »

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


HTML элемент <sup>

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

Пример

<p>This is <sup>superscripted</sup> text.</p>
Попробуйте сами »

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


HTML Упражнения

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

Упражнение:

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

<p>
WWF's mission is to stop the degradation of our planet's natural environment.
</p>


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

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

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

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

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