Creating a Stylish Horizontal Ruler in HTML

HTML horizontal rules, also known as horizontal lines, are used to create a visual separation between different sections of content on a webpage. They are represented by the <hr> tag.

Using the hr tag is very simple, as it requires only one line of code:

<hr>

The <hr> tag does not have any closing tag, it is a self-closing tag. It does not require any attributes, and it does not have any specific properties or styling options.

When rendered by a browser, the <hr> tag creates a horizontal line that spans the full width of its container element, like a div or a section. You can use it to separate different parts of the content, like different sections of an article, different elements in a form, or between different sections of a webpage.

You can also use CSS to style the <hr> tag, such as changing its color, width, and height.

The following are some common attributes used with the

tag:

align: Specifies the horizontal alignment of the rule on the page (left, right, center).
width: Specifies the width of the rule in pixels or as a percentage of the containing element.
size: Specifies the height of the rule in pixels.
color: Specifies the color of the rule.
noshade: Specifies that the rule should have a solid color instead of a shading effect.

Example

<hr align="center" width="70%" size="3" color="#8080ff">

Source Code

<html>
  <head>
    <title>Horizontal Rule</title>
  </head>
  <body>
    <h1>Heading 1</h1>
    <hr>
  <h2>Heading 2</h2>
  <hr align="center" width="70%" size="3" color="#8080ff">
  </body>
</html>

To download raw file Click Here

Between the two headings, there is a horizontal rule represented by the <hr> tag. This creates a horizontal line on the webpage that spans the full width of its container element, in this case the <body> element. It separates the two headings and helps to visually break up the content on the webpage, making it easier to read and understand.

A second horizontal rule <hr> tag having the following attributes:

align: The rule is centered on the page.
width: The width of the rule is 70% of the containing element.
size: The height of the rule is 3 pixels.
color: The color of the rule is #8080ff (a shade of blue).

Creating a Stylish Horizontal Ruler in HTML

Source Code

HTML Tutorial