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
HRTrata-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 />.
HRNota: Todos os atributos para réguas horizontais estão em desuso. Use CSS para obter os efeitos dos atributos.
HRA 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 size=”10″ />:
HRO 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.
hr {
width: 30%;
text-align: left; /* Para o IE */ margin: 0 auto 0 0; /* Para navegadores standard */ }
hr {
width: 50%;
text-align: right; /* Para o IE */ margin-right:0 0 0 auto; /* Para navegadores standard */ }
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;
}
É 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;
}
hr {
width: 150px;
height: 60px;
border: 5px solid;
border-color: #f00 #960 #00f #0f0;
background: #ff0;
}
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;
}
A seguir screenshot da estilização acima em navegadores standards e no Internet Explorer para você comparar
Em navegadores standards
No Internet Explorer
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 » ]
Em 2006 comecei a publicar nesse blog uma série de desafios CSS que consistiam em…
Há muito tempo que eu não publico um "Teste seu conhecimento". Esta semana, revendo algumas…
Introdução Elementos da marcação HTML podem ser aninhados uns dentro de outros, criando-se uma cadeia…
HTML5? Web universal? É comum eu me deparar com dúvidas sobre a HTML5 não só…
Quem é Tab Atkins Jr? Tab Atkins Jr, um desenvolvedor americano, trabalhou durante muitos anos…
Pessoal, a BrazilJS Conf 2013 disponibilizou para o Maujor cupons de desconto para serem oferecidos…
View Comments
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.
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/...