Tag HTML <hr>
A tag HTML <hr> marca uma quebra temática (mudança de assunto), renderizada como linha horizontal. Aprenda quando usá-la, CSS, atributos e acessibilidade.
A tag HTML <hr> representa uma quebra temática — uma mudança de assunto dentro de uma seção de conteúdo, como a troca de cena em uma história ou a passagem para um novo tema em um artigo de referência. Por padrão, o navegador a renderiza como uma linha horizontal, mas seu propósito principal é semântico, não decorativo.
Em HTML5, a tag <hr> carrega significado: ela informa aos navegadores e às tecnologias assistivas que os parágrafos ao seu redor pertencem a tópicos diferentes. Em versões mais antigas do HTML, ela era tratada puramente como uma regra de apresentação visual usada para desenhar uma linha entre conteúdos. Hoje, se você deseja apenas um divisor decorativo sem mudança de assunto, deve usar uma borda CSS em outro elemento, em vez de um <hr>.
A aparência visual da linha depende do navegador; ela é frequentemente desenhada com um leve efeito 3D ("sombreado") que pode ser substituído com CSS.
Quando Usar <hr> (e Quando Não Usar)
Use <hr> quando houver uma mudança genuína de assunto:
- Entre duas seções distintas de um artigo ou documento longo.
- Entre cenas ou mudanças em uma narrativa.
- Para separar grupos de campos de formulário ou itens de lista não relacionados, quando um novo cabeçalho seria excessivo.
Não use <hr> puramente para decoração. Se a linha está lá apenas para parecer bonita — por exemplo, um divisor abaixo de cada avatar em uma lista —, ela adiciona ruído para usuários de leitores de tela. Nesse caso, estilize uma borda em um elemento existente, ou adicione role="presentation" à regra para que ela seja ignorada semanticamente. Para estruturar regiões da página por significado, consulte elementos semânticos no HTML5.
Acessibilidade: <hr> possui o papel ARIA implícito de separator e é exposto às tecnologias assistivas — muitos leitores de tela o anunciam (por exemplo, como "separador"). Isso é exatamente o que se deseja para uma verdadeira quebra temática, mas é por isso que uma linha puramente decorativa deve usar CSS ou role="presentation" em vez disso.
Sintaxe
A tag <hr> é vazia, o que significa que a tag de fechamento não é necessária. Mas em XHTML, a tag (<hr>) deve ser fechada (<hr/>).
Exemplo da tag HTML <hr>:
Tag hr em HTML
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Learn HTML</h1>
<p>
This HTML tutorial will teach you the basics of the (Hyper Text Markup Language) and how to make your website from scratch.
</p>
<hr />
<h1>Learn CSS</h1>
<p>
In our CSS tutorial you will learn how to use CSS to control the style and layout of multiple Web pages all at once.
</p>
</body>
</html>Atributo size do HTML <hr>
O atributo size especifica a altura da linha.
Embora o atributo size seja um dos atributos obsoletos, ainda é suportado por todos os navegadores.
Exemplo da tag HTML <hr> com o atributo "size":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>A normal horizontal line:</p>
<hr />
<p>A horizontal line with a height of 40 pixels:</p>
<hr size="40" />
</body>
</html>Uma forma alternativa de especificar o tamanho da tag <hr> é usando a Propriedade CSS height.
Exemplo da tag HTML <hr> usada com a propriedade height:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
hr {
height: 20px;
}
</style>
</head>
<body>
<p>
A horizontal line with a height of 20 pixels.
</p>
<hr />
</body>
</html>Atributo width do HTML <hr>
O atributo width especifica a largura da linha.
O atributo width também faz parte da lista de atributos obsoletos, mas é suportado por todos os navegadores.
Exemplo da tag HTML <hr> com o atributo width:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>A normal horizontal line:</p>
<hr />
<p>A horizontal line with a width of 30%:</p>
<hr width="30%" />
</body>
</html>Use a Propriedade CSS width em vez do atributo width.
Exemplo da tag HTML <hr> usada com a propriedade width:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
hr {
width: 250px;
}
</style>
</head>
<body>
<p>A horizontal line with a width of 250 pixels:</p>
<hr />
</body>
</html>Atributo noshade do HTML <hr>
O atributo noshade remove o efeito de sombreamento 3D da linha horizontal.
O atributo noshade é um dos atributos obsoletos, mas é suportado por todos os navegadores.
Exemplo da tag HTML <hr> com o atributo noshade:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Shaded horizontal line :</p>
<hr />
<p>Noshaded horizontal line:</p>
<hr noshade />
</body>
</html>Para remover o visual padrão 3D ("sombreado") em CSS, dê ao <hr> uma borda plana e um fundo transparente. A regra padrão é desenhada com bordas sombreadas, então substituí-la por uma borda sólida simples (e limpando o fundo) produz uma linha plana — o mesmo resultado que o atributo noshade proporcionava.
Exemplo da tag HTML <hr> usada com a propriedade border:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
hr {
border: 1px solid #000000;
background: transparent;
}
</style>
</head>
<body>
<p>
A horizontal line specified with CSS border Property.
</p>
<hr />
</body>
</html>Atributo align do HTML
O atributo align especifica o alinhamento da linha.
O atributo align é um dos atributos obsoletos, mas é suportado por todos os navegadores.
Exemplo da tag HTML <hr> com o atributo align:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Lorem ipsum is simply dummy text...</p>
<hr align="left" width="70%" />
</body>
</html>Para posicionar um <hr>, defina uma width e controle sua margin horizontal — não text-align. Como <hr> é um elemento de bloco, text-align não o move. Use margin-right: auto para empurrá-lo para a esquerda, margin-left: auto para empurrá-lo para a direita, ou margin: 0 auto para centralizá-lo.
Exemplo da tag HTML <hr> usada com a propriedade margin:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
hr {
width: 50%;
margin-left: 0;
margin-right: auto;
}
</style>
</head>
<body>
<p>A horizontal line specified with CSS margin property</p>
<hr />
</body>
</html>Os atributos de apresentação da tag <hr> foram descontinuados no HTML5. Para estilização, usamos CSS em seu lugar.
Como Estilizar a Tag <hr>
A propriedade CSS border é usada para estilizar a linha horizontal.
Exemplo da tag HTML <hr> estilizada com a propriedade border:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
/* blue border */
hr.one {
border-top: 1px solid #1c87c9;
}
/* Dashed border */
hr.two {
border-top: 1px dashed #1c87c9;
}
/* Dotted border */
hr.three {
border-top: 1px dotted #1c87c9;
}
/* Thick border */
hr.four {
border: 1px solid #1c87c9;
}
/* Large rounded border */
hr.five {
border: 15px solid #1c87c9;
border-radius: 5px;
}
</style>
</head>
<body>
<p>Default:</p>
<hr />
<p>Styling "hr" tag</p>
<hr class="one" />
<hr class="two" />
<hr class="three" />
<hr class="four" />
<hr class="five" />
</body>
</html>Atributos
| Atributo | Valor | Descrição |
|---|---|---|
| align | left center right | Define o alinhamento horizontal de uma linha. Obsoleto no HTML5, mas ainda suportado pelos navegadores por compatibilidade retroativa. |
| noshade | noshade | Define que a linha será exibida sem efeito 3D. Obsoleto no HTML5, mas ainda suportado pelos navegadores por compatibilidade retroativa. |
| size | pixels | Define o tamanho de uma linha. Obsoleto no HTML5, mas ainda suportado pelos navegadores por compatibilidade retroativa. |
| width | pixels % | Define a largura de uma linha. Obsoleto no HTML5, mas ainda suportado pelos navegadores por compatibilidade retroativa. |
A tag <hr> suporta os Atributos Globais e os Atributos de Evento.