HTML Academy · Урок

br, hr, blockquote и pre

Управляйте переносами строк, тематическими разделителями, цитатами и предварительно отформатированным текстом

«br, hr, blockquote и pre» — бесплатный урок HTML Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML Academy содержит 4 уроков всего.

Элемент br

Элемент   вставляет перенос строки в текстовое содержимое:

<p>221B Baker Street<br>
London, NW1 6XE<br>
United Kingdom</p>
<!-- Good use: addresses, poetry, lyrics -->
<!-- Bad use: spacing paragraphs — use margin/padding instead -->

Когда использовать br

Используйте   только тогда, когда переносы строк являются частью содержимого:

Почтовые адреса
Стихи с определёнными переносами строк
Тексты песен

Не используйте   для добавления визуальных интервалов между абзацами — это задача CSS.

Элемент hr

Элемент <hr> обозначает тематическое разделение между фрагментами содержимого:

<p>Chapter One begins here and introduces the characters.</p>

<hr>

<p>Chapter Two starts a new scene entirely.</p>
<!-- hr = thematic shift in content, not just a visual line -->
<!-- Style with CSS: border, color, margin -->

Оформление hr с помощью CSS

<hr> можно полностью оформить с помощью стилей:

<hr style="border: none; border-top: 2px solid #e0e0e0; margin: 2rem 0;">

<!-- Or in CSS: -->
<!--
hr {
  border: none;
  border-top: 1px solid #ddd;
  margin: 1.5rem 0;
}
-->

Элемент blockquote

<blockquote> обозначает раздел, процитированный из другого источника:

<blockquote cite="https://example.com/article">
  <p>The best time to plant a tree was 20 years ago.
     The second best time is now.</p>
</blockquote>
<p>— Chinese Proverb</p>
<!-- cite attribute = URL of the source (machine-readable) -->
<!-- cite element inside blockquote = visible attribution -->

Встроенные цитаты с помощью q

Для коротких встроенных цитат используйте <q> вместо <blockquote>:

<p>She said <q cite="https://example.com">the meeting is at noon</q>.</p>
<!-- Browser adds quotation marks automatically -->
<!-- blockquote = block-level, full quote -->
<!-- q = inline, short quote within a sentence -->

Элемент pre

<pre> отображает текст с использованием моноширинного шрифта и точно сохраняет пробельные символы:

<pre>
function hello() {
    console.log("Hello!");
}
</pre>
<!-- Spaces, tabs, and newlines are preserved -->
<!-- Default font: monospace -->
<!-- Used for code, ASCII art, or text that depends on spacing -->

Совместное использование pre и code

Объединяйте <pre> и <code> для создания блоков кода:

<pre><code>
const greet = (name) => {
  return `Hello, ${name}!`;
};
console.log(greet("World"));
</code></pre>
<!-- pre = preserves whitespace -->
<!-- code = semantic: this is computer code -->
<!-- syntax highlighting libraries like Prism target pre > code -->

Экранирование в pre

Специальные символы HTML внутри <pre> всё равно необходимо экранировать:

<pre><code>
<!-- These must be escaped: -->
&lt;div class="box"&gt;
  &lt;p&gt;Content&lt;/p&gt;
&lt;/div&gt;
<!-- &lt; = <   &gt; = >   &amp; = & -->
</code></pre>

Свёртывание пробелов

Обычный HTML сворачивает пробельные символы — несколько пробелов и переводов строк превращаются в один пробел:

<p>This    has    extra    spaces.</p>
<!-- Renders as: "This has extra spaces." -->

<pre>This    keeps    all    spaces.</pre>
<!-- Renders exactly as written -->

<!-- To preserve whitespace in p without pre: CSS white-space: pre -->
<p style="white-space: pre-wrap">Preserved&#10;newlines</p>

Итоги по элементам для работы с пробелами

Краткий справочник:

  — встроенный перенос строки (адреса, стихи)
<hr> — тематическое разделение разделов
<blockquote> — блочная цитата
<q> — встроенная цитата
<pre> — предварительно форматированный текст, сохраняющий пробельные символы
<code> — встроенный фрагмент кода

Быстрая проверка

Какой элемент точно сохраняет все пробельные символы, включая пробелы и переводы строк?

Итоги: br, hr, blockquote, pre

Элементы для работы с пробелами и цитатами:

  — перенос строки внутри содержимого (не для создания интервалов)
<hr> — тематическое разделение содержимого (семантическое, а не только визуальное)
<blockquote cite> — блочная цитата с источником
<q> — встроенная цитата
<pre><code> — форматированные блоки кода

Часто задаваемые вопросы

Урок «br, hr, blockquote и pre» бесплатный?

Да — полный текст урока «br, hr, blockquote и pre» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML Academy, подпишись на CoddyKit PRO. Курс HTML Academy содержит 4 уроков всего.

Чему я научусь в уроке «br, hr, blockquote и pre»?

Управляйте переносами строк, тематическими разделителями, цитатами и предварительно отформатированным текстом Ты практикуешь HTML Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать HTML Academy?

Предыдущий опыт не требуется. HTML Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «br, hr, blockquote и pre»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке HTML Academy?

Да. Каждый урок HTML Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к HTML Academy