The two ways to add a line in HTML

When you say "add a line," you usually mean one of two things: break text onto a new line, or draw a visible horizontal line across the page. HTML handles these differently, and which one you need depends on what you're trying to show.

A line break moves text to the next line without creating extra space — use the <br> tag. A horizontal line draws a visible divider across the page — use the <hr> tag. Both are simple, but they do different jobs.

Key Takeaways

  • The <br> tag creates a line break and moves text to the next line without adding paragraph spacing.
  • The <hr> tag draws a horizontal line across the page and is often used to separate sections.
  • Both tags are self-closing, meaning they do not need an opening and closing pair like <p></p>.
  • Use <br> for poetry, addresses, or short line breaks within text; use <hr> to visually separate major sections.
  • CSS can style both tags to change their appearance, color, and thickness.

Using the <br> tag for line breaks

The <br> tag tells the browser to start a new line right where you place it. It does not add the extra space that a new paragraph does — it just moves the next word or sentence down.

Here is how it looks in practice:

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

The browser displays this as three lines of an address, all within one paragraph. Without the <br> tags, the browser would squash it into one line. You can also use <br> in poetry or song lyrics where line breaks matter to the meaning.

The <br> tag is self-closing, which means it does not have a separate closing tag. In modern HTML, you write it as <br> and move on — the browser knows it is complete.

Using the <hr> tag for horizontal lines

The <hr> tag draws a visible horizontal line across the page. It is useful for separating sections of content visually, like breaking up chapters in a long article or dividing a form into logical groups.

Here is a simple example:

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

The <hr> tag is also self-closing. By default, it renders as a thin gray line, but you can change its appearance with CSS if you want it thicker, a different color, or a different style.

Styling lines with CSS

Both <br> and <hr> can be styled with CSS, though <hr> is the one you will usually want to customize.

To make an <hr> thicker and blue, you could write:

<style> hr { border: none; border-top: 3px solid blue; margin: 20px 0; } </style>

This removes the default border, adds a 3-pixel blue line on top, and adds space above and below it. You can adjust the color, thickness, and spacing to match your design. The <br> tag is harder to style meaningfully since it is just a line break, not a visible element, so CSS changes to it usually do not show up.

When to use <br> versus <hr>

Use <br> when you need a line break within text but do not want the spacing of a new paragraph. Common cases are addresses, poetry, song lyrics, or any place where the line break is part of the content itself.

Use <hr> when you want to visually separate sections of a page. It is a design element, not part of the text. If you find yourself using multiple <br> tags in a row to create space, you probably want an <hr> instead, or you should use CSS margin and padding on your paragraphs.

A common mistake is using <br> repeatedly to add space between elements. This works but is not the right tool — CSS spacing is cleaner and easier to adjust later.

Self-closing tags and HTML syntax

Both <br> and <hr> are void elements, meaning they do not wrap around content. They do not need a closing tag. In HTML5 (the current standard), you write them as <br> and <hr> with no slash at the end.

You may see older code written as <br /> or <hr /> with a slash before the closing angle bracket. This was required in XHTML but is optional in modern HTML5. Both styles work in all current browsers, so either is fine.

Frequently Asked Questions

Can I use <br> to create space between paragraphs?

Technically yes, but it is not the right approach. Multiple <br> tags create line breaks without the semantic meaning of a paragraph. Use separate <p> tags instead, or use CSS margin and padding to control spacing. This keeps your HTML cleaner and easier to style later.

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

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

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

Yes. Use CSS to set the border-top color, or use the background-color property. For example, hr { border: none; border-top: 2px solid red; } creates a red line. You can also adjust thickness, style (solid, dashed, dotted), and spacing around it.

Do <br> and <hr> work in all browsers?

Yes. Both tags are part of the HTML standard and work in every browser. They have been around for decades and are fully supported everywhere.