HTML Line Break | HTML br tag | Example code

HTML br Tag is used to text line break. This means if you have long text or paragraph tag and the screen size is small then you break a line into multipart using HTML <br> tag.

The <br> tag inserts a single line break and its an empty tag. Which means it has no end tag. Like other tags.

HTML Line Break HTML br tag Example code

How to HTML break line?

An <br> element is used to break a line within a parent element. For example, the parent element is a paragraph. And insert HTML br tag into element content without breaking out of the parent container.


HTML Line Break Example |Code

See below example of how to html break line. In this example, we use 2 times <br> tag, so a paragraph will break 2 times. See below code.

<!DOCTYPE html>
<html>
    <body>
        
        <p>A break lines sentance<br>to make text<br>readable and in screen.</p>
        
    </body>
</html>

Output:

HTML Line Break Example Code

Question: Can html line break without br?

Answer: Let’s do first brainstorm what actually a problem. For example, we write a text verticle one line by line but in the browser, it will show in a single line.

Example: Problem

<!DOCTYPE html>
<html>
    <body>
        
        <p>A break lines sentance
        to make textreadable
        and in screen.
        This is problem.
        </p>
        
    </body>
</html>

Output:

Coming to answer, is it possible to do break line without using <br> tag?

Yes, it is possible, by using a  <pre> tag to keep the line breaks. <pre> tag can use for any pattern you want.

Let’s see the example- Solution

<!DOCTYPE html>
<html>
    <body>
        
        <pre>A break lines sentance
        to make textreadable
        and in screen.
        Solution.
        </pre>
        
    </body>
</html>

Output:

html line break without br using pre


Another way to do line break without using html break tag is to use the <div> tag with the style attribute. See below code, output will be the same.

<!DOCTYPE html>
<html>
    <body>
        
        <div style="white-space: pre">
            lorem ipsum
            lorem ipsum
            lorem ipsum
        </div>
        
    </body>
</html>

Error: HTML br tag not working.

A problem can be many for this <br> code not working. You can give it a try Instead of <br> or </br> it should be <br/>.

Another solution– if using float then try adding style="clear: both" which makes the element drop below any floated elements that precede it in the document.

Question: Is it <br><br/> or <br />?

Answer: Simply <br> is sufficient. But in XHTML <br/> is preferred according to the WHATWG and according to the W3C.

How to HTML line break using the character (ASCII character for)?

Answer: An <br> is an element. Elements don’t get character entities.

Do comment on this tutorial if you have any doubt and suggestion. This tutoiral for beginners.

It is required when you making a website which show content to user. You can’t show long horizontal paragraph. Long one line reading text difficult and also not look good. You can do it by programmatically or hard coding.

Note: The All  HTML Line Break Examples are tested on Safari browser (Version 12.0.2).
OS: macOS 10.14 Mojave
Code: HTML 5 Version


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.