#6. Форматирование текста: strong, em, b, i, u, s, sup, sub

В уроке #5 мы научились делить текст на заголовки и абзацы. Теперь научимся выделять отдельные слова внутри текста. Все теги этого урока парные и живут внутри абзаца — вспомните вложенность тегов из урока #2.

Жирный: strong и b

<strong> отмечает важный текст, а <b> (bold) делает текст жирным без указания важности. На экране выглядят одинаково:

<p>Это <strong>очень важно</strong>!</p>
<p>А это просто <b>жирный</b> текст.</p>

На странице это выглядит так: очень важно и просто жирный текст.

В современной практике предпочитают <strong>: он сообщает браузеру и поисковым системам, что текст действительно важен, а не просто выделен.

Курсив: em и i

<em> (emphasis) ставит смысловой акцент — выделяет слово, на котором падает ударение во фразе. <i> (italic) — просто курсив, например для терминов и названий:

<p>Я <em>же</em> тебе говорил!</p>
<p>Слово <i>браузер</i> здесь — термин.</p>

На странице это выглядит так: Я же тебе говорил! Слово браузер — термин.

Подчёркнутый: u

<u> (underline) подчёркивает текст:

<p>Это <u>подчёркнутый</u> текст.</p>

На странице это выглядит так: подчёркнутый текст.

Используйте его осторожно: посетители привыкли, что подчёркнутый текст — это ссылка. Ссылки разберём в следующем уроке.

Зачёркнутый: s

<s> (strikethrough) зачёркивает текст, который перестал быть актуальным:

<p>Старая цена: <s>500 руб.</s> новая цена: 350 руб.</p>

На странице это выглядит так: старая цена 500 руб., новая — 350 руб.

Индексы: sup и sub

<sup> поднимает текст вверх (верхний индекс), <sub> опускает вниз (нижний индекс). Используются в формулах, размерностях и сносках:

<p>Вода — это H<sub>2</sub>O.</p>
<p>Площадь комнаты — 25 м<sup>2</sup>.</p>

На странице это выглядит так: вода — H₂O, а площадь — 25 м².

Практика

Создайте страницу с несколькими абзацами, в которых: важное слово выделено <strong>, термин — курсивом <i>, есть зачёркнутая и новая цена через <s>, и формула с <sub> или <sup>.