3.5 Horizontal Rules | HTML

3.5 Horizontal Rules
Table of Contents

The <hr> element in HTML is used to create a thematic break or horizontal rule in a webpage. It is a self-closing tag, meaning it doesn't need a closing tag. The horizontal rule is typically used to separate content, indicating a shift in topic or section.

Basic Usage of <hr>

The <hr> element is simple to use and does not require any attributes or content. It creates a visible horizontal line across the webpage.

Basic Syntax:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Horizontal Rule Example</title>
</head>
<body>
    <p>This is the first section of content.</p>
    <hr>
    <p>This is the second section of content.</p>
</body>
</html>

In this example, the <hr> element separates the two paragraphs, indicating a thematic break.

Styling the <hr> Element with CSS

The default appearance of the <hr> element can be modified using CSS to better match the design of your website.

Example of Styled Horizontal Rule:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Styled Horizontal Rule Example</title>
    <style>
        hr {
            border: none;
            height: 2px;
            background-color: #ccc;
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <p>This is the first section of content.</p>
    <hr>
    <p>This is the second section of content.</p>
</body>
</html>

    • border: Removing the border creates a cleaner line.

    • height: Specifies the thickness of the line.

    • background-color: Sets the color of the line.

    • margin: Adds space above and below the line.

Additional Styling Options

You can further customize the <hr> element with various CSS properties to achieve different visual effects.

Example with Additional Styling:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Advanced Styled Horizontal Rule Example</title>
    <style>
        .dotted {
            border: 0;
            border-top: 1px dotted #333;
            margin: 20px 0;
        }
        .dashed {
            border: 0;
            border-top: 1px dashed #333;
            margin: 20px 0;
        }
        .thick {
            border: 0;
            height: 5px;
            background-color: #000;
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <p>This is the first section of content.</p>
    <hr class="dotted">
    <p>This is the second section of content.</p>
    <hr class="dashed">
    <p>This is the third section of content.</p>
    <hr class="thick">
    <p>This is the fourth section of content.</p>
</body>
</html>

    • .dotted: Creates a dotted horizontal rule.

    • .dashed: Creates a dashed horizontal rule.

    • .thick: Creates a thicker horizontal rule with a solid background color.

Summary

The <hr> element is used to create horizontal rules in HTML, providing a clear visual separation between sections of content. While the default appearance of <hr> is a simple horizontal line, CSS can be used to style it in various ways to match the design of your website. 

Using horizontal rules appropriately enhances the readability and organization of your content.

To learn more about HTML, click here: HTML

I am a passionate writer. Read more.

Post a Comment

Don't spam links or promote stuff in the comments. It's annoying and lowers the conversation quality. Contribute respectfully and helpfully instead.