Search code examples
htmlvalidation

Duplicated id's inside and outside noscript


Wondering if an id within a noscript element should collide with the same id outside the noscript element.

Consider this:

<noscript>
  <div id="foo">...</div>
</noscript>

<div id="foo">...</div> // added with javascript

I can't find a good source that says what the content inside the noscript element really is. An unofficial source says its plain text / string (while scripts are allowed / active). When inspecting the markup in firefox devtools, the code inside the noscript element looks like raw text / string. So I'm thinking it might be just plain text, but some tools / validators throws an error for duplicate id's.

Tools that consider it to be an error:

  • Siteimprove
  • W3C markup validation

Tools that doesn't consider it an error:

  • Accessibility Insights for web
  • Axe
  • Wave
  • ARC

I will probably change one of the the id's to be safe. But I'm interested to know what is correct. Since we get different results in some commonly used tools.

Edit: The outer div#foo is added by script, so if scripts are disabled, the outer div won't be there. So the question about this "collision" only applies to this state, when the noscript content isn't rendered.


Solution

  • The HTML Standard specifies that the <noscript> elements are transparent in terms of their content model, when scripting is disabled.

    […] The content model of a transparent element is derived from the content model of its parent element: the elements required in the part of the content model that is "transparent" are the same elements as required in the part of the content model of the parent of the transparent element in which the transparent element finds itself.

    So it still provides part of the DOM, it is not Text content—except for if it is used inside e.g. <textarea>, which has such content model.

    When scripts are disabled, the rules for id generally apply for its contents as well.

    When scripts are disabled, the structured content of the <noscript> elements will be integrated into the DOM, and any duplicate ids will collide.

    The noscript element represents nothing if scripting is enabled, and represents its children if scripting is disabled.

    When scripts are enabled, it’s not text content either, the HTML standard defines it as nothing.

    If the element with the ID is generated by a script, you cannot have a collision with nothing, and you can probably ignore the error.

    It’s correct if validators are reporting this as an error, as they only receive the generated HTML and cannot determine that a script generated that element.