The two ways to add a line in HTML

A line break moves text to the next line without starting a new paragraph. Use the <br> tag, which needs no closing tag. A horizontal line draws a visible line across the page. Use the <hr> tag for that. Both are single tags you drop into your HTML where you need them.

The <br> tag is useful when you want text on separate lines but don't want the spacing that a paragraph creates — like in a poem, an address, or a song lyric. The <hr> tag creates a visual separator between sections, like a divider between chapters.

Key Takeaways

  • The <br> tag creates a line break and moves the next text to a new line without adding paragraph spacing.
  • The <hr> tag draws a horizontal line across the page to separate content visually.
  • Both tags are self-closing and do not require an opening and closing pair.
  • You can style both tags with CSS to change their appearance, color, and thickness.

Using the <br> tag for line breaks

Place <br> wherever you want text to jump to the next line. Here's an example with an address:

<p>123 Main Street<br> Springfield, IL 62701<br> United States</p>

The text "123 Main Street" appears on the first line, "Springfield, IL 62701" on the second, and "United States" on the third. The <p> tag still wraps the whole thing as one paragraph, but the <br> tags force the line breaks inside it.

You can use multiple <br> tags in a row to create extra space, though CSS margin and padding are usually cleaner for spacing. Each <br> tag creates exactly one line break — no more, no less.

Using the <hr> tag for horizontal lines

The <hr> tag draws a line from one side of its container to the other. Drop it between sections to separate them visually:

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

The <hr> tag creates a horizontal line between the two sections. By default, it appears as a thin gray line. The line respects the width of its container — if the <hr> is inside a <div> that is 500 pixels wide, the line will be 500 pixels wide.

Styling line breaks and horizontal lines with CSS

The <br> tag itself cannot be styled — it is just a line break. If you need styled spacing, use CSS margin or padding on the surrounding elements instead.

The <hr> tag can be styled. You can change its color, height, and border style. Here are common examples:

hr {   border: none;   height: 2px;   background-color: #333; } hr {   border: 1px dashed #999;   background-color: transparent; }

The first example removes the default border and sets a solid 2-pixel dark line. The second creates a dashed line. You can adjust the height, color, and border style to match your design.

When to use <br> versus spacing with CSS

Use <br> only when a line break is part of the content itself — like in a poem, address, or song. Do not use <br> to create space between paragraphs or sections. That is what CSS margin and padding are for.

If you write multiple <br> tags to push content down the page, you are using HTML for layout instead of styling. This makes the page harder to maintain and breaks on different screen sizes. Instead, add margin-bottom to the element above:

<p style="margin-bottom: 40px;">First paragraph.</p> <p>Second paragraph.</p>

This approach keeps your HTML clean and makes it easier to adjust spacing later without changing the HTML itself.

Common mistakes with line breaks and horizontal lines

The most common mistake is using <br> tags to create spacing between sections. This clutters your HTML and makes the page harder to read and edit. Use CSS instead.

Another mistake is forgetting that <br> and <hr> are self-closing. You do not write <br></br> or <hr></hr> — just <br> and <hr> on their own. Some developers write <br /> or <hr /> with a slash at the end, which also works but is not required in modern HTML.

A third mistake is using <hr> when you should use a border or background color on a <div>. If you need a line as part of a design element, CSS borders are usually more flexible and easier to control.

Frequently Asked Questions

Can I make a <br> tag taller or add space with CSS?

No — <br> is just a line break and cannot be styled. If you need space between elements, add margin or padding to the surrounding tags instead. For example, use <p style="margin-bottom: 20px;"> to add space below a paragraph.

What is the difference between <br> and <p></p>?

A <br> tag moves text to the next line but stays inside the same paragraph. A <p> tag creates a new paragraph with spacing above and below it. Use <br> for line breaks within content, and <p> for separate blocks of text.

Can I change the color of an <hr> line?

Yes. Use CSS to set the background-color or border-color. For example: hr { background-color: #FF0000; } makes the line red. You can also adjust the height, style (solid, dashed, dotted), and width.

Do I need to close <br> and <hr> tags?

No. Both are self-closing tags in HTML5. You write <br> and <hr> without a closing tag. Some older code uses <br /> or <hr />, which also works, but the slash is not required.