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

HTML предоставляет теги для форматирования текста: <strong> — важный (жирный), <em> — выделенный (курсив), <mark> — подчёркнутый маркер, <del> — зачёркнутый, <sub>/<sup> — нижний/верхний индекс. Эти теги несут семантический смысл, а не просто визуальный стиль.

Основные теги форматирования:

Семантические (важно для SEO и доступности):

• <strong> — важный текст (браузер покажет жирным)
• <em> — выделенный текст (браузер покажет курсивом)
• <mark> —.highlighted текст (жёлтый фон)
• <del> — удалённый текст (зачёркнутый)
• <ins> — добавленный текст (подчёркнутый)

Математические/научные:

• <sub> — нижний индекс (H₂O)
• <sup> — верхний индекс (x²)

Справочные:

• <abbr title="..."> — аббревиатура с пояснением
• <code> — код
• <blockquote> — цитата
• <q> — короткая цитата

Важно: приоритет — семантика, а не визуал. Если нужен просто жирный текст без важности — используйте CSS (font-weight: bold).

Теги форматирования — как маркеры в книге. strong — жирный маркер (важно!). em — цветной маркер (обрати внимание). mark — маркер-выделитель (подчёркивает). del — зачёркивание (неправильно). Они говорят ЧЕМУ-то (скринридеру, поисковику), а не просто меняют внешний вид.

**Самый простой:**

<p>Это <strong>важный</strong> текст.</p>
<p>Это <em>выделенный</em> текст.</p>
<p>Это <mark>подчёркнутый</mark> текст.</p>

strong — важность, em — выделение, mark — маркер.

**Простой:**

<p>Формула воды: H<sub>2</sub>O</p>
<p>Квадрат: x<sup>2</sup></p>
<p><del>Старая цена: 1000₽</del></p>
<p><ins>Новая цена: 799₽</ins></p>
<p><abbr title="HyperText Markup Language">HTML</abbr> — язык разметки.</p>

sub/sup — индексы. del/ins — изменения текста. abbr — аббревиатуры.

**Реальный пример:**

<article>
  <h2>Обновление API</h2>
  <p>
    Метод <code>getUser()</code> <del>deprecated</del> <ins>заменён на</ins>
    <code>fetchUser()</code>.
  </p>
  <p>
    <abbr title="Application Programming Interface">API</abbr> версии
    <strong>3.0</strong> доступен с <mark>марта 2025</mark>.
  </p>
  <blockquote>
    <p>Всегда проверяйте документацию перед обновлением.</p>
  </blockquote>
</article>

Реальный пример: техническая статья с форматированием кода, изменений и аббревиатур.

**Неправильно:** Использовать strong/em только ради внешнего вида

**Почему:** strong/em — семантические теги. Они говорят скринридерам «это важно/выделено».

**Правильно:** Если нужен просто жирный текст — используйте CSS. strong/em — для важности и выделения.

**Неправильно:** Забывать атрибут title у abbr

**Почему:** Без title аббревиатура не расшифровывается. Пользователь не поймёт, что значит сокращение.

**Правильно:** Всегда добавляйте title к <abbr>: <abbr title="...">сокращение</abbr>.

**Неправильно:** Использовать <i> и <b> вместо <em> и <strong>

**Почему:** <i> и <b> — визуальные теги (курсив, жирный) без семантики. <em> и <strong> — семантические.

**Правильно:** Для важности — <strong>. Для выделения — <em>. <i>/<b> — только для визуального стиля (например, технические термины).

• strong — важность, em — выделение (не просто жирный/курсив)
• mark — маркер, del/ins — изменения
• sub — нижний индекс, sup — верхний индекс
• abbr — аббревиатура (добавляйте title)
• Для визуального стиля используйте CSS, не HTML-теги

Назад: Вы знаете заголовки и абзацы (H5) — форматирование текста добавляет смысловые оттенки внутри абзацев.

Вперёд: В следующем уроке (H7) вы изучите ссылки — как соединять страницы с помощью тега <a>.