<hr>
Demo of HR Tag
<hr width='100'>
As you can see now we have limited the width of the line. Now let us add color to this line.
<hr width=50 color=red>
<hr width=50 size=20>
<hr width=50 size=20 noshade>
<hr color=red size=20 width='50%' align=right>
In HTML5, the <hr> tag represents a thematic break between paragraph-level elements, indicating a shift in topic or section within content. It's more than just a visual divider; it conveys meaning about the structure of the document. For instance, when transitioning between two related topics, an <hr> can signify this shift:
<h2>Introduction</h2>
<p>This section introduces the main concepts.</p>
<hr>
<h2>Details</h2>
<p>This section provides detailed information.</p>
While the default appearance of the <hr> tag is a simple horizontal line, CSS allows us to customize its style to match the design of our website. Here are some advanced styling techniques:
<style>
hr.custom-thick {
border: none;
height: 5px;
background-color: #333;
}
</style>
<hr class="custom-thick">
<style>
hr.dashed {
border: none;
border-top: 2px dashed #999;
}
hr.dotted {
border: none;
border-top: 2px dotted #999;
}
</style>
<hr class="dashed">
<hr class="dotted">
<style>
hr.shadow {
border: none;
height: 2px;
background-color: #ccc;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
</style>
<hr class="shadow">
<style>
hr.vertical {
width: 1px;
height: 100px;
background-color: #000;
border: none;
}
</style>
<hr class="vertical">
<article>
<h2>Section 1</h2>
<p>Content for section 1.</p>
<hr>
<h2>Section 2</h2>
<p>Content for section 2.</p>
</article>
<form>
<fieldset>
<legend>Personal Information</legend>
<label>Name:</label>
<input type="text">
<hr>
<label>Email:</label>
<input type="email">
</fieldset>
</form>
<style>
hr.fancy {
border: none;
height: 2px;
background-image: linear-gradient(to right, #f00, #ff0, #0f0);
}
</style>
<hr class="fancy">
By incorporating these advanced techniques and best practices, we can effectively use the <hr> tag to improve the structure and aesthetics of our web pages.
15-01-2020 | |
This saved my life! I had to remove a boring footer and used this to bring the page to life. Thanks plus2net! |