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:
As one of the handful of HTML5 so-called ...