O que é a tag HTML HR e como usá-la?

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.

O RH marcação é usado 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. Elementos semânticos descreva seu significado em termos de 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 colocado um linha horizontal na parte superior ou inferior do elemento, mas, em geral, a tag HR era mais fácil de usar para isso objetivo.

Começando com HTML5, a tag HR tornou-se semântica e agora define uma quebra temática de nível de parágrafo, que é um 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.

instagram viewer

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):

Captura de tela mostrando como estilizar a tag HR em HTML usando CSS inline
Usando CSS Inline para Estilizar RH.Jennifer Kyrnin

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

Captura de tela mostrando como usar CSS externo para estilizar a tag HR em HTML
Usando CSS Externo para Estilizar o RH.Jennifer Kyrnin
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:

Captura de tela do atributo de tamanho para a tag HR em HTML
Estilizando a Tag HR em HTML4.Jennifer Kyrnin

Há muito mais liberdade em estilização de linhas horizontais em CSS versus HTML.

Apenas o largura e altura os estilos são consistentes em todos os navegadores, portanto, algumas tentativas e erros podem ser necessárias 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.

instagram story viewer