Using BR tags Vs P tags…..and (my) Common Mistakes

Share on Facebook0Tweet about this on Twitter0Share on Google+0

Newcomers to WordPress will probably default to writing their Posts and updates using the ‘visual editor’ tab in the Post page.

The Visual Editor is a godsend to newcomers as it handles all the markup and code for you and it provides easy to use buttons that allows you to format your text and your post with a simple click. Want to turn something bold, easy, just highlight the word and press the ‘B’ button. Want to align your text, easy, just click the buttons that allow you to align your text. Simple

WordPress Visual Editor:
visual editor in wordpress

The Visual Editor is not without its pain points however, and you will probably soon find yourself in a situation where you want to start writing your Posts directly in the ‘Text Editor’ tab in WordPress and start adding your own tags to control formatting.

When I first started doing this I got into very bad habits with regard to using P (Paragraph) tags and BR (Line Break) tags.

I used to add a ‘P’ tag between the paragraphs in the hope that it would control and create paragraphs, and I rarely used line breaks. My Post would usually look something like this:

I am using a P tag below to attempt to create a spacing between this line
and this line. What an idiot.

So how should I use BR tags and P tags in my WordPress posts?:

As a general rule the P tag is a block level element, and should have an open tag and a closed tag around the content, like this:

<p>This is a much better example of how to use a p tag</p>
<p>As you can see, the P tag is open and closed around the content that I want to turn into a paragraph and this paragraph is separated from the one above</p>

The BR tag can be used within a block element (like P tags) or on any line of a web page to force a line break. Using a BR tag will force the next piece of content or text to start on the next line. Example below:

This is a line of text to show a BR tag in use
And this text is on a new line because I used the BR tag

And here is an example of P tags and BR tags:

<p>This is a line of text to show a paragraph where I want to force a line-break in the middle of it, here comes the line-break now
And this text is on a new line because I used the BR tag above<p/>

Hopefully that helps someone out there. This is basically a name and shame post for myself, highlighting and sharing some of the dumb habits that I found myself doing as I was learning this stuff from scratch.

Leave a Comment