Wrong colors in <hr>

Question

Today I discovered this by accident:

<hr width=100% color=red />

creates a red horizontal rule, but

<hr width=100% color=red/>

creates a green horizontal rule.

This isn't just with the color red, if there is a / directly behind the color name, another color will be drawn. This doesn't work for color codes like #000000 (to #000000/).

Just of curiosity, here is my question: How does the color get chosen? Is this a bug or intended?

---

Additional info:

Browser: Google Chrome 29.0.1547.66 m

Installed plugins / add ons: Ad Block Plus

I tested this with IE 10 and it has the same problem as Chrome.

Answer 1

This is, somewhat surprisingly, intentional error handling, described in clause 2.4.6 Colors of HTML5 CR. It is presumably meant to maintain compatibility with legacy content that has weirdly broken color designators that have been traditionally processed in a certain manner by browsers.

When the mixed-syntax (partly HTML, partly XHTML) markup <hr width=100% color=red/> is used, in a document served as text/html (when served with an XHTML content type, it would simply cause nothing but an error message to be shown), the color attribute will be parsed as red/ (with the slash as part of the value). Since this does not match any color name, rules for parsing a legacy color value will be applied.

This means that any character that is not a hexadecimal digit is replaced by the digit 0, and if the resulting value is not six characters long, trailing zeroes will be added. Finally, the value is prefixed with #, so it will be interpreted as a hexadecimal color designator. Thus, red/ yields #0ed000, which is the light green color that you see.

Similarly, <hr width=100% color=blue/> would cause the color #b00e00 to be used.

The problem can of course be avoided by using either HTML syntax (which has no / before >) or XHTML syntax (which has quotation marks around each attribute value).

Answer 2

The semantic analizer of your browser detect the <hr> tag and later try to determinate the atributes for that label.

Using white spaces as token separator, your first line have 3 attributes (noted that the correct slash for finish a tag in html is / ). In this case, the second token color=red as interpreted as a attribute (color) and value (red). In your second line there are only 2 attributes. The second attribute (color) has the value red\ that is not a valid identifier in the asociative array for colors.

Why your browser return blue?

Each browser manage the exceptions that diferents ways, its problably that your browser return the first value in the asociative array colors.

I should recommend to you that use quotes as delimiter for attributes values.

Answer 3

• I just tried it,and it works.
• First I copy your code and execute, it was unexpected. Still I try same code, and I just put " " (double quotes) around the color name, and tried color codes too.
• and I found, it is working properly with Crome,IE and Mozilla.

Answer 4

using the color attribute might be the problem. Try border-color.

<hr width="100%" style="border-color:#f00">