HTML HR: Guia R�pido

<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

See the Pen HTML hr - Exemplo 1 by Wladimir Batista Castro (@wladimirrj) on CodePen.

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

See the Pen HTML hr - Exemplo 2 by Wladimir Batista Castro (@wladimirrj) on CodePen.

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

HTML hr: como utilizar a tag hr para criar quebras de linhas tem�ticas

Nesta documentação aprenda sobre o elemento HTML hr, como aplicar a tag hr em código HTML e como podemos utilizá-la para criar quebras de linhas temáticas.