how to add a line break in html

Most if not all of the HTML browsers ignore the typical line breaks and spaces that are in the source code such as “Enter”, multiple “spaces”, “tabs” etc. This means that the line breaks you see in the source code will not translate when the page gets rendered in the browser.

using html br tag

In order to insert line breaks, you will need to use br tag (<br>). The br tag is an empty tag, which means you do not have a closing tag. The <br> tag inserts a single line break, so you can add multiple <br> tags if you want multiple line breaks.

<p>this paragraph has a line break here <br> and another here <br> but not here.</p>

You could always increase the space between lines using the CSS, but the <br> tag is quite handy for one off line breaks that are not global. The <br> tag is supported by all browsers.

Although, not strictly a line break the <p> tag inserts a line break before starting a new paragraph. So, if you are just inserting empty line breaks then you could judiciously use the <p> (paragraph tag) to manage the lines as well.

using html pre tag

Another tag you could use is the <pre> tag. If you surround the text with pre tag, then it will display the text as it is written, by preserving the end of line (‘\n’) and tab (‘\t’) characters in the text. This is good way to display source code without having to litter the code with HTML tags.

<div><pre>one line
second line
third line</pre></div>

The advantage you have here is that you can cover a specific block of text with out having to replace all end of line with <br> tags. Also, the text remains legible with in the source code.

using cascading style sheet (CSS)

If you are using css, then you can use the white-space property to configure how the end of line (\n) and tab (\t) are handled by the browser. If you want the browser to render the ‘\n’ then assign the white-space to pre-line ….

white-space: pre-line

Setting this to pre-wrap will render both the ‘\n’ and the ‘\t’

white-space: pre-wrap

There are other “quirky” ways to insert a line break using the CSS, but you should be able to use one of the above three methods to cover almost all of the use cases.