Hr

Horizontal Rule Support Key: [2\|3\|3.2\|4] [X1\|X1.1] [IE1\|M1\|N1\|O2.1]	What is it? Attributes Tag Example	Parent/Content Model Tips & Tricks Browser Peculiarities
= Index DOT Html by Brian Wilson =

Main Index | Element Tree | Element Index | HTML Support History

Quick Statistics
End Tag:		Omitted
Standards Details:		In all HTML 4.x/XHTML DTDs
XHTML Modules:		Presentation
CSS 'display' Type:		"block"
CSS Mapping:		border
Default Rendering:		Horizontal line the width of the containing parent element
Official Docs:		HTML 4.x, XHTML 1.1

What is it?: A Horizontal Rule provides a visual division between sections of text. The default value in most multimedia capable browsers is a 3 dimensional transparent line running horizontally across the entire screen.

Common Attributes
%Core%: [2|3|3.2|4] [X1|X1.1] [IE3|M|N4B2|O4]
%Accessibility%: [2|3|3.2|4] [X1|X1.1] [IE4B1|M|N6|O5]
%Events%: [2|3|3.2|4] [X1|X1.1] [IE4B1|M|N6B1|O4]
%Language%: [2|3|3.2|4] [X1|X1.1] [IE|M|N|O]
%Editing%: [2|3|3.2|4] [X1|X1.1] [IE5.5|M|N|O]
Specific Attributes
Align
[2|3|3.2|4] [X1|X1.1] [IE1|M2FB|N1|O2.1]: Standards Details: Deprecated in HTML 4.x/XHTML 1.0; Dropped in XHTML 1.1 in favor of CSS.; Required? No; Description:
For rules that do not span the entire browser window using the WIDTH attribute, this indicates how to align the rule with respect to the sides of the browser window.; Values: Left | Center [DEFAULT] | Right.
Clear
[2|3|3.2|4] [X1|X1.1] [IE|M|N|O4]: Standards Details: NA; Required? No; Description:
This attribute helps an author in situations with floating objects (images, tables, etc.) produced through the Left and Right ALIGN attributes. It allows content to stop being flowed around the floated element.; Values:
   None [DEFAULT - No special line breaking effects are applied relative to the floating element.]
   Left [breaks line after this element and moves down vertically until the left margin is clear of floated objects.]
   Right [breaks line after this element and moves down vertically until the right margin is clear of floated objects.]
   All [breaks line after this element and moves down vertically until both margins are clear of floated objects.]
Color
[2|3|3.2|4] [X1|X1.1] [IE3A1|M|N|O]: Standards Details: NA; Required? No; Description:
This attribute specifies the color of the rule.; Values: The standard HTML color specification methods apply.
Noshade
[2|3|3.2|4] [X1|X1.1] [IE1|M2FB|N1|O2.1-3.6x, 7.0]: Standards Details: Deprecated in HTML 4.x/XHTML 1.0; Dropped in XHTML 1.1 in favor of CSS.; Required? No; Description:
This is a stand alone attribute which makes the rule a solid color (not three dimensional.); Values: NA (HTML); noshade (XHTML)
SDAPref
[2|3|3.2|4] [X1|X1.1] [IE|M|N|O]: Standards Details: NA; Required? No; Description:
This is an SGML Document Access (SDA) attribute. SDA attributes are designed to transform HTML (and other SGML-based documents) to the ICADD DTD - which is used in creating accessible documents for users with visual disabilities (rendering in Braille, large print, speech synthesis, etc.) The attribute value specifies content to be added BEFORE the original element content (in this case the string "&#RE;&#RE;") when the SDA document is rendered. &#RE; refers to a carriage return in the SDA transform.; Value: "&#RE;&#RE;"
Size
[2|3|3.2|4] [X1|X1.1] IE1 | M2FB | N1 | O2.1: Standards Details: Deprecated in HTML 4.x/XHTML 1.0; Dropped in XHTML 1.1 in favor of CSS.; Required? No; Description:
This attribute specifies the vertical size of the rule in pixels.; Values: CDATA. [Positive integer values]
Width
[2|3|3.2|4] [X1|X1.1] [IE1|M2FB|N1|O2.1]: Standards Details: Deprecated in HTML 4.x/XHTML 1.0; Dropped in XHTML 1.1 in favor of CSS.; Required? No; Description:
Specifies the width of the rule on the screen. Values are specified either by absolute pixel size or percentage of the screen/window to use.; Values: CDATA. [A positive integer representing pixel width of the rule or a positive integer/floating point number combined with a percent char ('%') representing a percentage of the parent element's width.]

Example: <hr width="30%" align="center" size="3" noshade color="#0000FF" />

Parent Model: %Block Parent%
Content Model: This tag does not accept any content.

Tips & Tricks

[Test] The ALIGN attribute is meaningless unless the WIDTH attribute is also specified.
It is very easy to use a graphic instead of the HR element, but remember that there is no automatic/implied line break before and after a graphic like there is for HR.
Specifying a graphic instead of an HR element will involve a longer download time because of the extra HTTP request required. Keep this in mind when authoring for your readers.
DTD NOTE: The parent models used in the HTML 3.2 and Internet Explorer 3.0 DTDs conflict slightly. Although most DTDs list the HR element as a block element, its actual implementation as a stand-alone element tends to make it a bit more relaxed in most browsers' implementations.

Browser Peculiarities

[Test] In Netscape, the NOSHADE attribute has an unexpected odd effect on HR elements. It usually creates a gray rule, with roughly rounded ends which are added to the HR WIDTH value on each side. This can effectively add the SIZE attribute to the specified WIDTH of the HR, as the radius of each of the rounded ends is about half of the SIZE attribute. (eg: <hr SIZE=40 WIDTH=100 NOSHADE> should create a rule in Netscape with rounded ends, with a height of 40px and an apparent total length of around 140px.)
[Test] Opera versions 3.5-3.6x have an interesting artifact in the interaction of HR and tables: HR normally has a default ALIGN value of CENTER when the WIDTH is not 100%, but within table cells, the HR alignment defaults instead to the horizontal alignment of the cell. Other browsers as well as older Opera versions always obey the HR ALIGN default. Opera versions 4+ revert to the older behavior.
[Test] The SIZE attribute has some limitations: In Opera, Mosaic and IE versions 3.0 and before, there are no restrictions on the SIZE attribute. If you specify a pixel size, it will be rendered. In all versions of Netscape and in IE 4.0+, the SIZE attribute is limited to 100 pixels - values above this amount will be rendered as SIZE=100 in these browsers.
[Test] If an HR element is used in a table cell and there is no content in the rest of the column, the width of the HR will default to 1 or two pixels. All of the reviewed browsers behave this way (well, except for Mosaic, which seems to automatically impose an ~40 pixel width on such HRs.)
The NOSHADE attribute in Opera: Support for this attribute was dropped after 3.6x, but was added back in again beginning in 7.0. (yes, that is why the notation is weird like that. ;-})

Horizontal Rule