The Importance of Paragraphs and how to use them in Sitefinity

The paragraph tag is the most commonly used element in HTML. Its main purpose is to separate large chunks of content so that it’s much easier to read.

Paragraph tags look like this:

<p></p>

Break Tags: They Break my Heart

I’ve been working with CMS websites for several years, and one of the trends I’ve noticed is clients using break tags like this:

<br>

...to separate content instead of utilizing the paragraph tag. Now, using break tags technically works and usually achieves the desired effect, however this can lead into some problems down the road.

The issue with break tags is that you need to make sure you’ve entered in the correct amount to get consistent spacing. Usually, it takes two break tags to get a good amount of spacing. But, what happens if another content editor thinks three is the magic number? This leads to inconsistent spacing between elements.

Paragraph Power

Now, let’s talk about the benefits of paragraph tags. Paragraphs are block elements that can be styled via the global stylesheet. This allows us to control the margin, line height, and other attributes, much like any other element of the site. This is important because if you’d like to change any of those attributes, it can be done in one centralized place. This allows changes to be made much more efficiently.

A good example would be a change in the spacing between bodies of text. For example, the current margin of paragraphs is 20px, but you’d like it to be increased to 40px. With break tags, those adjustments would simply not be possible, at least not possible without having to go into every single page of the website and adding an additional break tag. Now that’s a TON of work!

Another advantage of using paragraph tags is mobile display. For example, you may have two columns with bodies of text, but the last body does not have a paragraph tag wrapped around it. With mobile viewing, those two columns get stacked on top of each other. But whoops! There’s no spacing? That’s because there is no paragraph element to give it that extra bottom margin to make things separated. This goes for images as well. Best practice scenario is to wrap images that you have on the page with a paragraph tag for the same reasons illustrated above for bodies of text.

How to Apply Them in Sitefinity

Below is a video demonstrating how to apply paragraph tags in both webforms and MVC.

If you have questions about paragraph tags or would simply like to learn more, reach out to your Vanguard Client Services Manager.