The best way to skip a line in html?

Question

I've read and visited a lot of websites, but none of them have provided me with a simple solution. What i want to know is what's the best way to add/skip a line in html? What I mostly use is two <br /> tags, but I know that there is a simpler solution to the problem. Is there a way to skip a line, using css, instead of doing this:

<p>Hello. <br /><br />This is a test</p> 

Solution 1

You could simply use 2 separate paragraph (<p>) tags. For example:

<p>Hello.</p>
<p>This is a test</p> 

Here's a demo.

Solution 2

Semantically, it depends on your purpose. Do whatever's best in the situation. Some examples.

1. If you literally need to skip a line, that is, have a empty line with nothing on it in your text, then by all means use two <br> elements.

   This is one line of text<br>
   This is also one line of text<br>
   The next line happens to be empty<br>
   <br>
   And here is another line, not empty<br>
   

   And so on.

2. However, if you want to create some blank space between two blocks of prose, then the two blocks should be paragraphs, as mentioned in the other answers.

3. And if the first part is a bunch of individual lines, but the second part is a piece of prose, only the second part needs to be a paragraph. No need to enclose the first part in <p> tags as well. Example:

   Add the water to the recipe<br>
   Add the salt<br>
   
   <p>Note: stir thoroughly!</p>
   

4. If your intention is to actually separate two lines of text, to signify they don't belong together, you can use a <hr>. Make it invisible if you want.

   This is some text
   <hr style="opacity:0">
   This is some unrelated text
   

5. If the next line happens to be an introduction to the later half of the text, change it into a <h4> (that is, a header at whatever level you require here).

   The last line of the previous section
   <h4>Introduction</h4>
   The fist line of the next section
   

   This works because headers also have margins built in.

6. Lastly, if you have an existing piece of html with your two blocks of text already in two HTML elements, you don't necessarily have to change the markup; all you need to do is set top and bottom margins for those elements in the CSS.
   Suppose they are in <section>s:

   <style>
     section {margin:1em 0}
   </style>
   ...
   ... The last line of the previous section</section>
   <section>The fist line of the next section ...
   

Solution 3

I think that using br tag is always a bad idea. Try using paragraphs, css padding, css margin, hr. Try avoiding br because it's not semantic and using the proper tag in your site "helps the search" engines to "understand your site"

Solution 4

You can surround the 'Hello' with div and add css of maring-bottom for example:

<p>
    <div style='margin-bottom: 40px;'>Hello.</div>
    This is a test
</p>

View more solutions

Comments

[Lebone]

Easy and simple. Thank you.

[steveax]

Browsers may handle that, but a <div> inside a <p> element is not valid. Only phrasing content is valid.

[Fabio Ros]

If you absolutely want to use <br /> tag.

[Mr Lister]

How is this better than the OP's own example?

[Mr Lister]

Browsers won't "handle" that; they all close the <p> before the <div> starts.