Little Web Hut

HTML 4.01 and XHTML 1.0 Reference: <hr> Tag

HTML <hr> Tag - Horizontal Rule
Syntax HTML syntax - This element does not require a closing tag.
<hr>

XHTML syntax - This element is opened and closed, within a single tag, by adding a space followed by a forward slash at the end of the tag.
<hr />
Usage The <hr> tag is used to draw a horizontal rule across the display.

HTML <hr> tag example.
<p>This text is above the horizontal rule.</p>
<hr>
<p>This text is below the horizontal rule.</p>
Test It HTML Style

XHTML <hr> tag example.
<p>This text is above the horizontal rule.</p>
<hr />
<p>This text is below the horizontal rule.</p>
Test It XHTML Style

Content Model The <hr> element cannot contain any tags.

Red attributes have been deprecated
<hr> Tag Attribute Summary
Required Tag Specific Core Focus Events Language
  align noshade size width id class style title   onclick ondblclick onkeydown onkeypress onkeyup onmousedown onmousemove onmouseout onmouseover onmouseup dir lang xml:lang1
Notes: 1. XHTML only.

Red attributes have been deprecated
<hr> Tag Attributes
Attribute Description
alignThe align attribute specifies the horizontal alignment within the web page. Possible values are "center", "left", and "right".

HTML <hr> tag example using the align and width attributes.
<p>This text is above the horizontal rule.</p>
<hr align="center" width="400">
<p>This text is below the horizontal rule.</p>
Test It HTML Style

XHTML <hr> tag example using the align and width attributes.
<p>This text is above the horizontal rule.</p>
<hr align="center" width="400" />
<p>This text is below the horizontal rule.</p>
Test It XHTML Style


Note: This attribute has been deprecated.
noshadeThe noshade attribute specifies that the horizontal rule should be drawn as a solid color.

HTML <hr> tag example using the noshade and size attributes.
<p>The following horizontal rule is 5 pixels thick and does not use the
 noshade attribute.</p>
<hr size="5">
<p>The following horizontal rule is 5 pixels thick and does use the
 noshade attribute.</p>
<hr size="5" noshade="noshade">
Test It HTML Style

XHTML <hr> tag example using the noshade and size attributes.
<p>The following horizontal rule is 5 pixels thick and does not use the
 noshade attribute.</p>
<hr size="5" />
<p>The following horizontal rule is 5 pixels thick and does use the
 noshade attribute.</p>
<hr size="5" noshade="noshade" />
Test It XHTML Style


Note: This attribute has been deprecated.
sizeThe size attribute specifies the thickness of the horizontal rule in pixels.

HTML <hr> tag example using the noshade and size attributes.
<p>The following horizontal rule is 5 pixels thick and does not use the
 noshade attribute.</p>
<hr size="5">
<p>The following horizontal rule is 5 pixels thick and does use the
 noshade attribute.</p>
<hr size="5" noshade="noshade">
Test It HTML Style

XHTML <hr> tag example using the noshade and size attributes.
<p>The following horizontal rule is 5 pixels thick and does not use the
 noshade attribute.</p>
<hr size="5" />
<p>The following horizontal rule is 5 pixels thick and does use the
 noshade attribute.</p>
<hr size="5" noshade="noshade" />
Test It XHTML Style


Note: This attribute has been deprecated.
widthThe width attribute is used to specify the width of the horizontal rule. The value is in pixels, or percentage when followed by a percent sign (%). If the value is specified as a percentage, it refers to a percentage of the available space.

HTML <hr> tag example using the width attribute.
<p>This text is above the horizontal rule.</p>
<hr width="50%">
<p>This text is below the horizontal rule.</p>
Test It HTML Style

XHTML <hr> tag example using the width attribute.
<p>This text is above the horizontal rule.</p>
<hr width="50%" />
<p>This text is below the horizontal rule.</p>
Test It XHTML Style


Note: This attribute has been deprecated.
idThe id attribute assigns a unique name to a tag. This allows style sheets or scripts to reference the tag. See id Example
classThe class attribute assigns a class name to a tag. The class name does not need to be unique. More than one tag can have the same class name. This allows style sheets or scripts to reference multiple tags with a single class name. See class Example
styleThe style attribute specifies styles for the tag. For Cascading Style Sheets (CSS), the syntax is name:value. Each name:value pair is separated by semicolons. See style Example
titleThe title attribute specifies additional information about the tag. It is common for browsers to display the title when the pointing device stops over the object. See title Example
onclickThe onclick attribute specifies a script to be run when the object is clicked with a mouse or other pointing device. See onclick Example
ondblclickThe ondblclick attribute specifies a script to be run when the object is double clicked with a mouse or other pointing device. See ondblclick Example
onkeydownThe onkeydown attribute specifies a script to be run when a key is pressed down. See onkeydown Example
onkeypressThe onkeypress attribute specifies a script to be run when a key is pressed and released. See onkeypress Example
onkeyupThe onkeyup attribute specifies a script to be run when a key is released. See onkeyup Example
onmousedownThe onmousedown attribute specifies a script to be run when the mouse button, or other pointing device button, is pressed while over the object. See onmousedown Example
onmousemoveThe onmousemove attribute specifies a script to be run when the mouse, or other pointing device, is moved while it is over the object. See onmousemove Example
onmouseoutThe onmouseout attribute specifies a script to be run when the mouse, or other pointing device, is moved away from an object after being over it. See onmouseout Example
onmouseoverThe onmouseover attribute specifies a script to be run when the mouse, or other pointing device, is moved onto the object. See onmouseover Example
onmouseupThe onmouseup attribute specifies a script to be run when the mouse button, or other pointing device button, is released while over the object. See onmouseup Example
dirThe dir attribute tells the browser whether the text should be displayed from left-to-right or right-to-left. It does not reverse the direction of the characters, like the <bdo> tag does, but it can help the browser to determine if the text should be aligned on the left side or the right side. See dir Example
langThe lang attribute specifies a language. This attribute can help the browser to correctly display text. This attribute can also be useful for braille translation software, speech synthesizers, dictionary definitions, etc. See lang Example
xml:langThe xml:lang attribute specifies a language for XHTML documents. This attribute can help the browser to correctly display text. This attribute can also be useful for braille translation software, speech synthesizers, dictionary definitions, etc. See xml:lang Example

Note: XHTML only.

HTML <hr> Tag Examples
Test It HTML StyleTest It HTML Style<hr> tag example.
Test It HTML StyleTest It HTML Style<hr> tag example using the align and width attributes.
Test It HTML StyleTest It HTML Style<hr> tag example using the noshade and size attributes.
Test It HTML StyleTest It HTML Style<hr> tag example using the width attribute.