When you're adding text to your web pages, typically the first tag you will write will be the p tag. But there is so much more that you can do with this tag, if you just understand it.
Correct Use of the Paragraph Tag
To write a paragraph in HTML, you write the tag: <p> and then begin writing your text. For example:
<p>
This is my paragraph. It is created like any other paragraph, with a <p> tag at the front.
If you are writing XHTML or you like to close all optional tags, you would finish the paragraph with the closing </p> tag. This tag is not required unless you are writing XHTML.
Two Mistakes Some Designers Make When Using the P Tag
Some designers don't use paragraph tags to start their paragraphs, but rather they put them in between paragraphs of text. While this generally works out the same as putting the tag at the beginning of the paragraph, it is incorrect and can cause problems with CSS. When the web browser reads the HTML, it reads it sequentially. So the first block of text it doesn't see as a paragraph—because there is no marker indicating that it is. Instead it treats it as body text or text of the parent element. And if you have specific styles for paragraphs that are different from body text, that first paragraph will look wrong.
It is also common to see <p> </p> in blocks of HTML that were written by some web page editors. Some designers have grabbed that technique to add extra space in various areas of their site. While not technically wrong, it is bad form to use an empty paragraph for a spacer. You should instead adjust the margins where you want the space using the CSS margin property.
Styling Paragraphs
One of the most often wished for style is the ability to indent just the first line of a paragraph. While it may be tempting to use the non-breaking space to indent, there is an easier way: CSS. Learn how to indent the first line in paragraphs.
Another technique that is useful to know is how to align the text in your paragraphs. With the CSS style property text-align you can put your paragraph text flush left (the default), flush right, or justified.
You can even use CSS backgrounds to decorate your paragraphs and make them stand out even more.
Paragraph Typography
When working with web paragraphs, another thing you need to worry about is the typography of those paragraphs. There are three aspects that you should focus on:
- measure
- leading
- widows
- orphans
Measure is the length of a line on a page or screen. And in web pages this can get extremely long, which makes the paragraphs virtually unreadable. A good rule of thumb is to have no line longer than 52–78 characters, including spaces, long. The easiest way to affect the measure of your paragraphs is by changing the width with the CSS width property.
Leading is the space between lines of text. You adjust it with the CSS line-height property. Your leading should change depending upon how big your measure is. For paragraphs that have a measure that is narrower than the optimum listed above, you should have less leading. And for paragraphs that are longer than the optimal leading, you should have more leading in between the lines.
Widows and orphans appear when one word ends up on a line by itself or when one sentence appears at the top of a printed page by itself. While CSS has a widows and an orphans property, these properties are used when you print web pages, and not in web browsers. So the only way to adjust widows and orphans in web pages is by adjusting the font size or the width of the paragraphs.
