HTML Horizontal Rule

By Stephen Bucaro

A horizontal rule created by the tag <hr /> creates a horizontal line that can can be used to break a webpage into sections. A horizontal rule is a block-level element, which means it has embedded carriage returns before and after, placing it on it's own line. Shown below is a generic horizontal rule.

<hr />

The horizontal rule has several attributes that allow you to control its appearance.

Attribute	Meaning
align	Alignment on page, left, right, or center.
color	Color of the rule.
noshade	Normally horizontal rules display with 3D shading.
size	Thickness in pixels.
width	Width in pixels, or as a percentage of document width.

Horizontal Rule Example

<hr align="left" size="6" width="200" color="green" />

The code above creates the horizontal rule shown below.

I know this section should be about html only, but the example below shows what you can do by adding a little style to a horizontal rule.

<hr align="left" size="8" width="200" style="border-style:outset; background-image: url('bg000017.gif');"  />

If you're using the Firefox browser, you'll see a beautiful rainbow colored three-dimensional rule. If your using Internet Explorer, you'll see a three-dimensional gray rule.

More HTML Code:
• HTML noscript Tag
• Line Break Basics
• HTML5 Slider Control
• Image Map Basics
• Text Input Box Basics
• HTML dfn Tag
• HTML Numbered or Ordered List
• HTML Bulleted or Unordered List
• Meta Tag Basics
• HTML5 role Attribute

 Follow @Stephen Bucaro

 General Web Design
 HTML Quick Reference
 CSS Quick Reference
 Java Script Quick Reference
 HTML Design
 Graphics Design
 Easy Cascading Style Sheets
 Easy Java Script Code
 Web Design Tools
 Coding Issues