Grouping with the Element - HTML

Now that you know how to format paragraphs, what about groups of paragraphs? Suppose, for example, that you wanted to indent an entire section of text and place a border around the section. Although you can accomplish the indent by using styles with paragraph tags, the unified border is harder to do. For example, consider the following code, which uses styles and paragraph tags:

The output of this code is shown in Figure. Note how each paragraph is surrounded by its own border, which is not what you wanted.

Adding some formatting, such as borders, to paragraph tags causes the formatting to distinctly appear around individual paragraphs.

This is where the division tag (<div>) comes in handy. The <div> tag is used to delimit divisions of a document, which can include several paragraphs or other block elements. Instead of defining a style for the paragraph tag, define it as an unattached class (one without a specified element) and use it with the <div> tag, as in the following code:

Note the output of this code in Figure .

Moving the border definition to the <div> tag causes the border to appear around the entire division instead of around the individual pieces.

Tip

Note that the border in Figure appears at the margins of the document, not at the indent of the paragraphs it surrounds. This is because the style specifies padding-left and padding-right, which affects the spacing between the parent element (the border) and its children (the paragraphs). To indent the border itself, you would need to specify values for margin-left and marginright.

Keep in mind that the <div> tag can be used to group combinations of block elements as well—it is not limited to paragraph blocks. For example, you could easily have included a headline, horizontal rule, or other block element(s) in the paragraphs in the last example, and the border would have been rendered around them all.