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> 

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.


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"


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

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>

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


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:

    &nbsp;

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

    &nbsp;
    &nbsp;

etc.


Need Your Help

How to make a grid in Windows Phone 8

c# windows-phone-8 windows-phone

I'm new in Windows Phone 8 development, so I need a help, because I want to create a page which has a grid/table, like we have the ASP.NET grid, is it possible?

getCurrentPosition() and watchPosition() are deprecated on insecure origins

javascript html5 geolocation deprecation-warning

I am getting this error on my website which requests Geolocation data from the user: