Line Breaks or Paragraphs

Believe it or not - I didn't know the difference between <br /> and <p></p> long after I built my first web page back in 1998. So I must assume that many newbies to web page designing will also stumble with this; especially if they start out using WYSIWYG HTML editors like MS FrontPage and Macromedia's Dreamweaver.

Using ENTER to create Paragraphs

Let's assume for a moment that you usually use MS FrontPage to design your web pages. If you would type out the following three sentences and hit Enter at the end of each sentence, your page may look a lot like this:

Because you hit Enter at the end of each sentence, MS Frontpage (or Dreamweaver) automatically 'codes' them to be three different paragraphs. If you view the HTML view window off MS FrontPage, you'll see something like this:

<p>I am not ashamed of using MS FrontPage.</p>
<p>Many people say that they prefer Notepad.</p>
<p>I say use whatever that allows you to get the job done!</p>

Using SHIFT + ENTER to create Line Breaks

Now, instead of hitting just the Enter button, we actually hit the Shift + Enter buttons together - at the end of each sentence, we should get:

Like before, viewing the HTML view window off MS Frontpage (or Dreamweaver), you'll see something like this:

<p>I am not ashamed of using MS FrontPage.<br>
Many people say that they prefer Notepad.<br>
I say use whatever that allows you to get the job done!</p>

So what is this <br /> I see all over the place?

That's <br> for XHTML. Unlike regular HTML, you have to close every HTML tag or element you use on your XHTML web page. So, previously 'empty' elements such as <br>, <img>, <hr> etc., now need to have closing tags such as <br></br>. However that looks a bit retarded, and some bright guy somewhere let's us use the shorthand <br /> to achieve the same thing.