hr (HTML element)
| Depr. | Empty | Version |
|---|---|---|
| No | Yes | HTML 3.2 |
| IE5.5+ | FF1+ | Saf1.3+ | Op9.2+ |
|---|---|---|---|
| Full | Full | Full | Full |
Example
In this example, an
hr is used to separate body content from footer
information:
<p>And with that the actress and the bishop made their
eventful departure.</p>
<hr/>
<div id="footer">© All content copyright 2007. Even
the unfunny stuff.</div>
- Type
- block-level element
- Contains
- nothing: this is an empty element
- Contained by
- all block level elements
Description
The hr
element creates in the document a highly visible break that renders as a
slim horizontal line running the width of the area to which it’s applied.
While it’s still perfectly valid to use this element in XHTML strict
pages, as it’s not on the list of deprecated elements, it isn’t used a
great deal these days, because:
- It’s difficult to style consistently across browsers through CSS, or via its own presentational attributes.
- In many cases, it may be better to use a combination of headings
and lists to define the document structure, as this will promote ease
of navigation for users of assistive technology; the CSS
borderproperty can be used to visually style a break in the document.
Use This For …
The hr
element can be used to create a break in a document at a point where there
may be a change of thought or meaning, but where it may not necessarily be
appropriate to introduce a subheading. A real-world equivalent for this
element can be found in books where a divider may appear as three
asterisks, or some other collection of characters to indicate a change of
scene or momentum.
Compatibility
| IE | 5.5 | Full |
|---|---|---|
| 6.0 | Full | |
| 7.0 | Full | |
| Firefox | 1.0 | Full |
| 1.5 | Full | |
| 2.0 | Full | |
| Safari | 1.3 | Full |
| 2.0 | Full | |
| 3.0 | Full | |
| Opera | 9.2 | Full |
| 9.5 | Full |
Every browser listed supports this element type.
However, the way that the hr
element renders differs greatly between browsers, so it doesn’t pay to be
too precious about design consistency in this
case.
User-contributed notes
Add a note
To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.
