Angular Front-end Инженер

Angular Front-end Инженер

Роадмап навыков для прокачки

Форматирование текста, параграфы

Browser API → HTML → Основное

Основная идея

Форматирование текста в HTML — это использование специальных тегов для визуального оформления и семантической разметки текстового контента. Параграфы (<p>) являются базовым строительным блоком для организации текста на веб-страницах.

Ключевые аспекты

  • Параграфы <p> — блочные элементы для логического разделения текста на абзацы
  • Заголовки <h1>–<h6> — иерархия заголовков от самого важного до наименее важного
  • Логическое форматирование — теги <strong>, <em>, <mark> с семантическим значением
  • Физическое форматирование — теги <b>, <i>, <u> для визуального оформления без семантики
  • Перенос строки <br> — принудительный перенос без создания нового абзаца

Плюсы правильного форматирования

  • Улучшает читаемость контента для пользователей
  • Повышает доступность (accessibility) для screen readers
  • Положительно влияет на SEO (семантические теги)
  • Упрощает стилизацию через CSS

Минусы

  • Избыточное использование тегов увеличивает размер HTML
  • Смешивание логического и физического форматирования создаёт путаницу
  • Неправильная иерархия заголовков вредит SEO

Частые ошибки на собеседованиях

  • Путают <strong> и <b> — оба делают жирный текст, но <strong> несёт семантику "важности"
  • Забывают, что <p> — блочный элемент и автоматически добавляет отступы
  • Используют <br> вместо CSS для создания отступов между элементами
  • Не знают о теге <pre> для сохранения форматирования (пробелы, переносы)

Введение и проблематика

Текстовый контент — основа большинства веб-страниц. Без правильного форматирования текст превращается в сплошную "стену", которую сложно читать и воспринимать. HTML предоставляет богатый набор тегов для структурирования и оформления текста.

Правильное форматирование текста влияет не только на визуальное восприятие, но и на SEO, доступность (accessibility) и удобство поддержки кода.

Зачем нужно форматирование?

  • Читаемость — разбиение на абзацы и заголовки помогает пользователям сканировать контент
  • Семантика — поисковые системы понимают структуру и важность контента
  • Доступность — screen readers правильно интерпретируют выделенный текст

Базовая теория

Параграфы — тег <p>

Параграф — это блочный элемент, представляющий абзац текста. Браузеры автоматически добавляют отступы сверху и снизу.

html
<p>Это первый абзац текста. Он содержит несколько предложений.</p>
<p>Это второй абзац. Браузер автоматически добавит отступ между ними.</p>
⚠️

Нельзя вкладывать блочные элементы внутрь <p>. Браузер автоматически закроет параграф.

html
<!-- ❌ Неправильно -->
<p>Текст <div>вложенный div</div> ещё текст</p>
 
<!-- ✅ Правильно -->
<p>Текст</p>
<div>вложенный div</div>
<p>ещё текст</p>

Заголовки — теги <h1> – <h6>

HTML предоставляет шесть уровней заголовков для создания иерархии контента:

html
<h1>Главный заголовок страницы</h1>
<h2>Раздел</h2>
<h3>Подраздел</h3>
<h4>Пункт</h4>
<h5>Подпункт</h5>
<h6>Мелкий заголовок</h6>
ТегИспользованиеSEO значимость
<h1>Один на страницу, главная темаВысокая
<h2>Основные разделыВысокая
<h3>ПодразделыСредняя
<h4>–<h6>ДетализацияНизкая
🚫

Никогда не пропускайте уровни заголовков! После <h2> должен идти <h3>, а не <h4>.

Теги форматирования текста

Логическое (семантическое) форматирование

Эти теги несут смысловую нагрузку и важны для SEO и accessibility:

html
<strong>Важный текст</strong>   <!-- Сильная важность -->
<em>Акцентированный текст</em> <!-- Смысловое ударение -->
<mark>Выделенный текст</mark>  <!-- Подсветка, как маркером -->
<del>Удалённый текст</del>     <!-- Зачёркнутый, больше не актуален -->
<ins>Вставленный текст</ins>   <!-- Новый добавленный контент -->
<abbr title="HyperText Markup Language">HTML</abbr> <!-- Аббревиатура -->
<cite>Название произведения</cite> <!-- Цитируемое название -->
<q>Короткая цитата</q>         <!-- Инлайновая цитата -->
<blockquote>Длинная блочная цитата</blockquote>

