Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://stackoverflow.com/questions/26341507/can-an-html-element-have-the-same-attribute-twice below:

Can an HTML element have the same attribute twice?

I'm considering writing code which produces an HTML tag that could have duplicate attributes, like this:

<div data-foo="bar" class="some-class" data-foo="baz">

Is this legal HTML? Does one of the data-foo-values take precendence over the other? Can I count on semi-modern browsers (IE >= 9) to parse it without choking?

Or am I about to do something really stupid here?

asked Oct 13, 2014 at 13:44

12.6k1010 gold badges3939 silver badges6666 bronze badges

It is not valid to have the same attribute name twice in an element. The authoritative references for this are somewhat complicated, as old HTML versions were nominally based on SGML and the restriction is implied by a normative reference to the SGML standard. In HTML5 PR, section 8.1.2.3 Attributes explicitly says: “There must never be two or more attributes on the same start tag whose names are an ASCII case-insensitive match for each other.”

What happens in practice is that the latter attribute is ignored. Well, future browsers might do otherwise. In the DOM, attributes appear as properties of the element node as well as in the attributes object, so there would be no natural way to store two values.

answered Oct 13, 2014 at 14:01

203k3838 gold badges281281 silver badges407407 bronze badges

It's not technically valid, but every browser will ignore duplicate attributes in HTML documents and use the first value (data-foo="bar" in your case).

Using the same attribute name twice in a tag is considered an internal parse error. It would cause your document to fail validation, if that's something you're worried about. However, it's important to understand that HTML 5 defines an expected result even for cases where you have a "parse error". The parser is allowed to stop when it encounters an error, but if it chooses not to stop it must produce a specific result described in the specification. In practice, no browsers choose to stop when encountering errors in HTML documents (XML/XHTML is a different matter), so all modern browsers will handle this case successfully and consistently.

The WHATWG HTML specification describes this case in section 12.2.4.33 "Attribute name state":

When the user agent leaves the attribute name state (and before emitting the tag token, if appropriate), the complete attribute's name must be compared to the other attributes on the same token; if there is already an attribute on the token with the exact same name, then this is a parse error and the new attribute must be dropped, along with the value that gets associated with it (if any).

See also its description of "parse error" from the opening of section 12.2 "Parsing HTML documents":

Certain points in the parsing algorithm are said to be parse errors. The error handling for parse errors is well-defined (that's the processing rules described throughout this specification), but user agents, while parsing an HTML document, may abort the parser at the first parse error that they encounter for which they do not wish to apply the rules described in this specification.

answered May 9, 2017 at 1:08

I wanted to add a comment to the excellent accepted answer, but my reputation is not high enough.

I wanted to add it is important to consider how your code gets compiled. For example, Angular removes prior duplicate (non-angular) class attributes and only keeps the last one.
Note: Angular also modifies the value of the class attribute with ngClass and any [class.class-name] attributes.

This is also something you can use linter for.
See htmlhint (attr-no-duplication) or htmllint (attr-no-dup).

answered Dec 17, 2021 at 17:08

13522 silver badges66 bronze badges

No, your example is incorrect because the rel attribute cannot be repeated within a single HTML element. Instead, you should combine multiple rel values in a single attribute, separating them with a space.

Here's the correct syntax:

<a href="#" rel="dns-prefetch preconnect">a</a>

This combines both dns-prefetch and preconnect in a single rel attribute. HTML parsers understand this syntax and apply both relationships to the anchor tag.

Start asking to get answers

Find the answer to your question by asking.

Explore related questions

See similar questions with these tags.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4