How to create horizontal line in html

HtmlHow-ToBeginner · 3 min read

How to Create a Horizontal Line in HTML: Simple Guide

To create a horizontal line in HTML, use the <hr> tag. This tag inserts a thematic break or divider line across the page and does not require a closing tag.

📐

Syntax

The <hr> tag is a self-closing tag that creates a horizontal line. It does not need a closing tag like </hr>.

You can add attributes like style to change its appearance, but the basic usage is simple.

html

<hr />

Output

A simple horizontal line across the page

💻

Example

This example shows a horizontal line separating two paragraphs.

html

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

Output

A page with two paragraphs separated by a horizontal line

⚠️

Common Pitfalls

Some common mistakes when creating horizontal lines include:

Trying to use a closing tag like </hr>, which is invalid.
Using other tags like <div> or <span> to create lines instead of <hr>.
Not adding semantic meaning; <hr> is meant for thematic breaks, so use it appropriately.

html

<!-- Wrong way -->
<hr></hr>

<!-- Right way -->
<hr />

Output

Only the right way renders a horizontal line; the wrong way may cause errors or unexpected results.

📊

Quick Reference

Key points to remember:

<hr> creates a horizontal line.
It is self-closing; no closing tag needed.
Use CSS styles to customize thickness, color, and width.
It represents a thematic break in content.

✅

Key Takeaways

Use the

tag to insert a horizontal line in HTML.

is self-closing and does not need a closing tag.

Customize the line’s look with CSS styles if needed.

should be used to indicate a thematic break in content.

Avoid incorrect closing tags like which are invalid.