HTML <hr> Tag

The HTML <hr> tag represents a thematic break or division between content, often used to separate sections of text or other content visually. It is a self-closing tag and is commonly rendered as a horizontal line by browsers.

While the <hr> tag has a default appearance, you can style it with CSS to fit the design of your webpage. It is also semantically meaningful, as it indicates a shift or change in the content.

Basic Syntax of HTML <hr> Tag

The basic syntax of the <hr> tag is:

</>
Copy
<hr>

The <hr> tag does not require a closing tag because it is a void element.

Attributes of HTML <hr> Tag

  • Global Attributes: The <hr> tag supports all global attributes, such as id, class, style, and title.
  • Event Attributes: The <hr> tag supports event attributes like onclick, onmouseover, and onfocus.

Basic Example of HTML <hr> Tag

Here’s a basic example of using the <hr> tag to separate sections of text:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <h1>Welcome to My Blog</h1>
        <p>This is the first section of the content.</p>
        <hr>
        <p>This is the second section of the content, separated by a horizontal rule.</p>
    </body>
</html>
Basic Example of HTML <hr> Tag

Explanation: The <hr> creates a visible horizontal line between the two paragraphs, visually dividing the content.

Styling the <hr> Tag with CSS

You can customize the appearance of the <hr> tag using CSS. Here’s an example:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <head>
        <style>
            hr {
                border: none;
                height: 2px;
                background-color: #007BFF;
                margin: 20px 0;
            }
        </style>
    </head>
    <body>
        <h1>Styled Horizontal Rule</h1>
        <p>This is the first section of content.</p>
        <hr>
        <p>This is the second section of content.</p>
    </body>
</html>
Styling the <hr> Tag with CSS

Result: The horizontal line is styled with a custom color and height, enhancing its visual appeal.

Creating Dashed or Dotted Lines with <hr>

CSS allows you to create dashed or dotted horizontal lines with the <hr> tag:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <head>
        <style>
            hr.dashed {
                border: none;
                border-top: 2px dashed #FF5733;
                margin: 20px 0;
            }

            hr.dotted {
                border: none;
                border-top: 2px dotted #28A745;
                margin: 20px 0;
            }
        </style>
    </head>
    <body>
        <h1>Custom Horizontal Rules</h1>
        <p>This is the first section of content.</p>
        <hr class="dashed">
        <p>This section is separated by a dashed line.</p>
        <hr class="dotted">
        <p>This section is separated by a dotted line.</p>
    </body>
</html>
Creating Dashed or Dotted Lines with <hr>

Result: The horizontal rules appear as dashed or dotted lines, depending on the applied CSS class.

Practical Applications of the <hr> Tag

  • Section Dividers: Separate content into distinct sections, improving readability.
  • Visual Breaks: Add thematic breaks between unrelated content on the same page.
  • Styling Elements: Use custom styles to match the <hr> with your webpage design.