duplicate nav-item id's
Closed this issue · 7 comments
The HTML of the menu looks like this:
<div id="menu">
<div id="nav-left">
<div id="nav-item">..</div>
<div id="nav-item">..</div>
<div id="nav-item">..</div>
</div>
</div>
HTML id's are supposed to be unique, wouldn't the nav-item's be better as classes rather than ids?
Repeated IDs are allowed too. I don't see anything not working (or incorrectly working) with these assignments.
In HTML 4, id's must be unique:
https://www.w3.org/TR/html401/struct/global.html#h-7.5.2
id = name [CS]
This attribute assigns a name to an element. This name must be unique in a document.class = cdata-list [CS]
This attribute assigns a class name or set of class names to an element. Any number of elements may be assigned the same class name or names. Multiple class names must be separated by white space characters.
In HTML 5, id's must be unique:
https://www.w3.org/TR/2014/REC-html5-20141028/dom.html#the-id-attribute
The id attribute specifies its element's unique identifier (ID). [DOM]
The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character. The value must not contain any space characters.
In HTML 5.2, id's must be unique:
https://www.w3.org/TR/html52/dom.html#element-attrdef-global-id
When specified on HTML elements, the id attribute value must be unique amongst all the IDs in the element’s tree and must contain at least one character. The value must not contain any space characters.
The id attribute specifies its element’s unique identifier (ID).
Additionally, if you use Google Lighthouse to test the site (in Chrome, go to DevTools, then the Audits tab) it warns that the "nav-item" ids are not unique and sends you to this page for more info:
https://dequeuniversity.com/rules/axe/2.2/duplicate-id?application=lighthouse
Rule Description
The value assigned to the. id="" attribute must be unique to prevent the second instance from being overlooked by assistive technology. Put another way, id attributes may not be used more than once in the same document in order to differentiate each element from another.The Algorithm, in Simple Terms
Ensures that each element on the page with an id attribute has a unique id attribute value.Why this is Important
The id attribute uniquely identifies elements on a page. It does not make sense to duplicate an id.How to Fix the Problem
Rename attributes that reuse an id.
So... just because it seems to work, doesn't mean it is guaranteed to work. When code violates the specs it is basically up to the browsers to decide what to do and different browsers could make different decisions on how to handle it.
Note: on certain pages there are multiple divs with id="title" too
Thanks for the explanation. I agree it is better to use unique id's as intended in the specifications.
These are legacy styles, and I am hesitant to change it, because it will break several plugins, still pondering...
Duplicate: #546
Closing this, was handled in early betas of 6.12.0