Packages: [HTML] (also affects PHP and other inheritors) contents of "id" attribute scoped differently than other tag attributes

Created on 22 Aug 2016  路  4Comments  路  Source: sublimehq/Packages

I don't normally code in HTML, so I just noticed this today while answering a question on Stack Overflow about Sublime. In the following code:

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div id="foobar" itslike="this" andlike="that" class="and like this and-uh"></div>
</body>
</html>

(:metal:)

Here's a screenshot using Neon:
meta toc-list html highlighting

The contents of each attribute are scoped as text.html.basic meta.tag.block.any.html meta.attribute-with-value.html string.quoted.double.html, with the class and id attributes changing the meta.attribute-with-value.html to meta.attribute-with-value.class.html and meta.attribute-with-value.id.html respectively. The class attribute also gets an additional meta.class-name.html tacked on to the end, and (here's where the problem is) id gets meta.toc-list.id.html. I'm not exactly sure what this is for, but some languages (like C Improved, and potentially PythonImproved as well) use it for task tags so they show up in the Goto Symbol menus. Was there a specific reason why id was chosen to have a meta.toc-list scope while class or any other possible attribute do not?

picture MattDMo

Most helpful comment

Just found some info on this.
http://programmers.stackexchange.com/questions/127178/two-html-elements-with-same-id-attribute-how-bad-is-it-really

picture jfcherng on 23 Aug 2016
👍3

All 4 comments

Maybe, because id is unique but not class. DOM elements can't/shouldn't have a same id attribute.

jfcherng picture jfcherng on 22 Aug 2016
👍2

@jfcherng so the following code is illegal?

<div id="foo" class="my-div">
    <span id="foo" class="my-div my-span">Stuff.</span>
</div>
MattDMo picture MattDMo on 22 Aug 2016

Just found some info on this.
http://programmers.stackexchange.com/questions/127178/two-html-elements-with-same-id-attribute-how-bad-is-it-really

jfcherng picture jfcherng on 23 Aug 2016
👍3

Great link, thanks. In particular, this part of the HTML5 spec was what I was looking for. TIL.

MattDMo picture MattDMo on 23 Aug 2016
Was this page helpful?
0 / 5 - 0 ratings

Related issues

caub picture caub  路  3Comments
jcberquist picture jcberquist  路  4Comments
darkred picture darkred  路  4Comments
mouse07410 picture mouse07410  路  3Comments
deathaxe picture deathaxe  路  3Comments