Web Design in a Nutshell, 3rd Edition

Name

hr

Synopsis

    <hr />

Attributes

Core (id, class, style, title), Internationalization, Events

Deprecated attributes

align="center|left|right"

noshade="noshade"

size=" number "

width="number" or "number%"

The hr element is a block-level element, so it always appears on its own line, usually with a bit of space above and below as well. By default, browsers render a horizontal rule as a beveled dimensional line, as shown in Figure 10-4.

    <p>These are some deep thoughts.</p><hr />
    <p>And this is another paragraph of deep thoughts.</p>

Figure 10-4. A horizontal rule (default rendering)

The hr element includes a number of deprecated attributes for controlling the presentation of the rule.

size

Specifies the length of the rule in pixels or percentages.

width

Specifies the thickness of the rule in pixels.

align

Specifies the horizontal alignment of horizontal rules that are not the full width of the containing element.

noshade

Turns off the dimensional shading on the rule and renders it in black.

It is possible to control the presentation of an hr with style sheets, as shown in this example, that make the rule a one-pixel solid blue line. Note that the color and background colors are specified for cross-browser compatibility.

    hr {height: 1px;
        width: 100%;
        color: blue;
        background-color: blue; }

The preferred method is to keep the presentational hr element out of the document entirely and specify ...