Logo do siteSilhueta da face do Maujor seguida do texto Maujor o dinossauro das CSS

Menu hamburger Três barras horizontais na cor laranja destinadas a ser clicada para abrir o menu menu do site

Você está no BLOG do Maujor. IR PARA O SITE

O elemento HR

Publicado em: 2006-06-19 — 80.879 visualizacoes         

Esta página integra o Compêndio sobre o uso dos elementos HTML e descreve o elemento:HR

O elemento HR está previsto nas Recomendações do W3C para o HTML 4.01 e destina-se a inserir uma Régua Horizontal (HR é a abreviatura de Horizontal Rule – em inglês) em um documento Web, quando renderizado por um agente de usuário em modo gráfico ou visual.  

Trata-se de um elemento de apresentação, tal como são os elementos B (para bold) e I (para itálico) e portanto contrários à filosofia de separar conteúdo de apresentação. Por razões que fogem ao escopo desta matéria abordar, o W3C os mantém válidos pelo menos até o XHTML 1.1.
Contudo, nos rascunhos das Recomendações para o XHTML 2.0
já não são mais previstos os elementos I, B e HR. Assim, por uma longo tempo ainda poderemos usar sem problemas os citados elementos.
Vamos abordar nesta matéria o elemento HR

O elemento HR

Trata-se de um elemento vazio, isto é não existe a tag de fechamento, basta escrever simplesmente <hr>. Se você estiver codificando XHTML lembre-se: elementos vazios devem ter uma tag de fechamento ou a tag de abertura deve terminar com />. Como exemplo; <hr />.

Atributos do elemento HR

align = left | center |right
Este atributo define o alinhamento da régua à esquerda, no centro ou à direita. O valor default é center
noshade
Por padrão a régua é renderizada com um efeito de sombra (simula entalhe). Especificar este atributo faz com que a régua seja renderizada em forma sólida.
size
Controla a altura da régua.
width
Controla o comprimento da régua. O valor default é de 100% ou seja, a régua estende-se por toda a largura da tela.

Nota: Todos os atributos para réguas horizontais estão em desuso. Use CSS para obter os efeitos dos atributos.

Marcação do elemento HR

A seguir alguns exemplos de marcação EM DESUSO, mostrados como ilustração e comparações com emprego de folha de estilos.

Exemplos:

<hr />:



<hr width=”50%” />:



<hr noshade=”noshade” />:



<hr size=”10″ />:



<hr noshade=”noshade” width="40%" size="20px" align="right" />


Estilizando o elemento HR

O Internet Explorer renderiza de forma ligeiramente diferente dos demais navegadores este elemento. Quando se estiliza com folhas de estilo em cascata, também enfrentamos o mesmo problema de diferença de renderização, contudo em certos casos há meios de se igualar a apresentação.

Alinhar à esquerda


hr {
	width: 30%;
	text-align: left; /* Para o IE */
	margin: 0 auto 0 0; /* Para navegadores standard */
	}

Alinhar à direita


hr {
	width: 50%;
	text-align: right; /* Para o IE */
	margin-right:0 0 0 auto; /* Para navegadores standard */
	}


Retirar o efeito de sombra

Este efeito default do elemento é conseguido com aplicação de bordas superior e inferior de 1px em tons cores ligeramente diferentes. Para retirar o efeito, zeramos as bordas default e colocamos um nova borda somente no topo ou somente em baixo


hr {
	border-width: 0; 
	height: 1px;
	border-top-width: 1px;
	}

Estilizar com altura e borda colorida

É possível ter o elemento em forma de um retângulo com bordas coloridas. Neste caso o Internet explorer renderiza as bordas coloridas mas também coloca o efeito sombra nas bordas esquerda e superior. Os navegadores standards renderizam a borda colorida sólida sem o efeito


hr {
	height:40px; 
	border: 1px solid; 
	border-color: #f00 #960 #00f #0f0;
	}

Estilizar com altura borda e fundo coloridos


hr {
	width: 150px;
	height: 60px; 
	border: 5px solid; 
	border-color: #f00 #960 #00f #0f0;
	background: #ff0;
	}

Estilizar com uma imagen de fundo

Esta estilização falha no Internet Explorer que não reconhece a declaração border-width:0 para retirar a borda que dá o efeito sombra padrão


hr {
	height:3px;
	border-width:0;
	background: transparent url(linha.jpg) center no-repeat;
	}

Screenshots

A seguir screenshot da estilização acima em navegadores standards e no Internet Explorer para você comparar

Em navegadores standards

screenshot para renderização em navegador standard

No Internet Explorer

screenshot para renderização no Internet Explorer

Outros exemplos

A seguir mostro mais alguns exemplos de HR estilizadas demonstrando que o limite é a sua imaginação, já que as possibilidades de estilização são muitas







[ « anterior ]   [ index ]    [ próximo » ]

[ atualizações: ]
2006-07-06: Matéria incluida no Compêndio sobre uso dos elementos HTML

Livros do Maujor

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Clique a "capinha" para visitar o site do livro.

capa livro jQuery   capa livro ajaxjQuery   capa livro css   capa livro html   capa livro javascript   capa livro html5   capa livro css3   capa livro jQuery Mobile   capa livro jQuery UI   capa livro SVG   capa livro RWD   capa livro foundation   capa livro HTML5 e CSS3   capa livro Bootstrap3   capa livro Sass e Compass

