HTML - Attributes for HTML hr element

<HR WIDTH="40%" COLOR="#8080FF">

https://www.w3schools.com/jsref/dom_obj_hr.asp

Note that w3schools claims that none of the attributes are supported in HTML 5.  I/M/O this is nonsense.  Browsers cannot afford to and will not ignore legacy HTML in an effort to push HTML 5.  There are too many billions of pages with legacy HTML.

Hi Dr. Klahn,

1. Are you saying that HTML 5 does support these attributes? Or that it does not and it shouldn't matter?

2. If I wanted to be super-cautious, could I use (e.g.) style.color instead? If so, what' the syntax for <hr>?
Thanks.

Just because an old HTML feature has (and will continue to have) legacy support, there is no good reason to use deprecated HTML-style attributes, since CSS can easily be used instead.

<hr style="margin:2em auto;border-top: 2px solid #000088;height:0;width:60%;">

Select allOpen in new window

Although, of course, it would be better to use a class instead of the style attribute.

Just because an old HTML feature has (and will continue to have) legacy support, there is no good reason to use deprecated HTML-style attributes

I must respectfully disagree.  It is wasteful of resources to drag in CSS processing where it is not required.

Thanks, guys. To follow-up:
@David S:
>>

<hr style="margin:2em auto;border-top: 2px solid #000088;height:0;width:60%;"> 

Select allOpen in new window

<<
What would I write to use style.color?

@Dr. Klahn
>>
It is wasteful of resources to drag in CSS processing where it is not required. 
<<
I'm using HTML in a web Knowledge Base article in a CMS. Please expand on "wasteful of resources". What would the reader of my article notice?

Thanks. I'm enjoying this lively discussion. :)

@Stephen I suggested using a border instead because it results in more consistent rendering on different browsers and platforms.

The direct conversion of the code you posted is this:

<hr style="width:40%;color:#8080ff;">

Select allOpen in new window

@Dr. Klahn How many milliseconds in faster rendering time, on average, are we talking for using a little CSS1 instead of a couple of HTML-style attributes? I'd argue that there are so many ways to improve load performance that should be done before resorting to using obsolete HTML attributes and elements, like `<center>` .

@David, when you say
"The direct conversion of the code I posted:", what code are you referring to? All I showed was

<hr>

Select allOpen in new window

Also, how would I code a border?
Thanks.

@Stephen Oh, sorry. I mean the first code Dr. Klahn posted.

Do you mean a border different than the first code I posted? If so, would you please be more specific?

>>Do you mean a border different than the first code I posted? If so, would you please be more specific? 
Nope. I'll try your code tomorrow. If it doesn't work, I'll ask for alternatives.

Thanks and have a good Sunday.

>><hr style="width:40%;color:#8080ff;"> 
I tried it and the line is quite faint and barely visible.

>>. <hr style="width:80%;color:red;">
Not much improvement if any. The line MAY have been longer (left-to-right), but the color did not change to red. If only I could apply some sort of boldfacing, I might be satisfied. Thanks.

OK, I can't afford to spend any more time on customizing <hr>. So I went with a partial line of tildes:

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Not ideal, but it's readily visible and serves its purpose.

Thanks.

@Steven

The code that David posted above would have done what you were looking for.  I guess he didn't explain it fully.  To change the thickness of the rule, simply adjust the border.  10px is pretty thick, so perhaps 4-6px would be more appropriate.  You can add the following style declaration anywhere you want on your page, but it is typically either in the HEAD element or as a reference to an external file:

<style>
hr.page-break {
  width:100%;
  border:10px solid red;
}
</style>

Select allOpen in new window

Now, you can use that specific HR anywhere you want as a page break without affecting any other HRs in your document.  Do that by using the following in your HTML:

<hr class="page-break">

Select allOpen in new window

That is what David was talking about when he mentioned using CSS classes.  If you wanted to do it without classes your HRs would look like the following:

<hr style="width:100%; border:10px solid red;">

Select allOpen in new window

You can find the full reference for HR tags here: HTML tr tag.

Thanks, Jim. I tried it, but in my CMS the line is a bit too faint for my liking. Don't have time to experiment anymore so I'm going with my line of tildes.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Any opinions on how to close question/choose my solution?

It's likely that your CMS has defined HRs to look a specific way.  That's why David mentioned using classes...it should prevent other CSS from overwriting your rules.  You should be able to select your own comment as the answer.  It's not really an answer, of course, but I personally won't raise any objections.

Follow-up:

I ended up asking Document360 Support how to darken the horizontal line. Lo and Behold, they gave me this CSS snippet. It seems to work. Please don't take this comment as an endorsement of this solution, it's more an FYI. Thanks again.

/* [5/2/22 SK] Make horizontal line more visible. */
hr {
        border: 20px;
        border-bottom: 1px solid #000000;
        margin: 15px 0;
    }

Select allOpen in new window