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:
• The HTML Head Tag
• Line Breaks in HTML
• HTML Special Characters - Character Entities
• Make an HTML Element Editable
• HTML Blockquote Basics
• HTML5 Slider Control
• Adding Space Around an Image
• Providing Alternate and Title Text for an Image
• HTML Numbered or Ordered List
• HTML List Basics

 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