HTML5 24-Hour Trainer

Chapter 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 techniques 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.

SEPARATING PAGE SECTIONS

The horizontal rule tag is simplicity itself:

<hr />

As one of the handful of HTML5 so-called ...