Constructing Content - HTML5 with CSS3 - page 89

The hr element is styled as block-level by default so it will appear on its own line, but the amount of space
above and below it will vary slightly in different browsers, as will the appearance of the line itself. Figure
4-7 shows the hr element as Firefox renders it. You can use CSS to specify the top and bottom margins of
an hr for some improved consistency across browsers.
Figure 4-7. A horizontal rule rendered by a web browser
Required Attributes
The hr element doesn't have any required attributes.
Optional Attributes
No optional attributes exist for the hr element.
Older versions of HTML included a number of presentational attributes for horizontal
rules: align to specify the alignment of the rule to the left, right, or center; size to
specify the thickness of the rule; width to define its width in pixels; and noshade to
override the 3-D shading effect some browsers use when rendering an hr . These are all
obsolete in HTML5, and you can better achieve most of their effects with CSS.
div
The div element creates a general-purpose division in your document, grouping related content and
elements together. It's semantically neutral but not entirely meaningless; a div essentially states,
“Everything in here belongs together and is separate from everything else,” but says nothing specific about
the nature of the content within.
Prior to HTML5, the div element was a designer's go-to tool for organizing content into related blocks that
could then be styled with CSS or manipulated with JavaScript. But HTML5 has introduced a number of
more semantically valuable sectioning elements (covered earlier in this chapter) that can take over that
role. Even so, you'll often need to group other elements or related bits of content together without adding
the extra layer of meaning that a section , article , aside , nav , or other elements might apply.
In Listing 4-16, a div classified as “legal” wraps around and contains a few related elements, as you might
see in a site's footer. This div collects those related elements while also separating them from other
adjacent content.