HTML and CSS Reference
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.
ara inG PaGe secTions
The horizontal rule tag is simplicity itself:
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