The best way to skip a line in html?

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> 

5

7 Answers

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

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

Here's a demo.

1

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>
   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 ...

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"

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>

2

<p>Hello. <br /> &nbsp; <br> This is a test</p>

2

Using block level elements would help. for example, p is a block level element which would give the line break.

so you can have the text in two paragraphs. and have the margin/padding set to the paragraph

using <br> is a bad approach.

Try using this where you want the blank space:

  

If you want multiple blank spaces, then repeat the code successively like this:

    

etc.

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password Submit

Post as a guest

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy