HTML and CSS Reference
In-Depth Information
12
adding Horizontal rules
As I'm writing this lesson, I can already hear those folks who skim the table of contents (you
know who you are!) scoffing. “Horizontal rules! There's a whole chapter on horizontal rules.
Fiddlesticks!” But what those skeptics don't understand is that the lowly horizontal rule has
gotten a notable promotion in HTML5.
In prior HTML versions, the
<hr>
tag would simply place a line across the page wherever it
appeared. Sure, by setting various attributes you could determine its length, alignment, and
even whether it had a quasi-3D drop shadow. But it was always a lowly line, of little meaning
to the overall page context.
In the HTML5 specification, the purpose of the
<hr>
tag has been broadened. Now, the <
hr>
tag indicates a transition from one topic to another within a larger section. Perhaps what's
more important, it doesn't have to be a line at all. Styled correctly, any symbol could be used.
For example, say that the next paragraph starts a discussion on using advanced CSS tech-
niques with the
<hr>
tag. A separating image could be used, like this:
In this lesson, you learn how to add the
<hr>
tag to the page whether you want to display a simple
horizontal rule or something with a bit more flair to indicate thematic changes in content.
sePara
P
Para
araT
ara inG PaGe secTions
T
The horizontal rule tag is simplicity itself:
<hr />
As one of the handful of HTML5 so-called empty elements,
<hr>
does not require a closing
tag, just a forward slash before the final caret. When rendered by a browser, the
<hr>
tag by
