Como fazer linha horizontal com `` HTML
Uma linha horizontal em HTML é um elemento que permite dividir visualmente o conteúdo de um site em duas seções. A tag correspondente, <hr>, é simples e não requer um elemento de fechamento.
O que é linha horizontal em HTML?
Em HTML, linhas horizontais são usadas para criar divisórias visíveis e contínuas entre parágrafos ou outras seções de conteúdo em um documento HTML. Esse elemento é definido com a tag <hr> e melhora a estrutura e a legibilidade de uma página web. Além da função visual, a <hr> tem um significado semântico: indicar uma mudança de tema ou pausa temática.
A tag <hr> HTML pode ser inserida em qualquer lugar dentro do elemento e não necessita de um elemento de fechamento. A sigla “hr” vem de horizontal ruler (régua horizontal). Essa tag suporta todos os atributos HTML e é compatível com os principais navegadores.
- Fique online com 99,99% de tempo de atividade e segurança robusta
- Aumente o desempenho com um clique à medida que o tráfego cresce
- Inclui domínio gratuito, SSL, e-mail e suporte 24 horas por dia, 7 dias por semana
<hr> HTML: Sintaxe e exemplo
A sintaxe da tag <hr> HTML é simples, já que não exige atributos ou parâmetros adicionais:
<hr>A funcionalidade desse elemento pode ser demonstrada com um exemplo simples. Vamos usar um parágrafo (<p>) e uma citação (<blockquote>), separados por uma linha horizontal. O código correspondente é o seguinte:
<!DOCTYPE html>
<html>
<body>
<h1>Linha horizontal HTML</h1>
<p>HTML é a linguagem de marcação padrão utilizada para criar documentos para apresentação na internet. Ela descreve a estrutura de uma página web e permite definir textos, imagens, ligações e vários outros elementos.</p>
<hr>
<blockquote>"HTML é fácil de aprender e fornece uma base sólida para a criação de sites."</blockquote>
</body>
</html>
Personalizar linha horizontal em HTML
A aparência de uma linha horizontal em HTML pode ser ajustada. Mesmo que antigamente fossem usados atributos como align, color, noshade, size e width, eles não são mais suportados pelo HTML5. Atualmente, utiliza-se o atributo style com CSS.
Alinhar linha horizontal HTML
Em vez de align, você pode usar o seguinte código:
<!DOCTYPE html>
<html>
<body>
<h1>Linha Horizontal em HTML</h1>
<p>HTML é a linguagem de marcação padrão utilizada para criar documentos para apresentação na internet. Ela descreve a estrutura de uma página web e permite definir textos, imagens, ligações e vários outros elementos.</p>
<hr style="width:50%;text-align:left;margin-left:0">
<blockquote>"HTML é fácil de aprender e fornece uma base sólida para a criação de sites."</blockquote>
</body>
</html>Alterar cor de linha horizontal HTML
Para alterar a cor da linha horizontal, utilize a propriedade color:
<!DOCTYPE html>
<html>
<body>
<h1>Linha Horizontal em HTML</h1>
<p>HTML é a linguagem de marcação padrão utilizada para criar documentos para apresentação na internet. Ela descreve a estrutura de uma página web e permite definir textos, imagens, ligações e vários outros elementos.</p>
<hr style="color:yellow;background-color:gray">
<blockquote>"HTML é fácil de aprender e fornece uma base sólida para a criação de sites."</blockquote>
</body>
</html>Remover sombras de linha horizontal HTML
Em vez de noshade, você pode remover sombras com este código:
<!DOCTYPE html>
<html>
<body>
<p>Uma linha horizontal padrão:</p>
<hr>
<p>Com CSS:</p>
<hr style="height:2px;border-width:0;color:gray;background-color:gray">
</body>
</html>Ajustar altura de linha horizontal HTML
Para modificar a altura da linha horizontal, use height:
<!DOCTYPE html>
<html>
<body>
<p>Uma linha horizontal padrão:</p>
<hr>
<p>Uma linha horizontal com altura de 50 pixels:</p>
<hr style="height:50px">
</body>
</html>Ajustar largura de linha horizontal HTML
A largura da linha horizontal pode ser definida com a propriedade width CSS:
<!DOCTYPE html>
<html>
<body>
<p>Uma linha horizontal padrão:</p>
<hr>
<p>Uma linha horizontal com 30% de largura:</p>
<hr style="width:30%">
</body>
</html>- SSL Wildcard grátis para mais segurança
- Registro privado grátis para mais privacidade
- Domain Connect grátis para configurar DNS fácil