Физическое (презентационное) форматирование

Теги только для визуального оформления, без семантики:

html
<b>Жирный текст</b>      <!-- Визуально жирный -->
<i>Курсивный текст</i>   <!-- Визуально курсив -->
<u>Подчёркнутый текст</u> <!-- Визуально подчёркнутый -->
<s>Зачёркнутый текст</s>  <!-- Визуально зачёркнутый -->
<small>Мелкий текст</small>
<sub>Подстрочный</sub>    <!-- H₂O -->
<sup>Надстрочный</sup>    <!-- X² -->

Практические примеры

Сравнение <strong> и <b>

html
<!-- ✅ Правильно для важного текста -->
<p>
  <strong>Внимание!</strong> Это важное предупреждение.
</p>
 
<!-- Screen reader прочитает с усилением -->

Работа с переносами строк

html
<!-- <br> — принудительный перенос строки -->
<p>
  Адрес:<br>
  ул. Примерная, д. 1<br>
  г. Москва, 123456
</p>
 
<!-- <hr> — тематический разделитель (горизонтальная линия) -->
<p>Раздел 1</p>
<hr>
<p>Раздел 2</p>
⚠️

Не используйте <br> для создания отступов между элементами — для этого есть CSS margin и padding.

Предварительно отформатированный текст

Тег <pre> сохраняет все пробелы и переносы строк:

html
<pre>
function hello() {
    console.log("Hello!");
}
</pre>

Часто комбинируется с <code> для блоков кода:

html
<pre><code>
const x = 10;
const y = 20;
console.log(x + y);
</code></pre>

Пограничные кейсы

Множественные пробелы и переносы

Браузеры схлопывают множественные пробелы и переносы строк в один пробел:

html
<!-- В коде -->
<p>Много     пробелов    и
переносов</p>
 
<!-- В браузере отобразится -->
<!-- "Много пробелов и переносов" -->

Решения:

  • Используйте &nbsp; для неразрывных пробелов
  • Используйте <pre> для сохранения форматирования
  • Используйте CSS white-space: pre-wrap

Пустые параграфы

html
<!-- ❌ Не рекомендуется -->
<p></p>
<p>&nbsp;</p>
 
<!-- ✅ Используйте CSS margin -->
<p style="margin-bottom: 2em;">Текст с увеличенным отступом</p>

Специальные символы (HTML entities)

Для отображения зарезервированных символов используйте HTML entities:

СимволEntityЧисловой код
<&lt;&#60;
>&gt;&#62;
&&amp;&#38;
"&quot;&#34;
(неразр.)&nbsp;&#160;
©&copy;&#169;
—&mdash;&#8212;

Плюсы и минусы

АспектПравильное форматированиеОтсутствие форматирования
Читаемость✅ Высокая❌ Низкая
SEO✅ Положительное влияние❌ Негативное
Доступность✅ Screen readers понимают❌ Сложно воспринимать
Поддержка✅ Легко редактировать❌ Сложно ориентироваться
Размер файла⚠️ Немного больше✅ Меньше

Вопросы интервьюера

Q: В чём разница между <strong> и <b>?

<strong> — семантический тег, означающий важность контента. Screen readers выделяют его голосом. <b> — просто визуальное выделение жирным без смысловой нагрузки.

Q: Можно ли использовать несколько <h1> на странице?

Технически можно, но для SEO рекомендуется один <h1> на страницу как главный заголовок. HTML5 разрешает несколько <h1> в разных <section>, но поддержка браузерами неидеальна.

Q: Как сделать перенос строки без <br>?

Используйте CSS: display: block для инлайн-элементов или white-space: pre-line для сохранения переносов из HTML.

Q: Для чего нужен тег <pre>?

Для сохранения исходного форматирования текста — пробелов, табуляций и переносов строк. Часто используется для отображения кода.

Источники