HTML Horizontal Rules

HTML horizontal rules are used to create a horizontal line between different sections of content on a web page. The <hr> element is commonly used when you want to visually separate topics, sections, or related content.

The <hr> element represents a thematic break between sections of content. It is especially useful in articles, blog posts, documentation, and other pages where content needs a clear separation.

What Is an HTML Horizontal Rule?

An HTML horizontal rule is created using the <hr> element.

<hr>

The browser usually displays a horizontal line across the available width of its container.

For example:

<h1>HTML Tutorial</h1>

<p>Learn the basics of HTML.</p>

<hr>

<h2>CSS Tutorial</h2>

<p>Learn how to style web pages using CSS.</p>

The <hr> separates the HTML content from the CSS content.

HTML <hr> Syntax

The basic syntax is:

<hr>

The <hr> element is an empty element, which means it does not need a closing tag.

Correct:

<hr>

You do not need to write:

<hr></hr>

In modern HTML, <hr> is the recommended syntax.

Why Use HTML Horizontal Rules?

Horizontal rules can help organize content and make a web page easier to understand.

Common uses include:

• Separating sections of an article
• Dividing different topics
• Separating header and content areas
• Creating a visual break between related content
• Separating sections in documentation
• Improving the visual structure of long pages

HTML Horizontal Rule Example

Here is a simple example:

<h2>HTML</h2>

<p>HTML is used to create the structure of web pages.</p>

<hr>

<h2>CSS</h2>

<p>CSS is used to style web pages.</p>

The <hr> element creates a horizontal separation between the two sections.

Styling <hr> with CSS

You can use CSS to customize the appearance of a horizontal rule.

For example:

hr {
    border: 0;
    border-top: 2px solid #2196f3;
}

You can also control its width:

hr {
    width: 70%;
}

You can add spacing around the horizontal rule:

hr {
    margin: 30px 0;
}

You can combine these properties:

hr {
    border: 0;
    border-top: 2px solid #2196f3;
    margin: 30px 0;
    width: 100%;
}

Changing the Style of <hr>

CSS gives you control over the appearance of the horizontal rule.

For example, you can create a dashed line:

hr {
    border: 0;
    border-top: 2px dashed #2196f3;
}

You can also create a dotted line:

hr {
    border: 0;
    border-top: 3px dotted #2196f3;
}

This allows you to match the horizontal rule with the design of your website.

HTML <hr> vs CSS Border

Both <hr> and CSS borders can create horizontal lines, but they have different purposes.

Method	Purpose
<hr>	Represents a thematic break in content
CSS border	Used mainly for visual styling and layout
<br>	Creates a line break in text
<p>	Creates a paragraph

Use <hr> when the line represents a meaningful separation between sections.

Use a CSS border when you only need a decorative visual effect.

<hr> vs <br>

The <hr> and <br> elements are different.

The <br> element moves content to the next line.

<p>Hello<br>Welcome to Web4Learners.</p>

The <hr> element creates a thematic break between sections.

<p>Learn HTML.</p>

<hr>

<p>Learn CSS.</p>

A simple way to remember the difference is:

• <br> = line break
• <hr> = thematic break

HTML Horizontal Rules and Semantic HTML

The <hr> element has semantic meaning. It represents a thematic break between sections or changes in topic.

For example:

<h2>HTML Elements</h2>

<p>HTML elements define the structure of a web page.</p>

<hr>

<h2>HTML Attributes</h2>

<p>HTML attributes provide additional information about elements.</p>

Here, the horizontal rule indicates a change from one topic to another.

Common Mistakes with <hr>

Using <hr> Only for Spacing

Avoid using <hr> simply to create empty space between elements.

Instead, use CSS:

section {
    margin-bottom: 30px;
}

Using Multiple <hr> Elements

Avoid unnecessarily adding several horizontal rules:

<hr>
<hr>
<hr>

If you need spacing or a decorative design, CSS is usually a better solution.

Using <hr> Instead of <br>

Do not use <hr> when you simply want to move text to the next line.

Use:

<br>

instead.

HTML Horizontal Rule Best Practices

Follow these best practices when using <hr>:

• Use <hr> to separate different sections or topics.
• Use CSS to control its appearance.
• Avoid using <hr> only for spacing.
• Do not use multiple <hr> elements unnecessarily.
• Use <br> when you need a simple line break.
• Keep the page structure meaningful and easy to understand.

Complete HTML Horizontal Rule Example

<!DOCTYPE html>
<html>
<head>
    <title>HTML Horizontal Rules</title>

    <style>
        hr {
            border: 0;
            border-top: 2px solid #2196f3;
            margin: 30px 0;
        }
    </style>
</head>
<body>

    <h1>HTML Horizontal Rules</h1>

    <p>
        HTML is used to create the structure of web pages.
    </p>

    <hr>

    <h2>CSS</h2>

    <p>
        CSS is used to style and design web pages.
    </p>

</body>
</html>

HTML Horizontal Rules Cheat Sheet

Code	Purpose
<hr>	Creates a thematic break
<br>	Creates a line break
<p>	Creates a paragraph
border-top	Styles the top border
margin	Adds space around the element
width	Controls the width