Horizontal rule - line html code

WE can draw lines across the screen or of some particular length by using <hr> tag. This <hr> tag can take some attributes and accordingly display the line inside our html pages. Let us try this simple hr tag. The output is below it.
<hr>
Demo of HR Tag
Now let us add width to it like this
<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>


What about size ?

<hr width=50 size=20>


To make it solid we have to add noshade attribute.

<hr width=50 size=20 noshade>


Align : Left, right or center
<hr color=red size=20 width='50%' align=right>

Semantic Meaning of the <hr> Tag

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>

Advanced Styling Techniques with CSS

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:

Customizing Thickness and Color

<style>
  hr.custom-thick {
    border: none;
    height: 5px;
    background-color: #333;
  }
</style>
<hr class="custom-thick">

Creating Dashed or Dotted Lines

<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">

Adding Shadows for Depth

<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">

Creating Vertical Lines

<style>
  hr.vertical {
    width: 1px;
    height: 100px;
    background-color: #000;
    border: none;
  }
</style>
<hr class="vertical">

Practical Use Cases

Separating Sections in Articles

<article>
  <h2>Section 1</h2>
  <p>Content for section 1.</p>
  <hr>
  <h2>Section 2</h2>
  <p>Content for section 2.</p>
</article>

Dividing Content in Forms

<form>
  <fieldset>
    <legend>Personal Information</legend>
    <label>Name:</label>
    <input type="text">
    <hr>
    <label>Email:</label>
    <input type="email">
  </fieldset>
</form>

Enhancing Visual Design

<style>
  hr.fancy {
    border: none;
    height: 2px;
    background-image: linear-gradient(to right, #f00, #ff0, #0f0);
  }
</style>
<hr class="fancy">

Best Practices

  • Semantic Use: Use the <hr> tag to indicate a thematic break or shift in content, not just as a decorative element.
  • Styling with CSS: Avoid using deprecated attributes like color, size, or width directly in the <hr> tag. Instead, use CSS for styling to maintain separation of content and presentation.
  • Accessibility Considerations: Ensure that the use of <hr> enhances the document's structure for assistive technologies, providing clear divisions between sections.

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.


HTML Font style by CSS Managing font size and style

Subscribe

* indicates required
Subscribe to plus2net

    plus2net.com







    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!



    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles Contact us
    ©2000-2025   plus2net.com   All rights reserved worldwide Privacy Policy Disclaimer