Web Development Tutorials


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.

horizontal rules display in a browser
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.


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.

TOP | NEXT: List Structures