Skip to main content

The Horizontal Rule in HTML5

Published on 7th April 2013

The design of the latest project I'm working on included 'traditional horizontal rules' to break up the page content. It wasn't until I looked into this further, I discovered the horizontal rule element has changed in HTML5.

In HTML5 the <hr> element has been given the specific semantic purpose of representing 'a thematic break between paragraph-level elements' e.g. a change of scene in a story, or a change in topic. Previous versions of HTML defined the <hr> element only in presentational terms.

I wanted to use the <hr> in both semantic and presentational terms with the least amount of markup possible. Here is the code I used to achieve it.

NOTE: Pseudo elements can only be defined on container elements. <hr> (void element) is not a container element hence should not allow for pseudo elements. Pseudo elements are content so it's a possibility future browser versions will not display them (tested and works on Chrome, Firefox and Safari). The :before pseudo element will always work on my presentational option as it's a <div> (container element) with a class.

view demo

/* semantic */

/* Presentational */
<div class="hr"></div>
.hr {
  margin: 1em 0;
  padding: 0;
  height: 1px;
  border: 0;
  border-top: 1px solid #b8b9b6;
  border-bottom: 1px solid #ffffff;
  text-align: center;
.hr:before {
  content: url('../img/hr-cogs.png');
  position: relative;
  top: -22px; */ half the height of the image */

view demo