Line Breaks and Horizontal Rules: Formatting Your Content

When you start writing content for the web, one of the first things you notice is this: everything looks like one big block of text.

Good news—you don’t need to be a pro coder to fix that.

In this article, you’ll learn how to:

Add line breaks to control where a line ends
Use horizontal rules to separate sections
Combine both to make your content easier to read

We’ll use simple HTML examples. Even if you’ve never written a line of code before, you can follow along.

What Are Line Breaks and Horizontal Rules?

Before we start typing code, let’s get clear on what these are.

A line break is a way to move to a new line without starting a new paragraph.
A horizontal rule is a horizontal line you can use to separate parts of your page.

Both of these are created with HTML tags. An HTML tag is a special word inside angle brackets, like this:   or <hr>.

You don’t have to memorize much here—just understand that these tags tell the browser: “Do something here.”

Step 1: Your First Line Break with ` `

Let’s start with the line break tag:  .

By default, if you write text in HTML, the browser puts it together in one long line until it reaches the end of the screen. Pressing Enter in your code editor does not always create a visible new line on the page.

To force a new line, you use  .

Example 1: A Simple Line Break

<!-- Example 1: Basic line breaks -->
<p>
  Hello, my name is Alex.<br>
  I am learning how to format text.<br>
  Line breaks make this easier to read.
</p>

What this does:

 starts a paragraph, and  ends it.
Each   tells the browser: “Go to a new line here.”

What you’ll see on the page:

Hello, my name is Alex.
I am learning how to format text.
Line breaks make this easier to read.

(Those little gaps at the end of each line above are just showing you where the new line happens.)

Try it yourself

Open a simple HTML file (or use an online HTML editor like CodePen or JSFiddle).
Paste the example code into the editor.
Remove one of the   tags and see how the text changes.

You’ll notice that the two lines without   join together.

Step 2: Using Multiple Line Breaks for Spacing

Sometimes you want a bit more space between lines, but not a full new section.

You can use more than one   in a row to create extra vertical space.

Example 2: Adding More Space Between Lines

<!-- Example 2: Extra spacing with multiple <br> tags -->
<p>
  Welcome to my website!<br><br>
  Here you'll find tutorials, tips, and examples.<br><br>
  Enjoy your stay.
</p>

What this does:

Two   tags together create a blank line between sentences.
This makes the text feel more open and less crowded.

What you’ll see on the page:

Welcome to my website!

Here you'll find tutorials, tips, and examples.

Enjoy your stay.

Try it yourself

Change the number of   tags:

Use one   between lines.
Then use three   tags.

Notice how the vertical space changes each time. This is an easy way to control spacing when you’re just starting out.

Tip: Later, you’ll learn better ways to control spacing using CSS (a styling language), but for beginners,   is perfectly fine for simple layouts.

Step 3: Separating Sections with `<hr>`

Now let’s talk about horizontal rules.

The HTML tag for a horizontal rule is <hr>. It draws a straight horizontal line across your page. This line is useful for separating sections, like between an introduction and the main content.

Example 3: A Simple Horizontal Rule

<!-- Example 3: Using <hr> to separate sections -->
<h1>My Blog</h1>
<p>
  Welcome to my blog! Here I share my learning journey.
</p>

<hr>

<p>
  Latest post: Today I learned how to use line breaks and horizontal rules.
</p>

What this does:

<h1> creates a big heading for the title.
 creates paragraphs of text.
<hr> draws a line between the welcome text and the latest post.

What you’ll see on the page:

A big title: “My Blog”
A short welcome message
A horizontal line across the page
A paragraph for the latest post below the line

Try it yourself

Add another <hr> below the last paragraph.
Add one more paragraph under it, like: More posts coming soon!

You’ll see how <hr> helps separate different “blocks” of content.

Step 4: Combining Line Breaks and Horizontal Rules

Now you know how to use line breaks and horizontal rules separately.

Let’s combine them to build a small, nicely spaced section—like a mini profile card.

Example 4: A Simple Profile Section

<!-- Example 4: Profile section with <br> and <hr> -->
<h2>About Me</h2>
<p>
  Name: Alex Johnson<br>
  Role: Beginner Web Developer<br>
  Location: New York, USA
</p>

<hr>

<p>
  I love learning how to format my content so it's easy to read.<br>
  This week, I'm practicing line breaks and horizontal rules.
</p>

What this does:

<h2> creates a smaller heading for the “About Me” section.
Inside the first ,   separates the Name, Role, and Location into three lines.
<hr> adds a visual break between the basic info and the description.
The last  is a short paragraph with one line break in the middle.

What you’ll see on the page:

“About Me” as a clear section title
A neatly stacked list of Name, Role, and Location
A horizontal line under that info
A short description grouped below the line

Try it yourself

Here are a few ideas to practice:

Change the text to your own name, role, and location.
Add another line in the first paragraph, like Hobby: Reading with a   at the end of the previous line.
Insert another <hr> at the very bottom to mark the end of the “About Me” section.

Every small change you make builds your confidence and helps you understand how these tags affect layout.

Common Beginner Questions

1. Do I always need   to start a new paragraph?
No. If you want a new paragraph, use another  tag, like this:

<p>First paragraph.</p>
<p>Second paragraph.</p>

Use   when you want a new line inside the same paragraph, not a whole new paragraph.

2. Why don’t Enter or new lines in my code show up on the page?
Web browsers ignore most of the spacing in your HTML code. They follow the tags, not your keyboard’s Enter key. That’s why tags like   and  are important—they tell the browser how to display the text.

3. Can I style <hr> and   to look different?
Yes, with CSS you can change color, thickness, and spacing. For now, it’s fine to use the default look. As you grow more confident, you can explore styling later.

Quick Recap and What’s Next

You’ve just learned how to control the flow and structure of your text using two very simple but powerful tools:

  (line break):
- Moves text to a new line inside the same paragraph
- You can use multiple   tags for extra vertical space
<hr> (horizontal rule):
- Draws a horizontal line to separate sections
- Helps divide your page into clear, readable parts

With just these two tags, you can already:

Make text easier to read
Separate sections visually
Create simple layouts like profile blocks or post dividers

You’re off to a strong start. Even small skills like these add up quickly.

What’s next?

Practice by formatting a short “About Me” page using ,  , and <hr>.
Try turning a messy block of text into a clean, structured section.
When you’re ready, explore headings (<h1>–<h6>) and CSS for more control over spacing and style.

Every tag you learn is another tool in your toolbox. Keep experimenting—you’re already building real web pages, one line break at a time.

Mudzinga