Can an HTML Element Have Multiple Ids

Can an HTML element have multiple ids?

No. From the XHTML 1.0 Spec

In XML, fragment identifiers are of
type ID, and there can only be a
single attribute of type ID per
element. Therefore, in XHTML 1.0 the
id attribute is defined to be of type
ID. In order to ensure that XHTML 1.0
documents are well-structured XML
documents, XHTML 1.0 documents MUST
use the id attribute when defining
fragment identifiers on the elements
listed above. See the HTML
Compatibility Guidelines for
information on ensuring such anchors
are backward compatible when serving
XHTML documents as media type
text/html.

Can a HTML element have multiple unique ID attributes?

Needed to know if an HTML element can have multiple attributes of ID's

Short answer? No because the browser will only render the first one.

See this Fiddle, I can only target it in CSS using the first id that appears in the DOM. Try changing that CSS selector to use the second id, it won't work.

That's because it seems like the second ID is being disregarded by the browser, as this is the output HTML:

<input type="text" id="identifier1">

If you really need additional identifiers on an element, you should think about using either multiple class names or data attributes to correspond to additional data.

Can multiple different HTML elements have the same ID if they're different elements?

No.

Element IDs should be unique within the entire document.

Is it possible to have multiple ids?

No It's not possible according to XHTML 1.0 Spec

HTML 4 defined the name attribute for the elements a, applet, form,
frame, iframe, img, and map. HTML 4 also introduced the id attribute.
Both of these attributes are designed to be used as fragment
identifiers.

In XML, fragment identifiers are of type ID, and there can only be a
single attribute of type ID per element. Therefore, in XHTML 1.0 the
id attribute is defined to be of type ID. In order to ensure that
XHTML 1.0 documents are well-structured XML documents, XHTML 1.0
documents MUST use the id attribute when defining fragment identifiers
on the elements listed above. See the HTML Compatibility Guidelines
for information on ensuring such anchors are backward compatible when
serving XHTML documents as media type text/html.

Note that in XHTML 1.0, the name attribute of these elements is
formally deprecated, and will be removed in a subsequent version of
XHTML.

But according to W3 It's a YES

W3 selectors

If an element has multiple ID attributes, all of them must be treated
as IDs for that element for the purposes of the ID selector. Such a
situation could be reached using mixtures of xml:id, DOM3 Core, XML
DTDs, and namespace-specific knowledge.

Common usage

ID's are single use and are only applied to one element. They are used
to identify a single element. Classes can be used more than once. They
can therefore be applied to more than one element, and more than once
per element

What error will i get if i use the same ID for multiple HTML elements?

It would be invalid HTML.

In some environments, it may produce a console warning that multiple IDs in a single document is invalid. Harmless, but annoying.

It will prevent document.getElementById from working properly for those elements, because getElementById selects by ID, but there should only be one element with a given ID in the document. Similarly, it may prevent querySelector and querySelectorAll with ID selectors from working properly.

Using the same ID multiple times may well not break your application in most cases, but just because it might be doable in some circumstances doesn't mean it's a good idea. There's no reason to do it, so don't.

GetElementByID - Multiple IDs

document.getElementById() only supports one name at a time and only returns a single node not an array of nodes. You have several different options:

1. You could implement your own function that takes multiple ids and returns multiple elements.
2. You could use document.querySelectorAll() that allows you to specify multiple ids in a CSS selector string .
3. You could put a common class names on all those nodes and use document.getElementsByClassName() with a single class name.

Examples of each option:

doStuff(document.querySelectorAll("#myCircle1, #myCircle2, #myCircle3, #myCircle4"));

or:

// put a common class on each object
doStuff(document.getElementsByClassName("circles"));

or:

function getElementsById(ids) {
    var idList = ids.split(" ");
    var results = [], item;
    for (var i = 0; i < idList.length; i++) {
        item = document.getElementById(idList[i]);
        if (item) {
            results.push(item);
        }
    }
    return(results);
}

doStuff(getElementsById("myCircle1 myCircle2 myCircle3 myCircle4"));

Matching when element has multiple ids

There is no such thing as "multiple ids".

https://developer.mozilla.org/en/XUL/Attribute/id

According to the standard, any string data within the id property is regarded as a part of the value.

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

reference: http://www.w3.org/TR/REC-html40/types.html#type-name

There's another way, though! You can have all sorts of class names, and you can use jQuery to grab an element by class name.

HTML

<div class="hideMe Select1">
<p>Some Content</p>
</div>

<div class="hideMe Select2 Select3 Select4 Select5">
<p>Some Content</p>
</div>

Javascript

$('.Select2')[0]

The [0] part of that is because when you get elements by class name, there can be several. The jQuery selector returns an array, so you're just grabbing the first one.

Get multiple elements by Id

If you can change the markup, you might want to use class instead.

HTML

<a class="test" name="Name 1"></a>
<a class="test" name="Name 2"></a>
<a class="test" name="Name 3"></a>

JS

var elements = document.getElementsByClassName("test");
var names = '';
for(var i = 0; i < elements.length; i++) {
    names += elements[i].name;
}
document.write(names);

jsfiddle demo

Why do these Youtube elements (suggestion-list-items) have same id

The HTML validator: https://validator.w3.org/ shows that
YouTube and, in fact, many Google websites as not HTML compliant.

Note: I tested a copy of the HTML because using the URL will crop some HTML that is rendered after the page is loaded.

I analyzing the required page and it showed more than 1000 html errors. See error #1001 below:

Regarding your question. The said ID is duplicate and this is not allowed in HTML. The ID was used for CSS styling (which is a bad practice to format multiple elements using the id. The good practice is to use the class. See:

Conclusion
Google websites are bad examples for learners of professional programming. In fact, I once wrote an article on LinkedIn how Google asks websites to comply to some SEO rules, however, non of Google's websites follow their own rules of SEO. See my article on Linkedin for more details.

---

Related Topics