Screen Printing

TUTORIALS » HTML / JavaScript » HTML essentials (guided tutorials)

Paragraphs, spaces and line breaks in HTML



Now that you know how to use tags to format parts of a text, let's learn how to write whole paragraphs. But first let me explain a couple of important things while we practice.

Blank spaces

  1. Create a new .html file and write:
    AAA          BBB
    (yes, 10 blank spaces between your A's and your B's)
  2. Test your file in your web browser.
Q. What happened to those 10 blank spaces?
In HTML you can write 1 or 1000 contiguous spaces but the browser will only render the first one, ignoring all the remaining spaces.

If you want to "force" the browser to show more than one space, you need to insert non-breaking-spaces by entering the HTML's special character
 
for each needed space.
  1. This time try with:
    AAA          BBB
  2. Test your file in your web browser.
Q. Better now?
Now let's try it in another way

  1. Edit your .html file to:
    AAA          BBB
    (alternating 5 natural spaces with 5 non-breaking-spaces)
  2. Test it in your browser.
Q. Is there any difference?
Every "natural" space after a
 
space is seen by the browser as a "first" space, so it is displayed on screen. This way you can combine natural blank spaces with non-breaking-spaces and force the browser to display as many spaces as you wish.

Line breaks

  1. Create a new .html file and write:
    AAA



    BBB
    (yes, 2 blank lines between your A's and your B's)
  2. Test your file in your web browser.
Q. What happened to the lines between A's and B's?
The same as with white spaces, in HTML you can add as many lines as you want between two texts (by hitting the ENTER key) and they just won't display.

If you want to force a line break, you must use the
<br />
tag. We already used this self-closing tag in the last tutorial. Now let's practice with it a little bit.
  1. This time try with:
    AAA<br />
    <br />
    <br />
    BBB
  2. Test your file in your web browser.
Q. Did it work?

The <p> tag

HTML has a special paragraph tag—
<p>
—to indicate the beginning and the end of a text paragraph.

By default, the
<p>
tag will insert an empty line between paragraphs (unless you specify otherwise; we will learn how to do that later on).
  1. Try using the
    <p>
    tag to separate two paragraphs:
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut neque. Sed adipiscing. Praesent est mauris, mattis ac, dapibus in, sagittis at, neque. Duis ac ipsum vitae leo molestie viverra. Duis iaculis dolor ut arcu. Nunc vel dolor sit amet pede lacinia scelerisque. Proin pretium. Sed hendrerit, sem ut tristique placerat, dolor tortor iaculis odio, eu varius lectus arcu ac ipsum. Vestibulum lacus. Quisque vel metus a mauris egestas rhoncus. Proin lobortis leo vehicula libero. Vestibulum imperdiet facilisis nibh. Vivamus eu dui. Sed facilisis velit eget elit. Etiam eleifend placerat metus. Aenean ipsum. Etiam lacus lectus, adipiscing non, pretium sed, ultrices sit amet, arcu.</p>
    
    <p>Nam fringilla hendrerit diam. Nulla nisi diam, elementum vel, tristique et, luctus eu, elit. Phasellus quis massa vitae enim laoreet pulvinar. Nulla tristique mauris sed erat. Mauris semper. Proin venenatis, diam euismod ornare feugiat, tortor purus blandit mauris, a rutrum mi turpis id orci. Nam semper lobortis augue. Morbi accumsan ornare turpis. Aliquam erat volutpat. Donec diam. Curabitur sapien. Duis ut lorem eget ante sodales tempor.</p>
  2. Test your file in your web browser.
  3. Delete the
    <p>
    tags and test your file again.

As you can see, you can use different approaches to "separate" paragraphs, either inserting one or more forced line-breaks with the
<br />
tag, or delimiting each paragraph with the
<p>
tag. Which one is better? Well, time and practice will tell which one works better for you.

I'll see you in the next tutorial, where we will learn about special characters in HTML.

Comments & Questions