JavaScript EditorBest javascript editor debugger     Ajax website 

Main Page

Previous Page
Next Page

Adding Horizontal Rules

One graphic element that is completely supported by the majority of the browsers is the horizontal rule. There are several attributes you can use to jazz up horizontal rules, although they've all been deprecated in favor of styles.

To insert a horizontal rule:

Type <hr where you want the rule to appear. The text that follows will appear in a new paragraph below the new rule.

Figure 5.36. The hr tag includes an automatic line break both before and after the rule.

Figure 5.37. Horizontal rules can be helpful for dividing sections on your page.

If desired, type size="n", where n is the rule's height in pixels.

If desired, type width="w", where w is the width of the rule in pixels, or as a percentage of the document's width.

If desired, type align="direction", where direction refers to the way a rule should be aligned on the page; either left, right, or center. The align attribute is only effective if you have made the rule narrower than the browser window.

If desired, type noshade to create a solid bar, with no shading. Add ="noshade" in XHTML.

Type the final /> to complete the horizontal rule definition.

Figure 5.38. The hr attributes are deprecated but well supported.

Figure 5.39. You can make horizontal rules thicker and narrower.


  • All of the attributes for HR (but not HR itself) are deprecated. The W3C recommends using styles to format your horizontal rules (see page 169).

  • There is no CSS equivalent to noshade. One solution is to omit rules and just apply borders (see page 184).

Previous Page
Next Page

JavaScript EditorBest javascript editor debugger     Ajax website