Paragraphs are defined with the <p> element, which you have already seen in some examples in Chapter 2. To create a paragraph of text, the text is enclosed between the tags of the element. Since it is a block-level element, its content is always placed on a new line by default. Some space is also placed between it and the element directly above and below. Figures 3.5 and 3.6 illustrate how it is used and show its effect.
Paragraphs are used for dividing a body of running text into smaller, logical, and more easily digestible blocks of text, with the number of ideas per paragraph typically limited to one. How they are styled varies widely, depending on the look and feel that is being communicated. Typical layout features used to achieve various paragraph styles include indent (which is the nudge to the right of the first line of the paragraph that is not the first paragraph), outdent/hanging indent (which is the nudge to the right of every line in a paragraph, except the first one), initial (which is the first letter of the first word in a paragraph when it is larger than the rest of the text), and a space (which is the space between paragraphs). Figure 3.7 illustrates these features, which are achieved using CSS. How to do this is shown in Chapter 14.
As shown in the illustration, first-line indents or outdents and spaces are used to delimit (separate) paragraphs, while initial is used just for decoration. Although first-line indent is most commonly used in printing, space is the most common in Web design. Unlike in printing, there are no rigid rules in Web design for styling paragraphs, and any of those illustrated in the figure, and more, are used. However, the typical default style used by browsers is to present content in paragraphs that are separated by space and are left-aligned.
CHALLENGE 3.2
As you may know, the <p> element, like the <div> element, is a block element, which means that they both start on a new line. However, you should not use one in place of the other, because they have different semantic meanings to user agents. To compare the visual differences between the two, enter the following HTML code in a text editor and render it.
This text is followed by a paragraph element.
<p>This content is in a block element.</p>
This text is followed by a div element.
<div>This content too is in a block element </div>
Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.