HTML <hr> Tag

The HTML <hr> tag, also known as the horizontal rule, is used to define thematic breaks in a webpage, such as a shift in topic or section division. It is a self-closing tag and does not require a closing </hr> tag in HTML5. The <hr> tag is often used to visually separate content and improve readability by inserting a horizontal line across the page. This tag is simple to use and plays a vital role in organizing content within a webpage.

Syntax of the <hr> Tag

The syntax of the <hr> tag is straightforward. It is a self-closing tag, meaning it does not need a separate closing tag.

html
<hr>

In HTML5, the <hr> tag is purely semantic, and styling such as width, color, and alignment can be managed through CSS.

Attributes of the <hr> Tag

While the <hr> tag itself is simple, it supports several global attributes to enhance functionality. In earlier versions of HTML, attributes like size, width, color, and align were used, but these have been deprecated in favor of CSS styling.

Common Global Attributes:

  • class: Specifies a class name for CSS styling.
  • id: Assigns a unique identifier to the tag.
  • style: Used for inline CSS styling (e.g., style="border-colour: black;").
  • title: Provides additional information about the horizontal line, visible when hovering over the element.

With HTML5, the use of inline styles is discouraged in favor of using CSS for better maintainability.

Examples of HTML <hr> Tag

Example 1: Basic Horizontal Rule

html
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Basic HR Example</title>
</head>
<body>
    <h1>Section One</h1>
    <p>This is the first section of the page.</p>
    <hr>
    <h1>Section Two</h1>
    <p>This is the second section of the page.</p>
</body>
</html>

In this example, the <hr> tag is used to separate two sections of content, providing a clear visual break between them.

Example 2: Customized Horizontal Rule with CSS

html
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Styled HR Example</title>
    <style>
        hr {
            border: 1px solid black;
            width: 80%;
            margin: 20px auto;
        }
    </style>
</head>
<body>
    <h1>Section One</h1>
    <p>This is the first section of the page.</p>
    <hr>
    <h1>Section Two</h1>
    <p>This is the second section of the page.</p>
</body>
</html>

Here, the <hr> tag is styled using CSS. The width is set to 80%, and a solid black line is applied. The margin centers the line within the page.

FAQs About HTML <hr> Tag

Q1: What is the purpose of the HTML <hr> tag?
A: The <hr> tag is used to create a horizontal line, indicating a thematic break or a shift in content. It helps visually separate sections within a webpage.

Q2: Can I style the <hr> tag?
A: Yes, the <hr> tag can be styled using CSS to customize its appearance, such as changing the width, color, and border style.

Q3: Does the <hr> tag need a closing tag?
A: No, the <hr> tag is self-closing in HTML5, meaning it does not require a closing </hr> tag.

Q4: Is the <hr> tag still used in modern web design?
A: Yes, the <hr> tag is still widely used, especially in HTML5, where it serves both a semantic and visual function to indicate content separation.

Q5: Can I use the <hr> tag for styling purposes alone?
A: While the <hr> tag can be styled, it should primarily be used for semantic breaks in content. For purely decorative horizontal lines, CSS elements or borders are preferred.

tools

HTML

Related Articles