O elemento HR
Publicado em: 2006-06-19 — 133.368 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 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
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
Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Visite o site dos livros.
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.
Tem como usar hr como background? Quero uma linha no fundo e uma imagem no meio dessa linha, pra usar como botao de rolagem
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.
Não sei o que eu faria sem o site do Maujor. Sensacional! Parabéns Maujor!
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 =]
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”.
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.
[…] Mas se você é teimoso e deseja continuar utilizando a tag HR, este link pode ajudar-lhes: O elemento HR. […]
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
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.
Ó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?
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/…
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 +!!!
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.
Muito bom Maujor, ótimas dicas!
Abraços!
Bom artigo maujor.
Não sabia que o hr esta em extinção para versao 2.0 do xhtml.
Abração!
Normalmente a solução é não usar o
hrSó pra variar o IEca tem pro com isso…
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