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 ...
Get HTML5 24-Hour Trainer now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.