Artigos HTML e CSS HTML hr: como utilizar a tag hr para criar quebras de linhas temáticas

<hr>

A tag <hr> é um elemento HTML que representa uma quebra de linha temática entre elementos HTML.

O <hr> é exibido como uma linha horizontal separando os conteúdos de uma página web.

Como utilizar o <hr>?

A tag <hr> pode ser utilizada para definir quebras temáticas em uma página HTML (por exemplo, uma mudança de tópico num texto).

Geralmente este elemento é utilizado para separar parágrafos de algum texto em questão.

O elemento <hr> será escrito como uma tag vazia, sem conteúdo ou tag de fechamento.

Sintaxe

<hr> …
Código 1. Sintaxe da tag <hr>
Importante: A tag <hr> é uma tag vazia e não requer tag de fechamento.

Configuração padrão do <hr> no CSS

A maioria dos navegadores exibirão o elemento <hr> com os seguintes valores CSS apresentados no Código 2.

hr {
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  border-style: inset;
  border-width: 1px;
}
Código 2. Estilo padrão do <hr>

Exemplo de uso do <hr>

Exemplo 1

No Código 3 demonstramos um exemplo utilizando tags <hr> para separar parágrafos do documento HTML.

<body>
  <h1>JavaScript</h1>
  <p>É impossível falar sobre linguagens de programação e não mencionar a JavaScript, a mais famosa e utilizada em todo o mundo. Esse é um excelente recurso para desenvolver soluções front-end e back-end, mas também pode ser utilizado para criar aplicativos mobile e até mesmo jogos.</p>
  <hr>
  <h1>Python</h1>
  <p>Python é uma linguagem de programação poderosa e fácil de aprender. Ela possui uma sintaxe simples e por isso é muito utilizada pelas mais diversas áreas da computação para escrever diversos programas.</p>
  <p>Com Python é possível trabalhar com aplicações web e desktop, apps para dispositivos móveis, scripts para análises de dados e outras possibilidades.</p>
  <hr>
  <h1>PHP</h1>
  <p>PHP é uma linguagem de programação de código aberto, criada para o desenvolvimento web. Com ela podemos escrever pequenos scripts de forma procedural, utilizar a orientação a objetos ou ainda ambas.</p>
  <p>Por ser uma linguagem de fácil aprendizado, o PHP é ideal para programadores que estão ingressando no desenvolvimento web.</p>
</body>
Código 3. Exemplo de código HTML

Note que ao utilizarmos o elemento <hr> ele é apresentado por padrão como uma linha horizontal.

Exemplo 2

Nos Códigos 4 e 5 demonstramos um exemplo de como modificar o estilo padrão da tag <hr> utilizando o código CSS.

<body>
  <h1>Exemplos de elemento hr com estilo CSS</h1>
  <h3>Primeiro exemplo: linha horizontal normal (Sem CSS).</h3>
  <hr>
  <h3>Segundo exemplo: linha horizontal com 30 pixels de altura.</h3>
  <hr class="segundaQuebraDeLinha">
  <h3>Terceiro exemplo: linha horizontal com 30 pixels de altura, sem borda e com cor de fundo cinza escuro.</h3>
  <hr class="terceiraQuebraDeLinha">
</body>
Código 4. Exemplo de código HTML
.segundaQuebraDeLinha {
  height: 30px;
}
.terceiraQuebraDeLinha {
            height:30px;
  background:#808080;
            border:none
}
Código 5. Exemplo de código CSS

Note que com o uso do CSS, o estilo do elemento <hr> pode ser modificado de diversas maneiras de acordo com a necessidade do desenvolvedor.

Compatibilidade com navegadores

O <hr> é compatível com todos os navegadores apresentados na tabela abaixo:

<hr> Chrome Mozilla Firefox Edge / IE Opera Safari
Sim Sim Sim Sim Sim