Marca HTML <hr>

Hoje abordaremos exemplos de tag hr . Ao usar exemplos , antecipamos o cumprimento dos objetivos de aprendizagem.

A tag HTML <hr> é uma tag de fechamento automático que cria uma linha ou regra horizontal em uma página da web. A tag <hr> é normalmente usada para separar visualmente o conteúdo, como parágrafos ou seções, dentro de uma página da web.

Sempre que alterações temáticas estiverem sendo feitas no conteúdo, insira a tag <hr> :

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<title>Mr Examples</title>
</head>
<body>
<h1>The Languages used for the making of the Applications</h1>
<p>Kotlin is a cross-platform, statically typed, general-purpose programming language with type inference. Kotlin is designed to interoperate fully with Java, and the JVM version of Kotlin's standard library depends on the Java Class Library. Still, type inference allows its syntax to be more concise.</p>
<hr>
<p>Objective-C is a general-purpose, object-oriented programming language that adds Smalltalk-style messaging to the C programming language. Initially developed by Brad Cox and Tom Love in the early 1980s, NeXT selected it for its NeXTSTEP operating system.</p>
<hr>
<p>Ruby is an interpreted, high-level, general-purpose programming language which supports multiple programming paradigms. It was designed with an emphasis on programming productivity and simplicity. In Ruby, everything is an object, including primitive data types.</p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Usando CSS, alinhe o elemento <hr> da seguinte maneira:

Example:

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
<title>Mr Examples</title>
</head>
<body>
<hr style="width:80%; text-align:right; margin-right:2px">
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Aqui está um exemplo de um noshaded usando CSS:

Example:

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
<title>Mr Examples</title>
</head>
<body>
<hr style="height:3px; border-width:0; color:black; background-color:black">
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Como configurar a altura de uma tag <hr> usando CSS:

Example:

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
<title>Mr Examples</title>
</head>
<body>
<hr style="height:45px">
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Como configurar a largura de um elemento <hr> usando CSS:

Example:

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
<title>Mr Examples</title>
</head>
<body>
<hr style="width:30%">
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Aqui está o exemplo completo da tag <hr> com as tags <form> e <header> também:

Example:

<!DOCTYPE html>

<html>

<head>

<title>Mr Examples</title>

<style>

hr{

width: 50%;

border: 2px solid purple;

border-radius: 50px;

}

</style>

</head>

<body>

<h1>Mr Examples</h1>

</header>

<main>

<h2>Welcome to Mr Examples</h2>

<p>This is the content of Mr Examples.</p>

<hr>

<h2>My Services</h2>

<p>Here are the services that we offer:</p>

<ul>

<li>JavaScript</li>

</ul>

<hr>

<h2>Contact Me</h2>

<p>If you're interested in working with us, please contact me at [email protected] or fill out the form below.</p>

<form>

<br>

<label for="email">Email:</label>

<br>

<label for="message">Message:</label>

<br>

</form>

</main>

</body>

</html>

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Índice-

Marca HTML <hr>:

Uso de tags HTML <hr>

Em HTML, a Tag hr <hr> especifica uma quebra temática (por exemplo, uma mudança de tópico).

O elemento <hr> geralmente é apresentado como uma régua horizontal empregada para dividir o conteúdo (ou indicar uma alteração) em uma página HTML .

Vantagens da tag HTML <hr>

A tag HTML <hr> oferece várias vantagens quando usada corretamente no design e desenvolvimento de páginas da web:

Ao separar visualmente o conteúdo com uma linha horizontal, a tag <hr> pode ajudar a melhorar a legibilidade e a capacidade de digitalização de uma página da web. Isso torna mais fácil para os usuários distinguir entre diferentes seções de conteúdo.
A tag <hr> é um elemento HTML simples e fácil de usar que não requer nenhuma codificação ou estilo complexos. É uma maneira rápida de adicionar uma linha horizontal a uma página da web.
A tag <hr> pode ajudar a melhorar a acessibilidade para usuários com deficiências, fornecendo um indicador visual da estrutura do conteúdo em uma página da web.
A tag <hr> é suportada por todos os principais navegadores da Web, tornando-a um elemento HTML confiável e amplamente utilizado.
A tag <hr> pode ser personalizada com atributos como tamanho, largura, cor e alinhamento para se adequar ao design e estilo de uma página da web. Isso permite que web designers e desenvolvedores criem um separador exclusivo e visualmente atraente para suas páginas da web.

Compatibilidade do navegador

Elemento
<hr>	Sim	Sim	Sim	Sim	Sim

Atributos

Global

A tag hr <hr> lida de forma semelhante com atributos globais em HTML.

Evento

A tag hr <hr> também contém atributos de evento em HTML.

CSS predefinido

O elemento <hr> é frequentemente gerado com os valores padrão fornecidos:

hr {
display: block;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 1px;
}

Se este artigo foi informativo o suficiente para atingir seus objetivos educacionais, assine nosso boletim informativo abaixo para estar em contato com as informações técnicas mais recentes neste site.

Nós valorizamos o seu feedback.

Marca HTML <hr>

Example:

Example:

Example:

Example:

Example:

Example:

Uso de tags HTML <hr>

Vantagens da tag HTML <hr>

Compatibilidade do navegador

Atributos

Global

Evento

CSS predefinido

Sentindo entediado?