Como inserir linhas em HTML com a tag HR

O que saber

• Basta digitar <hora> para inserir uma linha em HTML com a tag HR.
• Edite as características da linha editando CSS em um documento HTML5.

A tag HR é usada em documentos da web para exibir uma linha horizontal na página, às vezes chamada de régua horizontal. Ao contrário de algumas tags, esta não precisa de uma tag de fechamento. Digite <hora> para inserir a linha.

A etiqueta de RH é semântica?

No HTML4, a tag HR não era semântica. Os elementos semânticos descrevem seu significado em termos do navegador, e o desenvolvedor pode entender facilmente. A tag HR era apenas uma maneira de adicionar uma linha simples a um documento onde você quiser. Definir o estilo apenas da borda superior ou inferior do elemento onde você deseja que a linha apareça coloque uma linha horizontal na parte superior ou inferior do elemento, mas, em geral, a tag HR era mais fácil de usar para esse propósito. Começando com HTML5, a tag HR tornou-se semântica e agora define uma quebra temática no nível do parágrafo, que é uma quebra no fluxo do conteúdo que não garante uma nova página ou outro delimitador mais forte – é uma mudança de tópico. Por exemplo, você pode encontrar uma marca de RH após uma mudança de cena em uma história ou pode indicar uma mudança de tópico em um documento de referência.

Atributos de RH em HTML4 e HTML5

A linha se estende por toda a largura da página. Alguns atributos padrão descrevem a espessura, localização e cor da linha, mas você pode alterar essas configurações se desejar. No HTML4, você pode atribuir os atributos simples da tag HR, incluindo alinhamento, largura e noshade. O alinhamento pode ser definido para deixou, Centro, direito, ou justificar. A largura ajusta a largura da linha horizontal do padrão 100 por cento que estende a linha pela página. O nenhuma sombra atributo renderiza uma linha de cor sólida em vez de uma cor sombreada. Esses atributos são obsoletos em HTML5. Em vez disso, você deve usar CSS para definir o estilo de suas tags HR em documentos HTML5. Este é um exemplo HTML5 de estilização da linha horizontal para ter 10 pixels de altura usando CSS inline (estilos inseridos diretamente no documento junto com HTML):

Outra maneira de estilizar linhas horizontais em HTML5 é usar um arquivo CSS separado e criar um link para ele a partir do documento HTML. No arquivo CSS, você escreveria o estilo desta forma:

hr {
altura: 10px
}

O mesmo efeito em HTML4 requer que você adicione um atributo ao conteúdo HTML. Veja como alterar o tamanho da linha horizontal com o Tamanho atributo:

Há muito mais liberdade em estilizar linhas horizontais em CSS do que em HTML. Apenas o largura e altura os estilos são consistentes em todos os navegadores, portanto, algumas tentativas e erros podem ser necessários ao usar outros estilos. A largura padrão é sempre 100 por cento da largura da página da web ou elemento pai. A altura padrão da regra é de dois pixels.