Horizontal Line Tag

To add a horizontal line in your HTML document, the <hr> tag comes in handy. It provides a simple way to create a visual separation between different sections of your document.

How to use the <hr> tag?

The syntax of the <hr> tag looks something like this:

<hr>

The <hr> tag is an empty element, meaning it does not require a closing tag. It represents a thematic break between sections of content and is commonly displayed by browsers as a horizontal line.

Using <hr> Between Sections

A horizontal rule can be useful when you want to visually separate two related sections of content.

<h2>HTML Basics</h2>
<p>HTML is used to structure web pages.</p>

<hr>

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

The browser renders the <hr> as a visual separator between the two sections.

Styling the <hr> Element

You can customize the appearance of an <hr> element with CSS. For example, you can change its color, thickness, width, and spacing.

hr {
    border: none;
    height: 1px;
    background-color: #4f8cff;
    margin: 24px 0;
}

Separating structure from presentation allows HTML to define the content while CSS controls how the separator looks.

When Should You Use <hr>?

• Use <hr> when there is a meaningful thematic break between sections.
• Use CSS to control its visual appearance rather than adding unnecessary markup.
• Keep the surrounding content logically structured with appropriate headings and semantic elements.

Video Tutorial

Watch this quick demo to see how the <hr> tag works in a webpage.

Quick Summary

• <hr> is an empty HTML element.
• It creates a thematic break between sections of content.
• It does not need a closing </hr> tag.
• CSS can be used to customize its appearance.