Using Same Id for Multiple HTML Tags

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

No.

Element IDs should be unique within the entire document.

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.

Can multiple HTML tags have the same ID if they are on different files?

Simple answer: Yes.

The id must be unique inside one file but not across different files (as long as not one file includes the other).

Can you use the same id once for multiple html page?

An id should only be used once on a single document. It is used for elements that only should appear once on the page anyway (think of a "top navigation bar"). Classes are used for elements that can appear more than once (think of a "particularly styled table", a "repeatable block of information" or things that share particular charasteristics such as "on this browser width this block spans 6 columns" in for example bootstrap). It is perfectly normal to use the same id on different pages. Usually you'll make a skeleton/template for your layout, where each element will be styled the same on each page that uses this template. It is then helpful to have the same id for the same element across different pages. (or: It would be considered sloppy to change the layout of the page on every page, using different id's for each element, as it would be hard or impossible to maintain your pages.)

Dealing with Two Elements with same ID in JavaScript

I know that IDs should be unique, however, I have to deal with a page
that has two elements with the exact same ID

As you've stated it should be unique hence if you have more than one id attribute with the same name then that's not valid HTML.

How can I access the second element with the exact same ID as the
first in JavaScript?

wouldn't it be easier to use getElementsByClassName since having two id attributes with the same name is invalid HTML?.

with that in mind, you can use getElementsByClassName.That may be more suited to your requirements.

Example:

var x = document.getElementsByClassName("Design_01"); // x is an array
var firstElement = x[0]; // get first element
var secondElement = x[1]; // get second element

Relevant Readings:

• HTML DOM getElementsByClassName() Method
• JavaScript Arrays

Can two html elements have the same id but in different classes?

Possible? Yes.
Good coding? No.

From w3.org:

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 (".").

---

Related Topics