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

Вы уже меняли внешний вид текста атрибутом style. Теги форматирования отвечают на другой вопрос: что этот фрагмент текста означает? Важные предупреждения, речевой акцент, подсветка, правки, мелкий шрифт и индексы вроде H₂O относятся к отдельным элементам HTML. Браузеры часто показывают их жирным или курсивом по умолчанию, но вспомогательные технологии и поисковые системы тоже могут опираться на смысл — чего один цвет не даёт. Когда вы учите эти теги рядом со style, легче разделять «как выглядит» и «что значит» до перехода к полноценному CSS.

Что такое форматирование текста HTML?

Элементы форматирования текста оборачивают слово или фразу внутри абзаца (или похожего текста), чтобы отметить роль: важность, акцент, подсветка, удаление, вставка и другое. Это строчные (inline) элементы. Они не начинают новый блок, как p или h1. Ставьте их вокруг того отрезка текста, который несёт эту роль, и закрывайте, чтобы остальная часть предложения снова стала обычной.

Прямой ответ

Используйте смысловые теги форматирования: strong для сильной важности, em для акцента ударения (как если бы вы выделили слово голосом), mark для подсветки релевантности, small для мелкого шрифта или побочных замечаний, del и ins для удалённого или вставленного текста, и sub / sup для нижнего и верхнего индекса. Предпочитайте эти теги, когда значение важно. Если нужен только жирный или курсивный вид без дополнительного смысла, используйте CSS — в том числе идеи inline-style из предыдущего занятия — а не злоупотребляйте strong или em.

Справка по тегам одним взглядом

Сначала strong и em

strong и em — пара, которой вы будете пользоваться чаще всего. Берите strong, когда содержание важно — ключевой термин, предупреждение, метка обязательного поля в тексте. Берите em, когда вы бы сменили интонацию, чтобы выделить слово. Жирный и курсив по умолчанию — лишь привычное оформление; теги всё равно несут смысл, если таблица стилей позже изменит внешний вид.

Разбор примера

• strong оборачивает «final price», потому что эта фраза важна в предложении
• em оборачивает «before», потому что время — выделенная идея
• Оба тега лежат внутри одного абзаца; они не заменяют p
• Если нужен только тёмно-синий текст без смысла важности, лучше style (или позже CSS)

Несколько тегов форматирования в одном абзаце

Когда strong и em станут привычными, добавьте помощники для подсветки, правок, мелкого шрифта и индексов. Держите вложенность мелкой: оборачивайте только те слова, которым нужна каждая роль.

Что делает каждый помощник

• sub опускает «2» в формуле воды; sup поднимает показатель степени в 12²
• del и ins показывают след правки — старое значение убрано, новое вставлено
• small отмечает вторичный мелкий шрифт, а не главный тезис
• mark подсвечивает релевантное совпадение, похоже на подсветку поиска
• strong и em по-прежнему отмечают важность и акцент в том же абзаце
  Не нужно вставлять каждый тег в каждое предложение. Выбирайте те, что совпадают с реальным смыслом текста. Короткий абзац с двумя–тремя точными тегами читается яснее, чем длинная строка, где каждый второй фрагмент чем-то обёрнут.

Смысловые теги против стиля только для вида

Старые страницы иногда используют b и i для жирного и курсива без сильного смысла. В этом курсе предпочитайте strong, когда содержание важно, и em, когда вы бы выделили слово при речи. Используйте CSS, когда нужен только внешний вид. Такая привычка делает HTML честным: теги форматирования описывают содержание, а таблицы стилей — оформление. Если позже дизайнер изменит шрифты, смысловые теги по-прежнему сообщат читателям экрана и поисковикам, что важно и что выделено голосом.

Практика в редакторе

1. Напишите обычный абзац о цене продукта.
2. Оберните название продукта в strong.
3. Оберните одно предупреждающее слово в em.
4. Отметьте старую цену через del, а новую — через ins.
5. По желанию: добавьте крошечную сноску через small или фрагмент формулы через sub / sup.
6. Сохраните и откройте страницу. Убедитесь, что теги закрыты и смысл читается ясно.
7. Намеренно оставьте один закрывающий тег, обновите страницу, заметьте, как стиль «течёт» дальше по строке, затем исправьте.
   Увидеть, как незакрытый тег «протекает» стилем по абзацу, учит аккуратной вложенности быстрее, чем одно копирование идеальных образцов. После исправления снова проверьте исходник: открывающий и закрывающий теги должны совпадать по имени и порядку.

Ошибки, которые ослабляют форматирование

• Использовать только style="font-weight: bold", когда слово действительно важно — для смысла предпочитайте strong
• Ставить strong везде лишь чтобы сделать текст толще — это размывает важность
• Вкладывать пять тегов форматирования друг в друга без причины
• Использовать sup / sub для украшения вместо настоящих индексов (математика, химия, сноски)
• Забывать закрывающие теги, так что остальная страница наследует жирный, курсив или подсветку
• Считать mark общей жёлтой краской для целых абзацев несвязанного текста
• Путать del/ins с простым зачёркиванием ради дизайна, когда правки истории нет

Краткое резюме

• Теги форматирования добавляют смысл внутри текста, а не только украшение
• Начните с strong и em, затем добавляйте mark, small, del, ins, sub и sup по необходимости
• Предпочитайте смысловые теги, когда важны важность, акцент, правки или индексы
• Используйте CSS, когда нужен только внешний вид без дополнительного смысла
• Держите вложенность простой и всегда закрывайте каждый открытый тег
• Выбирайте теги из смысла предложения, а не из привычки жирнить всё подряд