HTML Horizontal Line

By: Rajesh P.S.

HTML Horizontal Line is a self-closing tag that is used to create a horizontal line across the width of a web page. It is a simple and easy way to separate content on a web page visually.

The tag for horizontal line in HTML is <hr>. It can be used with or without attributes.

Here are the different ways to use the <hr> tag:

Without Attributes:

The simplest way to use the <hr> tag is without any attributes. This will create a horizontal line across the full width of the page.

<body> <h1>Welcome to my website</h1> <p>This is my first paragraph</p> <hr> <p>This is my second paragraph</p> </body>

Browser View

Welcome to my website

This is my first paragraph

This is my second paragraph

In the above code, the <hr> tag is used to separate the two paragraphs.

With Attributes:

The <hr> tag can also be used with different attributes to customize the appearance of the horizontal line. The following are the common attributes used with the <hr> tag:

color: This attribute is used to set the color of the horizontal line. It can be specified in any valid CSS color format such as color name, hexadecimal code, RGB value, etc.
size: This attribute is used to set the height of the horizontal line. It can be specified in pixels, em or percentage.
width: This attribute is used to set the width of the horizontal line. It can be specified in pixels, em or percentage.
align: This attribute is used to set the alignment of the horizontal line. It can be set to left, center or right.

<body> <h1>Welcome to my website</h1> <p>This is my first paragraph</p> <hr color="red" size="5" width="50%" align="center"> <p>This is my second paragraph</p> </body>

Browser View

Welcome to my website

This is my first paragraph

This is my second paragraph

In the above code, the <hr> tag is used with attributes to set the color, size, width and alignment of the horizontal line.

Is it necessary to close the <hr> tag in HTML?

The <hr> tag is an empty element, which means it does not require a closing tag. This is because the <hr> tag is used to create a horizontal line on the page and does not contain any content.

<!DOCTYPE html> <html> <head> <title>Example of <hr> tag without a closing tag</title> </head> <body> <h1>Welcome to my website</h1> <p>This is a paragraph of text.</p> <hr> <p>This is another paragraph of text.</p> </body> </html>

Browser View

Welcome to my website

This is a paragraph of text.

This is another paragraph of text.

In the code above, used the <hr> tag to create a horizontal line between two paragraphs of text. Note that we have not included a closing tag for the <hr> element.

While it is not necessary to include a closing tag for the <hr> element, it is still valid HTML to include one. If you do choose to include a closing tag, it should be written as <hr></hr>. However, this is not commonly used and is generally considered unnecessary.

Default height of a horizontal line created with the <hr> tag

The <hr> tag is used to create a horizontal line on a web page. The default height of a horizontal line created with the <hr> tag depends on the browser and the version of HTML being used.

In HTML5, the default height of a horizontal line created with the <hr> tag is typically 2 pixels. However, this may vary depending on the browser and its default styles. Additionally, the default height may be overridden by CSS styles applied to the <hr> element.

<!DOCTYPE html> <html> <head> <title>Default Height of <hr> Tag</title> </head> <body> <h1>Welcome to my website</h1> <p>This is a paragraph of text.</p> <hr> <p>This is another paragraph of text.</p> </body> </html>

Browser View

Welcome to my website

This is a paragraph of text.

This is another paragraph of text.

When view this example in a web browser, you can see that the horizontal line has a default height of 2 pixels. However, this may vary depending on the browser being used.

If you wanted to change the default height of the horizontal line, you could use CSS to modify its height property. For example, you could add the following CSS rule to increase the height of the horizontal line:

hr { height: 5px; }

With this CSS rule applied, the horizontal line would display with a height of 5 pixels instead of its default height of 2 pixels.

Browser View

Welcome to my website

This is a paragraph of text.

This is another paragraph of text.

Align a horizontal line in HTML

The <hr> tag is used to create a horizontal line on a web page. By default, the horizontal line is centered on the page. However, it is possible to align a horizontal line in HTML to the left, center, or right using CSS.

Here are two ways to align a horizontal line in HTML using CSS:

Using the text-align Property

One way to align a horizontal line in HTML is to use the text-align property to align the line within a container.

