The Horizontal Line Tag <hr> in HTML is used to draw a straight line (horizontal line) that separates the content of a webpage. It is a self-closing tag, meaning it does not require a closing. The browser displays it as a thin line that provides a visual break between content sections.
For example, you may want to give a line between two paragraphs as in the given example below:
Example:
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Line Example</title>
</head>
<body>
<p>This is paragraph one and should be on top</p>
<hr />
<p>This is paragraph two and should be at bottom</p>
</body>
</html>Why are Horizontal Line Tag needed?
The Horizontal Line Tag <hr> in HTML is needed to create a visual separation between different sections of content on a webpage. It helps make information easier to read by dividing topics, paragraphs, or headings with a clean horizontal line. This tag acts as a thematic break, showing that a new idea or section begins below the line. Without it, long blocks of text can look crowded and confusing. The <hr> tag is self-closing and can be styled using CSS to change its color, width, thickness, or design. In short, the horizontal line tag improves readability, organization, and visual structure, making a webpage look neat, professional, and user-friendly.