HTML Horizontal Line Using the <hr> Tag

In HTML, the <hr> tag is used to create a horizontal line, also known as a horizontal rule. It's a simple yet useful element that can be used to visually separate content on a webpage. In this article, we'll explore how to use the <hr> tag in your HTML code, with examples and outputs.

The <hr> tag is a self-closing tag, which means it doesn't require a closing tag. It can be used anywhere within the body of an HTML document, and it's typically used to visually separate different sections or content on a page. Let's look at an example to illustrate this concept:

1<h1>Section 1</h1>
2<p>This is the content of section 1.</p>
3<hr>
4<h1>Section 2</h1>
5<p>This is the content of section 2.</p>

In this example, we have two sections of content, each with a heading and a paragraph. The <hr> tag is used between the two sections to create a horizontal line, visually separating the two sections.

The <hr> tag also has several attributes that can be used to customize its appearance. The size attribute can be used to specify the height of the line, and the color attribute can be used to specify the color of the line. For example:

1<h1>Section 1</h1>
2<p>This is the content of section 1.</p>
3<hr size="2" color="red">
4<h1>Section 2</h1>
5<p>This is the content of section 2.</p>

In this example, the size attribute is set to 2, which increases the height of the line, and the color attribute is set to red, which changes the color of the line.

It's important to note that the <hr> tag is a presentational element, which means it's used for visual presentation rather than for semantic structure. As such, it should be used sparingly and only when it adds value to the content on the page.