Alternative to horizontal rule tag `<hr>` working in html5

Question

I am currently working on some html for a calendar (in html5), and I am trying to add in a coloured horizontal line. I have been using the horizontal rule tag <hr> but I'm struggling to get most of the attributes to work at all.

This is what I want:

<hr color="purple" align="left" width="120%" size="6">

I read that some attributes don't work in html5... and the only one that is working is the width tag. None of the others are doing anything!

How can I get this to work? Is there a better way to approach this?

Answer 1

Use CSS rules

hr.someClass {
  background-color: purple;
  width: 120%;
  height: 12px;
  border-top: 1px solid black
}

<hr class="someClass">

Answer 2

You could add a div with a border-top, as below:

<div style="border-top: 6px solid purple"></div>

With external styles (which is always better):

.horizontal-rule {
  border-top: 6px solid purple;
}

<div class="horizontal-rule"></div>

Answer 3

In HTML 4.01, the <hr> tag represents a horizontal rule. In HTML5, the <hr> tag defines a thematic break. Also attributes like align, size and width are not supported in HTML5.

The proper alternative to this is defining a div as:

HTML

<div class="hr"></div>

CSS

.hr {
    border-top: 6px solid purple;
    width: 120%;
}