<!DOCTYPE html> <html> <head> <title>Aligning a Horizontal Line with the text-align Property</title> <style> .container { text-align: right; } </style> </head> <body> <div class="container"> <h1>Welcome to my website</h1> <p>This is a paragraph of text.</p> <hr> <p>This is another paragraph of text.</p> </div> </body> </html>

Browser View

Welcome to my website

This is a paragraph of text.

This is another paragraph of text.

In the above example, added a container <div> element and applied the text-align property to the container. Set the text-align property to "right" to align the horizontal line to the right of the container.

When view this example in a web browser, you can see that the horizontal line is aligned to the right of the container.

Using the margin Property

Another way to align a horizontal line in HTML is to use the margin property to adjust the spacing around the line.

<!DOCTYPE html> <html> <head> <title>Aligning a Horizontal Line with the margin Property</title> <style> hr { margin-left: 20%; margin-right: 20%; } </style> </head> <body> <h1>Welcome to my website</h1> <p>This is a paragraph of text.</p> <hr> <p>This is another paragraph of text.</p> </body> </html>

Browser View

Welcome to my website

This is a paragraph of text.

This is another paragraph of text.

In the above example, applied the margin property to the <hr> element to create a margin of 20% on the left and right sides of the line. This effectively aligns the line to the center of the container.

Use CSS to style the <hr> tag

The <hr> tag is used to create a horizontal line on a web page, which can be used to visually separate content on the page. Although the <hr> tag has some default styling, you can use CSS (Cascading Style Sheets) to apply additional styling and customize the appearance of the horizontal line.

Change the Color of the Horizontal Line

By default, the horizontal line created with the <hr> tag has a gray color. You can use CSS to change the color of the line to any color you want.

<!DOCTYPE html> <html> <head> <title>Styling the HR Tag with CSS</title> <style> hr { border: none; border-top: 3px solid red; height: 1px; } </style> </head> <body> <h1>Welcome to my website</h1> <p>This is a paragraph of text.</p> <hr> <p>This is another paragraph of text.</p> </body> </html>

Browser View

Welcome to my website

This is a paragraph of text.

This is another paragraph of text.

In the above example, used the border property to remove the default border from the horizontal line. Then used the border-top property to add a 3-pixel solid red border to the top of the line. Finally, set the height property to 1 pixel to adjust the height of the line.

When you view this example in a web browser, you can see that the horizontal line has been styled with a red color.

Change the Width of the Horizontal Line

By default, the horizontal line created with the <hr> tag has a width of 100%. You can use CSS to adjust the width of the line to any value you want.

<!DOCTYPE html> <html> <head> <title>Styling the HR Tag with CSS</title> <style> hr { width: 50%; border: none; border-top: 3px solid gray; height: 1px; } </style> </head> <body> <h1>Welcome to my website</h1> <p>This is a paragraph of text.</p> <hr> <p>This is another paragraph of text.</p> </body> </html>

Browser View

Welcome to my website

This is a paragraph of text.

This is another paragraph of text.

In the above example, used the width property to set the width of the horizontal line to 50%. You have also adjusted the border and height properties to style the line as a thin gray border.

When you view this example in a web browser, you can see that the horizontal line has been styled with a width of 50%.

Add Padding and Margin to the Horizontal Line

You can use CSS to add padding and margin to the horizontal line created with the <hr> tag.

<!DOCTYPE html> <html> <head> <title>Styling the HR Tag with CSS</title> <style> hr { padding: 20px; margin: 20px; border: none; border-top: 3px solid gray; height: 1px; } </style> </head> <body> <h1>Welcome to my website</h1> <p>This is a paragraph of text.</p> <hr> <p>This is another paragraph of text.</p> </body> </html>

Browser View

Welcome to my website

This is a paragraph of text.

This is another paragraph of text.

In the above example, used the padding property to set the padding of the horizontal line to 20px.

Conclusion:

The <hr> tag is a simple and useful HTML element that serves many purposes on a web page. By using it effectively, web developers can create a more organized, aesthetically pleasing, and user-friendly webpage for their audience.

Next > HTML Comments

Related Topics

More Related Topics.....