<hr>: O Elemento HR
Última atualização: 2026-10-13
<hr>O Elemento HR
O elemento <hr> (regra horizontal) representa uma quebra temática, renderizada como linha horizontal por padrão. No HTML5 sinaliza mudança de tópico, usado para separar parágrafos visualmente. É um elemento vazio.
| Categoria | Conteúdo de Texto |
|---|---|
| Modelo de Conteúdo | Nenhum (elemento vazio) |
| Pais Permitidos | Qualquer elemento que aceite conteúdo de fluxo |
| Tag de Fechamento | Auto-fechante — nenhuma tag de fechamento necessária |
| Status | Padrão |
📝 Sintaxe
Parágrafo um<hr>Parágrafo dois▶ Exemplo
Edite o código abaixo e veja o resultado em tempo real no playground:
🌐 Suporte de Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <hr> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Suportado em todos os navegadores principais | |||||
❓ Perguntas Frequentes
Qhr serve só para desenhar uma linha?
ANão apenas. A semântica de
<hr> é «mudança de tema»: troca de cena na história, fronteira entre tópicos. Visualmente renderiza como linha horizontal por padrão, mas separadores puramente decorativos, sem pretensão semântica, devem ser feitos com border do CSS.Qhr é elemento vazio? Aceita estilos?
AÉ elemento vazio, sem tag de fechamento e sem conteúdo. A estilização é totalmente customizável:
hr { border: none; border-top: 1px solid #ddd; } é a redefinição comum, e pode-se controlar largura, gradiente etc.Qhr e section precisam ser usados juntos?
ANão é preciso duplicar a expressão. Com
<section> (agrupamento temático com título) não se acrescenta <hr> — a própria estrutura já é a fronteira. hr serve para trocas de tópico soltas, sem título; são ferramentas de granularidades diferentes.🏷️ Tags Relacionadas
💡 Casos Relacionados
📚 Tutoriais Relacionados
