ORGANIZING A PAGE - HTML5 - page 96

background - color : #D9D7BA;
color : #8C0303;
font - family : Tahoma , Geneva , sans - serif ;
}
</ style >
< meta http - equiv = ”Content-Type” content = ”text/html; charset=UTF-8” >
< title > Too many HRs </ title >
</ head >
< body >
< header >
< h4 >& nbsp ; Kubla Khan </ h4 >
</ header >
< article >
< hr >
In Xanadu did Kubla Khan < br >
A stately pleasure - dome decree :< br >
Where Alph , the sacred river , ran < br >
Through caverns measureless to man < br >
Down to a sunless sea .< br >
< hr >
So twice five miles of fertile ground < br >
With walls and towers were girdled round ;< br >
And there were gardens bright with sinuous rills ,< br >
Where blossomed many an incense - bearing tree ;< br >
And here were forests ancient as the hills ,< br >
Enfolding sunny spots of greenery .< br >
< hr >
But oh ! that deep romantic chasm which slanted < br >
Down the green hill athwart a cedarn cover !< br >
A savage place ! as holy and enchanted < br >
As e'er beneath a waning moon was haunted < br >
By woman wailing for her demon-lover! </ article >
</ body >
</ html >

100

As you can see, the <hr> tags are all within the article element, while the title is part of
the header element. However, in Figure 5-8, the page is shown in a mobile device, and the
horizontal rules do nothing to clarify and everything to fragment.

Where your page has a major division, a horizontal rule may be appropriate. However, even
then you should add CSS3 to lighten the hr element so that it's subtle — even adding trans-
parency will help. Good designers know how to use horizontal rules sparingly and subtly, but
non-designers can easily make a mess of their Web pages with overuse of <hr> tags.

FIGURES AND CAPTIONS
One of the more frustrating elements in HTML5 is the use of <figure> and <figcaption>
together. By placing a figcaption element inside of a figure element container, you might
assume that they form a single object for layout and design. h e figcaption element is