HTML Br Tutorial

G:hackHTMLmyHTML-Tutorial10-br�1.png

When working with paragraph, you can’t expect a new line to appear in the webpage every time you add a new line to your paragraph.

For example:

<!DOCTYPE html>
<html>
<title> Learning HTML is fun 🙂 </title>
<head>
</head>
<body >
<h1>This is heading h1</h1>
<p>A simple paragraph is comprised of three major components.

The first sentence, which is often a declarative sentence, is called the “topic sentence.”

It introduces the topic of the paragraph, setting its tone and mood. The next few sentences elaborate, explain, and exemplify the topic introduced in it.</p>

</body>
</html>

In the example above we have separated this paragraph into 3 separated lines. But when you run this code, you can see all 3 lines appear right behind each other without any new line!

This is how HTML works: It won’t allow a new line to appear in a <p> element unless to specifically declare new line using <br> element.

<br> stands for "break" and it breaks the line which means there will be nothing after this element in the line where it placed.
<br> is a single tag element which means there's no </br>.

All other elements or paragraphs should start from the next line below the line where this element placed.

For example:

<!DOCTYPE html>
<html>
<title> Learning HTML is fun 🙂 </title>
<head>
</head>
<body >
<h1>This is heading h1</h1>
<p>A simple paragraph is comprised of three major components.

The first sentence, which is often a declarative sentence, is called the “topic sentence.”

It introduces the topic of the paragraph, setting its tone and mood. The next few sentences elaborate, explain, and exemplify the topic introduced in it.</p>

<h2>This is heading h2</h2>
<p>A simple paragraph is comprised of three major components.<br> The first sentence, which is often a declarative sentence, is called the “topic sentence.” <br>It introduces the topic of the paragraph, setting its tone and mood. The next few sentences elaborate, explain, and exemplify the topic introduced in it.</p>
</body>
</html>

In the example above, we have added two <p> elements. The first element does not have <br> element within its paragraph and as the result shows, there’s no newline even though we tried to add one.

But in the latter paragraph we have added 2 <br> elements and because adding <br> element will cause a break to the line, we have change the style of this paragraph as the result shows.

You could also add multiple <br> elements under each other and create a gap.

Example:

<!DOCTYPE html>
<html>
<title> Learning HTML is fun 🙂 </title>
<head>
</head>
<body >
<h1>This is heading h1</h1>
<p>A simple paragraph is comprised of three major components.

The first sentence, which is often a declarative sentence, is called the “topic sentence.”

It introduces the topic of the paragraph, setting its tone and mood. The next few sentences elaborate, explain, and exemplify the topic introduced in it.</p>

<br>
<br>
<br>
<br>
<br>
<h2>This is heading h2</h2>
<p>A simple paragraph is comprised of three major components.<br> The first sentence, which is often a declarative sentence, is called the “topic sentence.” <br>It introduces the topic of the paragraph, setting its tone and mood. The next few sentences elaborate, explain, and exemplify the topic introduced in it.</p>
</body>
</html>
Note: It's not a good idea to use <br> element to add multiple empty line between two paragraphs or any other elements. With the help of CSS we can add margin to each paragraph or other elements easier and that's the standard way of doing so. (We talked about what is margin and how can we add margin to elements at Margin section in CSS tutorial)