Line Break in HTML

When you use Line break tag <br /> in HTML, the next content will start from new line.
This tag is one of those tags which doesn't need a closing tag. It is a self-closing tag.
<br /> will work in old browser. If you use <br/> (without space) or just <br>, old browser may not recognize the tag and ignore it.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas viverra facilisis rutrum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas viverra facilisis rutrum.


<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Maecenas viverra facilisis rutrum.<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Maecenas viverra facilisis rutrum.
        </p>
    </body>
</html>
                        

Horizontal Line in HTML

When you need to visually separate two sections in HTML, you can add horizontal line <hr> tag.
<hr> creates a horizontal line at the position you added to the right of the page.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas viverra facilisis rutrum.


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas viverra facilisis rutrum.


<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Maecenas viverra facilisis rutrum.
        </p>
        <hr />
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Maecenas viverra facilisis rutrum.
        </p>
    </body>
</html>
                        

You should not add <hr> tag in <p> tag. It will be something like below.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.


Maecenas viverra facilisis rutrum.


<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. <hr />
            Maecenas viverra facilisis rutrum.
        </p>
    </body>
</html>
                        

If you open the Developer Tools and check the <p> tag, you will see that <p> is only applied to Lorem ipsum dolor sit amet, consectetur adipiscing elit. And then comes <hr> tag and after that, Maecenas viverra facilisis rutrum. is without content.

Conclusion

So, in this section, you learned about Line Break tag and Horizontal Line tag.
In next section, you will learn about center tag and preserve tag in HTML.