HTML syntax highlighter error: closing tags are not allowed to have attributes

[barabo]

Issue Type: Bug

I had a copy/paste error in my source HTML that led to a very subtle bug in my rendered HTML.

Consider this input:

<div id="client-secret">
    <label>Client Secret</label>
    <textarea class="form-control" ></textarea>
    <br/>
</div>
</div id="jwks-uri">
    <label>JWKS URI</label>
    <input type="text" class="form-control" placeholder="JWKS URI" name="jwks-uri" autocomplete="on">
    <br/>
</div>
</div id="jwks-inline">
    <label>JWKS Inline</label>
    <textarea class="form-control" ></textarea>
</div>

The final two of three DIV element tags are actually end tags when they were intended to be start tags. The browser handled this by eliding the end tags entirely.

The DOM effectively had this instead:

<div id="client-secret">
    <label>Client Secret</label>
    <textarea class="form-control" ></textarea>
    <br/>
</div>
    <label>JWKS URI</label>
    <input type="text" class="form-control" placeholder="JWKS URI" name="jwks-uri" autocomplete="on">
    <br/>
    <label>JWKS Inline</label>
    <textarea class="form-control" ></textarea>

Now consider how the syntax is highlighted in VSCode:

I noticed this later when I used jquery to select the elements with affected ids - there were no div elements at all with the ids I expected, but the label and input elements were present. So, the page looked correct, but I couldn't select the entered values using jquery because the needed div with the ID wasn't there.

So, please improve the HTML syntax highlighter to visually "complain" about end tags that have attributes. This is not valid HTML and should never be allowed.

VS Code version: Code 1.58.2 (c3f1263, 2021-07-14T22:09:06.581Z)
OS version: Darwin x64 18.7.0
Restricted Mode: No

System Info

Item	Value
CPUs	Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz (12 x 2600)
GPU Status	2d_canvas: enabled gpu_compositing: enabled metal: disabled_off multiple_raster_threads: enabled_on oop_rasterization: enabled opengl: enabled_on rasterization: enabled skia_renderer: disabled_off_ok video_decode: enabled webgl: enabled webgl2: enabled
Load (avg)	2, 2, 2
Memory (System)	16.00GB (0.24GB free)
Process Argv	-psn_0_1974754 --crash-reporter-id 86255e6b-f988-4ed3-8855-ed19802653be
Screen Reader	no
VM	0%

Extensions (19)

Extension	Author (truncated)	Version
markdown-mermaid	bie	1.10.0
vscode-markdownlint	Dav	0.43.2
vscode-eslint	dba	2.1.23
githistory	don	0.6.18
copilot	Git	1.3.2277
beautify	Hoo	1.5.0
vscode-language-fsh	kma	1.5.0
vscode-docker	ms-	1.15.0
vscode-kubernetes-tools	ms-	1.3.3
python	ms-	2021.8.1102490946
vscode-pylance	ms-	2021.8.0
jupyter	ms-	2021.8.1054968649
remote-containers	ms-	0.187.1
cpptools	ms-	1.5.1
vsliveshare	ms-	1.0.4650
vscode-commons	red	0.0.6
vscode-yaml	red	0.22.0
vscode-arduino	vsc	0.4.3
gitblame	wad	8.1.0

A/B Experiments

vsliv368:30146709
vsreu685:30147344
python383cf:30185419
pythonvspyt678:30270856
pythonvspyt602:30300191
vspor879:30202332
vspor708:30202333
vspor363:30204092
pythonvspyt639:30300192
pythontb:30283811
pythonvspyt551:30311712
vspre833:30321513
pythonptprofiler:30281270
vsdfh931cf:30280410
vshan820:30294714
vstes263cf:30335440
pythondataviewer:30285071
vscus158:30321503
pythonvsuse255:30340121
vscod805:30301674
pythonvspyt200:30340761
vscextlangct:30333562
binariesv615:30325510
bridge0708:30335490

[alexr00]

Thanks for filing this issue! We get our html syntax highlighting grammar from https://github.com/textmate/html.tmbundle. I've moved the issue to that repository: textmate/html.tmbundle#115