The <br> and <hr> Tags

Topics on This Page

The <br> Tag
The <hr> Tag
Example

The <br> Tag

HTML:   <br>
XHTML:  <br />
   (The XHTML format works in both HTML and XHTML)

Attributes:
  clear="left|right|all|none"

The <br> tag is an empty tag that begins a new line. You can use several <br> tags in succession to create empty lines.

<br> is a inline tag. As such, it can be used inside block tags such as <p> and <h1>. In strict HTML, it must be placed inside a block tag — otherwise, it's like naked text and will not validate.

The clear attribute is used to skip to the bottom of a "floating" element. I'll wait to talk about this until we talk about images.

The <hr> Tag

HTML:   <hr>
XHTML:  <hr />
   (The XHTML format works in both HTML and XHTML)

Attributes:
  align="left|right|center"   (Deprecated)
  size="pixels"               (Deprecated)
  width="value[%]"            (Deprecated)
  noshade                     (Deprecated - HTML format)
  noshade="noshade"           (Deprecated - XHTML format)
  color="color"               (Proprietary: MSIE only)

<hr> draws a horizontal "rule". The best way to see how the various options work is by example:

<hr />
<hr width="50%" align="center" />
<hr size="6" width="300" align="right" />
<hr size="6" width="300" align="right" noshade="noshade" />
<hr size="6" width="300" align="right" color="red" />
<hr size="6" width="300" align="right" style="color: red;" />

In MSIE, the last two lines are displayed in red. In Netscape, neither is displayed in red: Netscape doesn't provide any method for coloring a horizontal rule. Even Netscape 6 doesn't seem able to color a line, even with the CSS method. Regardless, I'd prefer using the CSS method to the proprietary color attribute, even though both methods work in MSIE and not in Netscape. At least the CSS method will validate.

The <hr> tag is an empty tag like <br>, but it's unusual in that it's a block-level tag rather than an inline-level tag. This means that you cannot place it inside a <p> tag or an <h1> tag.

Example

Here are some examples of <br> and <hr> tags. As usual, try some experiments.

If you display this code in MSIE, you'll find that the lines are colored. If you display it in either Netscape 4 or Netscape 6, they are not colored.

I've included a color attribute in one of the <hr> tags — see what happens when you try to validate this.

Try putting an <hr> tag inside a <p> tag. See how your browser displays it. See what message you get when you try to validate it (hint: the </p> tag is optional in HTML, and the paragraph is closed automatically whenever a block tag is encountered).

Try adding an <h1> tag. Include some text followed by an <hr> tag followed by some more text. See how your browser displays this. See what happens when you try to validate it.

Verify that you can put a <br> tag between some text inside an <h1> tag. See how your browser displays it, and verify that the validator accepts it.

I've included a naked <br>. Notice that it validates. Try changing the doctype to strict by removing " Transitional" and try validating it again. You'll see errors reported for the <br> tag, and also for the deprecated attributes in the <hr> tags.