Разметка текста в HTML

Разметка текста в HTML — это совокупность тегов, предназначенных для структурирования и форматирования текстового содержимого веб-страниц.

HTML предоставляет множество элементов, с помощью которых можно выделять абзацы, заголовки, списки, цитаты, важные слова, коды и другие смысловые части текста.

Общие сведения

Основная цель текстовой разметки — сделать контент структурированным и понятным как пользователю, так и поисковым системам.

HTML не описывает визуальный стиль (этим занимается CSS), а указывает семантику текста — то, какой смысл несут его части.

Пример простейшей разметки:

<h1>Добро пожаловать!</h1>
<p>Это пример абзаца с <strong>жирным</strong> и <em>курсивным</em> текстом.</p>

Абзацы и переносы строк

• Тег <p> создаёт абзац.
• Тег <br> добавляет перенос строки без создания нового абзаца.

<p>Первый абзац текста.</p>
<p>Второй абзац.</p>
<p>Строка с переносом<br>внутри одного абзаца.</p>

Заголовки

HTML поддерживает шесть уровней заголовков: <h1> — самый главный, <h6> — наименее важный. Заголовки создают логическую иерархию документа.

<h1>Основной заголовок</h1>
<h2>Подраздел</h2>
<h3>Подподраздел</h3>

Уровень	Применение
<h1>	Заголовок страницы или статьи
<h2>	Раздел
<h3>	Подраздел
<h4>	Мелкие подразделы
<h5>	Дополнительные подзаголовки
<h6>	Наименее значимый уровень

Выделение текста

Тег	Назначение	Пример
<strong>	Важное выделение (семантический акцент, обычно жирным)	<strong>Важно!</strong>
<em>	Подчёркивает значимость (обычно курсив)	<em>Подчеркнутый текст</em>
<b>	Жирный шрифт без семантики	<b>Просто жирный</b>
<i>	Курсив без семантики	<i>Просто курсив</i>
<u>	Подчёркнутый текст	<u>Подчёркивание</u>
<mark>	Выделение фоном (жёлтый маркер)	<mark>Выделено</mark>
<small>	Мелкий текст	<small>Примечание</small>
<sub> / <sup>	Нижний / верхний индекс	H<sub>2</sub>O, X<sup>2</sup>

Пример:

<p>HTML позволяет <em>курсивом</em>, <strong>жирным</strong> и <mark>выделять</mark> текст.</p>

Цитаты и выделенные блоки

Для оформления цитат и длинных высказываний используются специальные элементы:

<blockquote cite="https://ru.wikipedia.org/wiki/HTML">
  HTML — стандартный язык разметки документов во Всемирной паутине.
</blockquote>

<p>Как говорил <q>Тим Бернерс-Ли</q>, «Веб — это универсальное пространство обмена информацией».</p>

Тег	Назначение
<blockquote>	Длинная цитата (отдельный блок)
<q>	Короткая цитата в тексте
<cite>	Указание источника
<abbr>	Аббревиатуры (с подсказкой)

Списки

HTML поддерживает три вида списков:

• Маркированный список (<ul>)
• Нумерованный список (<ol>)
• Список определений (<dl>)

<ul>
  <li>Первый пункт</li>
  <li>Второй пункт</li>
</ul>

<ol>
  <li>Первый пункт</li>
  <li>Второй пункт</li>
</ol>

<dl>
  <dt>HTML</dt>
  <dd>Язык гипертекстовой разметки</dd>
</dl>

Горизонтальная черта и разделители

<p>Первый раздел</p>
<hr>
<p>Второй раздел</p>

Тег <hr> визуально разделяет части контента.

В HTML5 он считается тематическим разделителем, а не просто линией.

9. Семантические элементы текста

Начиная с HTML5, появились новые теги, описывающие структуру текста более точно. Они помогают браузерам и поисковым системам лучше понимать смысловую организацию документа.

Основные рекомендации

• Используйте семантические теги вместо визуальных (<b> → <strong>, <i> → <em>).
• Не применяйте <br> для создания отступов — для этого предназначен CSS.
• Не злоупотребляйте <u> — подчеркивание может восприниматься как ссылка.
• Проверяйте структуру заголовков: не перескакивайте уровни (после <h2> должен идти <h3>, а не <h5>).

Основные семантические элементы

Тег	Назначение
<article>	Независимый блок (статья, пост, комментарий)
<section>	Раздел документа
<aside>	Боковая информация или заметка
<header>	Заголовок секции или страницы
<footer>	Нижняя часть секции или страницы
<main>	Основное содержимое страницы

Пример использования

<article>
  <header>
    <h2>Заголовок статьи</h2>
  </header>
  <p>Основной текст публикации.</p>
  <footer>Автор: <cite>GuidesBook</cite></footer>
</article>

Советы по оформлению текста

• Используйте семантические теги вместо визуальных (<b> → <strong>, <i> → <em>).
• Не применяйте <br> для создания отступов — для этого есть CSS.
• Не злоупотребляйте <u> — подчеркивание может восприниматься как ссылка.
• Проверяйте структуру заголовков: не перескакивайте уровни (после <h2> должен идти <h3>, а не <h5>).

Пример комплексной разметки текста

<article>
  <h1>История HTML</h1>
  <p><strong>HTML</strong> (HyperText Markup Language) был создан <em>Тимом Бернерсом-Ли</em> в 1989 году.</p>

  <blockquote>
    <p>«Цель HTML — сделать информацию доступной всем пользователям»</p>
    <footer>— <cite>Тим Бернерс-Ли</cite></footer>
  </blockquote>

  <h2>Основные принципы</h2>
  <ul>
    <li>Простота</li>
    <li>Доступность</li>
    <li>Расширяемость</li>
  </ul>

 <p>Современный HTML поддерживает <mark>семантические элементы</mark> и <code>data-атрибуты</code>.</p>
</article>

Заключение

Разметка текста — это основа любой HTML-страницы. Правильное использование тегов делает контент не только красиво оформленным, но и семантически понятным, что важно для SEO, доступности и структурирования информации. Грамотная разметка — первый шаг к чистому и профессиональному коду.