EN

HTML・Polishing your text

Line breaks and dividers

Say "line-break here" or "draw a line where the topic changes" — br and hr handle those little touch-ups. Meet the "standalone tags" that wrap nothing.

As you write HTML, there’s a moment that makes you go “huh?” — even when you break the line in your editor, the screen doesn’t break it. That’s because HTML collapses the line breaks and gaps inside your text into “a single space.” Let’s try writing this and see.

<p>Good morning
    Hello
        Good evening</p>
Even though you broke the lines in the editor, on the screen it all comes together into one line.

Even though it looks like three lines in the editor, in the browser it shows up as “Good morning Hello Good evening” — all on one line, joined by a single space. To HTML, neither the line breaks nor the indentation spaces count as “separators.” That’s what these two small tags are for.

Break a line with <br>

Put a <br> wherever you want to “start a new line right here” in the middle of your text.

<p>Piyo Building, 3F<br>123 Main Street<br>Anytown, CA 90001</p>
The line breaks wherever you place <br>, so the address splits into three lines.

When you want to break the line within a single unit, like an address or a haiku — that’s where <br> comes in. For a haiku, you can write it like this.

<p>An old pond—<br>a frog jumps in,<br>the sound of water.</p>
The line breaks only where <br> is, so the haiku becomes three lines.

The three-line haiku stays inside a single <p>, breaking only where the <br> tags are. It’s “a line break within one unit,” not “separate paragraphs” — and that difference shows up in how you choose your tags too.

Draw a divider with <hr>

Where the topic changes completely, <hr> lets you draw a single horizontal line.

<h2>Today's events</h2>
<p>The weather was nice this morning.</p>
<hr>
<h2>Tomorrow's plan</h2>
<p>I'm going to the park.</p>
Wherever you place <hr>, a horizontal line appears to show where the topic breaks.

You can show a break — “the story switches here” — as a line.

Summary of this lesson

  1. <br> makes a line break in the middle of text (no closing tag)
  2. <hr> draws a divider where the topic breaks (no closing tag)
  3. Don’t stack up <br> tags to make space — handle the spacing later with CSS

Try it: make the heading two lines

Change the very top <h1> on Shima’s page to a greeting, and break it into two lines. Put a <br> after “Hello,”.

<h1>Hello,<br>I'm Shima.</h1>

The line breaks at the <br>, so “Hello,” and “I’m Shima.” become two lines. A heading that was just a name now feels much more like a real greeting.

Browser view. The big heading is split into two lines: “Hello,” and “I’m Shima.”
The line breaks only where you put the <br>.

FAQ

Why do the two spaces I type in the editor show up as just one on the screen?
Because HTML has a rule that no matter how many line breaks or spaces you write, they get collapsed into a single space on the display. When you want to open up some room, you don't rely on that rule — you use meaningful tags (like p or br) to say so.
Should I use br when I want space between paragraphs too?
No. The clean way to space paragraphs apart is to split them with p tags and then adjust the spacing later with CSS margins. Think of br as being only for line breaks within a single sentence.
Is it OK to line up several hr tags to make a thick line?
You can make it look that way, but hr is a tag that carries the meaning 'the topic changes here.' When you want to change the thickness or styling, the proper way is to adjust it with CSS rather than adding more lines.