<hr>
hr represents a horizontal rule.
Horizontal rules have default value settings instituted by browser. Browser defaults are alignment which is center; height of the rule; width where the default width is 100%, e.g., the rule extends across the full width of a element; and, vertical space inserted above and below a rule. These can be reset using style sheet rules.
Horizontal rules are used on new lines in the source code. Horizontal rules are—Commonly—used in div, section and article elements. [Note: An hr element may be used in any block-level/flow element, e.g., dd or li, and pass validation but it’s not recommended.]
The hr is considered an empty element. Most empty elements are self-closing: they do not require a closing tag, e.g., <hr>. HTML and xHTML have different methods:
- Element tag:
<hr>- Closure:
- HTML 4.01 - <hr>
- HTML 5 - Either closure type
- xHTML 1.0 - <hr(Single space) />
- Example [Default]:
-
- Code [HTML 4.01]:
-
<hr> - Code [xHTML 1.0]:
-
<hr />
- Example [HTML (Inline Style)]:
-
- Code [HTML 4.01]:
-
<hr style="height:40px;margin:50px 0;background-color:#778899;border:10px solid #000;">
- Example [HTML (Polakovic CSS Method)]:
-
- Code [HTML 4.01]:
-
<hr class="sectionRuleRosette"> - Code [CSS]:
-
.sectionRuleRosette { width: 30px; height: 30px; margin-bottom: 50px; border: none; background: url('/images/standards-rosette-black_vS.png') center center no-repeat; }