I have a div tag that is not closed. I have examined each line of code in the area of my HTML, recording the line number of each opening div, the class selector name, and the line number of the closing tags. Going down line by line, as I find a div I record the information and as I find a closing /div tag I put its line number beside the class selector name it goes with.
I matched every single div tag whether an opening tag or a closing tag. I didn’t see any typos, such as missing “<” or “>”. I ran the code through an online code validator. It told me the line number of the opening tag that is not closed, but I still cannot find the problem. I think I’ve lost the fresh eyes (and young brain) that would allow me to see it.
I could post the code here and ask for help, but I’d rather know what tools, tips, tricks and techniques you’ve found useful for finding unmatched tags.
I looked for extensions and toyed with a couple but with no good effect.
What do you do?
It’s not a perfect solution, but I indent my html with a tab for each opening tag, as I would with a programming language.
<div id="main">
<navigation>
<ul>
<li>Home</li>
<li>About</li>
</navigation>
<h1>Welcome</h1>
</div>
It makes it easier to look vertically and match or notice missing tags. Forgive me if you already do this; I’m not looking at your code at the moment.
1 Like
Thanks, tracknut.
I do the same. I even wished for an extension that would color the vertical lines to make it easier for my old eyes to track them downward. I looked for an extension but didn’t find one that jumped out at me as being a solution.
Another thing I did that I forgot to mention in my OP is that I went through the HTML code collapsing each div tag to hide everything between the opening and closing tags. I then compared the line numbers of the opening and closing tags to the note I had created by scanning down the lines one by one and recording the line numbers and class selector names. I still couldn’t find the problem.
Another point I should have noted is that the opening div that the HTML validator identified could not be collapsed.
I solved the problem easily enough by simply throwing in a /div, but I can’t figure out why it worked, ie, what I missed in my debug attemp.
Sometimes errors can be quite devious. A stray opening quote, that consumes everything after it including a closing div or anything else until matched with a random second quote. Or a curly-quote that isn’t interpreted the same as a regular quote. I’ve had non-ascii characters in a file that completely screwed things up and were very hard to find.
Most of my debugging of such things comes with some 40 years of doing it and just noticing things that look off. One thing you might try is commenting out large sections of your code that you think are good, then running it back through the validator to check the remaining code. It’s a way to divide and conquer.
1 Like
Certain code tools will do the indenting for you.
I know youre partial to VSCode, so a quick google tells me that Shift-Alt-F would do this.
As far as following the lines down… i wouldnt focus too much on following them down as much as it is counting the number of lines.
1 Like