The simplest way: the <hr> tag

A horizontal line in HTML is created with a single tag: <hr>. Place it anywhere in your document where you want the line to appear, and the browser will draw it across the page. It stands alone — you do not need an opening and closing tag, just <hr> on its own line.

The <hr> tag creates a visual break between sections of content. Browsers render it as a thin gray line by default, though you can change its appearance with CSS. It is semantic, meaning it tells both browsers and screen readers that you are separating one topic from another, not just adding decoration.

Here is the most basic example:

<h2>Section One</h2> <p>Some content here.</p> <hr> <h2>Section Two</h2> <p>More content here.</p>

Key Takeaways

  • The <hr> tag creates a horizontal line with no opening or closing tag required.
  • You can style the line's color, thickness, and style using CSS properties like border, background-color, and height.
  • The <hr> tag is semantic and signals a thematic break to browsers and assistive technology, not just visual decoration.
  • Custom lines using <div> or <span> with CSS borders give you more control over appearance than the default <hr>.

Styling the line with CSS

The default <hr> line is thin and gray. To change its color, thickness, or style, add CSS rules. The most common properties are border, background-color, and height.

Here is a thicker, solid black line:

<style> hr {   border: none;   height: 3px;   background-color: black; } </style>

The border: none; removes the default border, and height controls thickness. If you want a dashed or dotted line instead of solid, use border-top with a style:

<style> hr {   border: none;   border-top: 2px dashed blue; } </style>

Creating custom lines with borders

If you need more control than <hr> offers, create a line using a <div> or <span> with a CSS border. This approach lets you add margins, padding, and other styling that <hr> does not support as easily.

Here is a custom line with space around it:

<style> .divider {   border-top: 1px solid #ccc;   margin: 20px 0; } </style> <div class="divider"></div>

The margin: 20px 0; adds 20 pixels of space above and below the line. You can adjust these numbers to control spacing. This method is useful when you want the line to sit within a specific layout or need it to behave differently than a standard <hr>.

When to use <hr> versus a custom border

Use <hr> when you want a simple, semantic separator between sections. It is the correct HTML choice because it has meaning — it tells assistive technology that a thematic break has occurred. Browsers and screen readers understand it.

Use a custom border when you need precise control over spacing, alignment, or when the line is purely decorative and not a true content separator. If the line is just part of your design and does not represent a break in topic, a <div> with a border is the better choice.

Do not use <hr> multiple times in a row to create spacing. If you need space between elements, use CSS margin or padding instead. Multiple <hr> tags confuse screen reader users because each one signals a new topic break.

Removing the default <hr> appearance

Browsers apply default styling to <hr> that can be hard to override. The safest way is to remove all default styling first, then add your own. Use border: none; to clear the default border, then define exactly what you want:

<style> hr {   border: none;   height: 2px;   background-color: #333;   margin: 30px 0; } </style>

This approach works consistently across browsers. Without border: none;, some browsers will show both a border and a background color, which looks wrong. Always clear the default first.

Accessibility and semantic HTML

The <hr> tag has semantic meaning. Screen readers announce it as a separator, which helps users with visual impairments understand the structure of your page. If you use a <div> with a border instead, screen readers will not know it is a separator — they will just see an empty element.

If your line is decorative and not a true content break, use CSS and a <div> instead of <hr>. If it marks a real shift in topic or section, use <hr> so assistive technology can convey that meaning to users.

Frequently Asked Questions

Can I make an <hr> line vertical instead of horizontal?

The <hr> tag is designed for horizontal lines only. To create a vertical line, use a <div> with a border-left or border-right property, or use a <span> with border-right. Set a specific height and width to control its size.

How do I add text inside an <hr> line?

You cannot put text directly inside <hr> because it is a self-closing tag. Instead, use a <div> with a border and place text inside it, or use CSS pseudo-elements like ::before or ::after to add text near the line.

Why does my <hr> look different in different browsers?

Browsers apply different default styles to <hr>. To make it look the same everywhere, always use border: none; and then define your own height, background-color, and margin values. This overrides all browser defaults.

Is <hr> still used in modern HTML?

Yes. <hr> is part of HTML5 and is still the correct way to mark a thematic break between sections. It is semantic and accessible, so use it when you need a true content separator, not just decoration.