ptg16476052132 LESSON 7: Formatting Text with HTML and CSS
Attributes of the
Tag
If you’re working in HTML5, this one is easy. HTML5 does not support any attributes
of the <hr> element other than those supported by all elements. However, past versions
of HTML supported a number of attributes that could be used to modify the appearance
of a horizontal rule. If you are creating new web pages, you should use CSS to style your
horizontal rules. However, you may encounter these attributes in existing HTML.
The size attribute indicates the thickness, in pixels, of the rule line. The default is 2 , and
this also is the smallest that you can make the rule line.
To change the thickness of an <hr> with CSS, use the height property, which I’ll discuss
in Lesson 8, “Using CSS to Style a Site.”
The width attribute specifies the horizontal width of the rule line. You can specify the
exact width of the rule in pixels. You can also specify the value as a percentage of the
browser width (for example, 30% or 50%). If you set the width of a horizontal rule to a
percentage, the width of the rule will change to conform to the window size if the user
resizes the browser window. You should use the width CSS property instead. I’ll also
talk about width in the following lesson. Most browsers automatically center <hr> tags.
Figure 7.6 shows the result of the following code, which displays some sample rule line
widths :Input ▼
<h2>100%, Default Size</h2>
<hr>
<h2>75%, Size 2</h2>
<hr width="75%" size="2">
<h2>50%, Size 4</h2>
<hr width="50%" size="4">
<h2>25%, Size 6</h2>
<hr width="25%" size="6">
<h2>10%, Size 8</h2>
<hr width="10%" size="8">