3.6: Horizontal Rules

Last updated
Save as PDF

Page ID: 93895

\( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \) \( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)\(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\) \(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\)\(\newcommand{\AA}{\unicode[.8,0]{x212B}}\)

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 />
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 \(\PageIndex{}\) is produced by the <hr /> tag coded on a line by itself is:

<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>

horizontal rules display in a browser — Figure \(\PageIndex{}\): Default horizontal rule. ("MGA Web Development Tutorials" by Floyd, Kevin; Kwak, Myungjae; and Stines, Alan, Computer Science and Information Technology Ancillary Materials. 4, GALILEO Open Learning Materials is licensed under CC BY-SA 4.0)

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.