Why would someone use same id for multiple divs in a single page

Question

I noticed on youtube that replies to each comment are inside a <div id="replies">. So the same id is used for every comment reply group.

When is it a good practice to give same ids to multiple similar elements?

I know ids should be unique, that's why I'm wondering about this.

To check it, go to a youtube video, inspect and select the reply area of a comment. Optionally, Ctrl+F in inspect and search replies.

Answer 1

YouTube uses web components which might be the reason there are multiple of the same IDs. Web components are encapsulated chunks of HTML, javascript, and CSS that you can drop into your pages. You can read more about them here: https://www.polymer-project.org/

So my thinking of why YouTube specifically has multiple of the same ID is that the replies component itself has an ID of replies and is being targeted on a component level rather than a global.

I hope this makes sense? Even if it doesn't, try to avoid ID's that aren't unique like the others mentioned.

Answer 2

One of the reason YouTube can have duplicate IDs, completely invalid looking html and still get away with it, it's because they are generating dynamic content. Remember, even though it is incorrect, the browser will render it just fine. They are not using the ID to mark a unique element, but more as metadata.

Note that Youtube uses custom html tags that I assume helps them reuse code for not just the website, but also for their app.

Read more about custom elements

Update: Just wanted to show an example on how generating content through an application can help you get away with things that could otherwise be a problem.

Writing Inline css is not recommended mainly because it becomes impossible to maintain the larger the css becomes. However, you can code it in an external file during development, then compile it to be inline using an application and have none of the headaches.

See example