Line Breaks

The line break tag <br> is used to enforce a new line after a text.  It is one tag, and preferably we write it in the form <br /> so that we ensure that it closes itself by applying the XHTML concepts that aimed to make web pages easy to interpret by simple processor devices, like mobiles.

My Recommendations about the <br> tags:

  • If you have a complete paragraph, you may enclose its lines with the paragraph tag, i.e. <p> and </p>, and it will automatically align itself, rather than using a <br /> for every line.
  • If you need to force some line spaces around a text or a paragraph, use the padding tags that will be described later on this tutorial, rather than using a sequence of <br /> tags.
  • Many tags like <h1> and <p> will automatically enforce and newline after the text enclosed by them.

Example:
Let’s update our example html file, using the <br /> tag as the following:

   
<!doctype html>   
<html>
<head>
    <title>My Learning Plan</title>
</head>
<body>
    <h1>Hi, I'm learning HTML.</h1>
    <p>I will use it for developing web pages. 
    It is very easy and simple.</p>
    <p>This is part of my learning plan.  Which will include:</p>
        Html<br />
        JavaScript<br />
        And the Java Programming Language<br />
</body>
</html> 

Save the page and open it in the browser.  The results will be something like this:

Notice how the three lines at the end of this page are separated by a new line as we used the <br /> tag, and how the <h1> and the <p> tags enforced new lines without the need of the <br />.

Note: Lists like the one shown in our example have some dedicated tags for them, that we are going to practice later in this tutorial.