Horizontal Rules
The Horizontal Rule Element
The primary way to separate and identify sections of a Web page is by use of major
and minor headings coded within tags. Paragraph level content
within these sections can also can be visually separated by displaying horizontal
rules between them. In addition to its visual properties, HTML 5 prescribes the horizontal
rule for use when a thematic break among such content is required. The general format for
this tag is shown in Figure 2-15.
<hr />
Figure 2-15. General format for the <hr /> tag. Note that
in HTML5 the / is optional. <hr> is fine but note that
it does not have a closing </hr>
The <hr /> tag causes a line break with the rule appearing on a line by
itself. The default rule is 2 pixels in height and spans the width of the browser window.
The rule shown in Figure 2-16 is produced by the <hr /> tag coded on a
line by itself as
show in Listing 2-9.
<h2>Horizontal Rules</h2>
<p>A horizontal rule is used to separate content sections of a page. The
following
is a default rule. </p>
<hr />
<p>The rule is 2 pixels in height and spans the width of the browser
window. It is
preceded and followed by blank lines.</p>
Listing 2-9. Code to create a horizontal rule between two paragraphs.
Figure 2-16. Default horizontal rule.
In a later tutorial you learn how to style a horizontal rule by adjusting its height, width, color,
alignment, and display characteristics. For present purposes, the default rule can be effective
in visually breaking up text without starting a new section.
Deprecated <hr /> Attributes
Historically, the <hr /> tag included the following attributes to style
the rule. These attributes are deprecated, but many browsers still recognize them.
align="left|center|right"
size="n"
width="n|n%"
noshade
color="color"
The align attribute positions the rule to the left (default), centered, or to the right
across the line. The size attribute sets the height of the horizontal rule in pixels.
The width attribute sets the rule's width in pixels or as a percentage of the window
width. Rules can be displayed as a solid bar by coding noshade (without an associated
value) and assigned a color with the color attribute. The color value is given as a
color name or hexadecimal value. We will discuss such assignments in a later tutorial.
The following rule is given by the code:
<hr align="center" size="5" width="50%" noshade color="red">
Since style attributes within the tag have been deprecated under
current standards,
they should not be used in HTML5 documents. Instead, they should be avoided in
favor of the newer styling methods that will be discussed later.