O'Reilly logo

HTML5 24-Hour Trainer by Mark Fletcher, Joseph W. Lowery

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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:

Adding Horizontal Rules

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required