<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> …
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;
}
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>
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>
.segundaQuebraDeLinha {
height: 30px;
}
.terceiraQuebraDeLinha {
height:30px;
background:#808080;
border:none
}
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 |