Esta matéria foi publicada em: 2006-06-19 (segunda-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para http://www.maujor.com/blog/2006/06/19/elemento-hr/trackback no seu site.

18 comentários na matéria: “O elemento HR”

  1. JacqueNo Gravatar disse:

    Tem como usar hr como background? Quero uma linha no fundo e uma imagem no meio dessa linha, pra usar como botao de rolagem

  2. Lucas MoreiraNo Gravatar disse:

    Rael, pra ser bem sincero o IE não tem problemas com a tag HR.
    O IE É o problema! Valeu pelo artigo Maujor. Estava procurando sobre o alinhamento da HR e de quebra aprendi o atributo noshade.

  3. Leandro R. SantosNo Gravatar disse:

    Não sei o que eu faria sem o site do Maujor. Sensacional! Parabéns Maujor!

  4. Felipe I. de LimaNo Gravatar disse:

    quando eu vi os efeitos q são possiveis se fazer na tag HR eu percewbi o quanto eu ainda tenho q estudar
    continue assim =]

  5. Brynner FerreiraNo Gravatar disse:

    Separador vertical de 20 pixels

    .sv20 {margin:0px; height:20px;}

    Uso: [ p class=”sv20″ ][ !–separador vertical 20 pixels– ][ /p ]

    Seria bom se a W3C definisse uma tag mutante. Exemplo: [ sv20 /] (separador vertical 20 px), [ sh50 ] (separador horizontal 50 px)

    Usei cochetes, pois não consegui postar com “maior e menor que”.

  6. Arley BarrosNo Gravatar disse:

    o problema das margens se resolve facilmente, basta levar em consideração que o IE sempre vai renderizar uma margem de 7 pixels a mais que os navegadores de verdade, aí basta adicionar uma css em um codigo comentado negativando a margem em 7px.

    bjo me liga.

  7. WEBtudinho » Simulando o elemento HR disse:

    […] Mas se você é teimoso e deseja continuar utilizando a tag HR, este link pode ajudar-lhes: O elemento HR. […]

  8. HanoverNo Gravatar disse:

    Encontrei um alternativa melhor para o problema no IE.


    hr {
    display : list-item;
    list-style : url(hr.gif) inside;
    filter : alpha(opacity=0);
    width : 0;
    }

    Esse código deve ser lido apenas pelo internet explorer.
    Mais detalhes em Image-Replacement Through CSS

  9. Willin BazzoNo Gravatar disse:

    Olá, eu achei uma solução que apesar de ser uma gambiarra braba, funcionou bem para o problema com as bordas que aparecem no HR do explorer.

    Segue o código:

    ### no HTML:

    inserir o elemento HR numa div com class=”hr”

    ### no CSS:
    div.hr { height: 15px; background: #fff url(imagens/f_hr.gif) no-repeat scroll center;}
    div.hr hr { display: none; }

    Espero que aproveitem 😉

    Abraços.

  10. Marcio FernandesNo Gravatar disse:

    Ótimo artigo,

    Mas eu gostaria de saber como que a gente faz para alinhar a ao centro? Alguem poderia me responder?

    Pq não se usa mais atributos dentro das tags, então como a gente faz pelo css?

  11. João Paulo Fechine SetteNo Gravatar disse:

    Achei a matéria legal..(tsc)

    sempre conheci o hr, mas, nunca me aprofundei sobre tal.
    Particularmente eu acho que o hr poderia continuar nas especificações da w3c, mesmo para o xhtml 1.1 posterior. Digo isso pensando que, apesar de ser algo meramente “visual”, não tem sentido semântico.. é como outros elementos do html que servem para um código até mesmo organizado não acham… um “separador de conteúdo”..

    Eu particularmente gosto de fazer algo meio estranho.. coloco hrs para seprar os conteúdos e coloco-o com display:none…
    No querido “ctr + shift + s” (webdevelopper – firefox) fica bem organizado!

    Enfim, eu gosto do hr – viva o/…

  12. junioNo Gravatar disse:

    Dúvidas…a pessoa que pretende a se especializar na área de WebStandards, qual é o melhor curso de graduação a fazer?-Sistema da Informação ou Ciência da Computação?-Agradeço desde já. T +!!!

  13. Osny Santos NettoNo Gravatar disse:

    Como sempre o IE atrapalhando, logo se percebe que mesmo a versão 7 do navegador, não mudou nada em relação a renderização da tag HR.
    O jeito é deixa-las de lado mesmo.
    Muito boa matéria.

  14. Felipe RanieriNo Gravatar disse:

    Muito bom Maujor, ótimas dicas!
    Abraços!

  15. Lucas AlvesNo Gravatar disse:

    Bom artigo maujor.
    Não sabia que o hr esta em extinção para versao 2.0 do xhtml.
    Abração!

  16. Marco GomesNo Gravatar disse:

    Normalmente a solução é não usar o hr

  17. No Gravatar disse:

    Só pra variar o IEca tem pro com isso…

  18. RaelNo Gravatar disse:

    o principal problema que eu encontro e, que até hoje nao achei solução para os hr é a diferença de renderização do IE com relação às margens….
    por algum motivo o IE atribui uma margem ao HR que é impossivel de se eliminar :-/

    Se alguem souber uma solução, por favor me avise… valeu

Comentário:





Teclar "Enter" cria um novo parágrafo. Teclar "Shift + Enter" causa uma quebra de linha.

Subscribe without commenting

topo