HTML Academy · Aula

br, hr, blockquote e pre

Controlar quebras de linha, separadores temáticos, citações e texto pré-formatado.

br, hr, blockquote e pre é uma aula grátis de HTML Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de HTML Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de HTML Academy inclui 4 aulas no total.

O elemento br

O elemento   insere uma quebra de linha no conteúdo do texto:

<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 -->

Quando usar br

Use   somente quando as quebras de linha fizerem parte do conteúdo:

Endereços postais
Poesia com quebras de linha específicas
Letra de músicas

Não use   para adicionar espaçamento visual entre parágrafos — essa é uma tarefa do CSS.

O elemento hr

O elemento <hr> representa um separador temático entre conteúdos:

<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 -->

Estilizando hr com CSS

É possível estilizar <hr> completamente:

<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;
}
-->

O elemento blockquote

<blockquote> identifica uma seção citada de outra fonte:

<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 -->

Citações em linha com q

Para citações curtas em linha, use <q> em vez de <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 -->

O elemento pre

<pre> exibe o texto em uma fonte monoespaçada e preserva os espaços em branco exatamente:

<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 e code juntos

Combine <pre> e <code> para criar blocos de código:

<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 -->

Escape em pre

Os caracteres especiais do HTML dentro de <pre> ainda precisam ser escapados:

<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>

Colapso de espaços em branco

O HTML normal colapsa os espaços em branco — vários espaços e quebras de linha se tornam um único espaço:

<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>

Resumo dos elementos de espaços em branco

Referência rápida:

  — quebra de linha em linha (endereços e poesia)
<hr> — separador temático de seção
<blockquote> — citação em bloco
<q> — citação em linha
<pre> — texto pré-formatado, preserva os espaços em branco
<code> — trecho de código em linha

Verificação rápida

Qual elemento preserva exatamente todos os espaços em branco, incluindo espaços e quebras de linha, como foram escritos?

Recapitulação: br, hr, blockquote e pre

Elementos de espaços em branco e de citação:

  — quebra de linha no conteúdo (não para espaçamento)
<hr> — separador temático de conteúdo (semântico, não apenas visual)
<blockquote cite> — citação em bloco com fonte
<q> — citação em linha
<pre><code> — blocos de código formatados

Perguntas Frequentes

A aula “br, hr, blockquote e pre” é grátis?

Sim — o texto completo de “br, hr, blockquote e pre” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de HTML Academy, atualize para CoddyKit PRO. O curso de HTML Academy inclui 4 aulas no total.

O que vou aprender em “br, hr, blockquote e pre”?

Controlar quebras de linha, separadores temáticos, citações e texto pré-formatado. Você pratica HTML Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar HTML Academy?

Nenhuma experiência prévia é necessária. HTML Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “br, hr, blockquote e pre”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de HTML Academy?

Sim. Cada aula de HTML Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para HTML Academy