Debugging: Finding missing closing tags

The other day I was humming along, writing HTML, but when I went to look at the result it was obvious that I’d missed a closing tag somewhere. That’s not too uncommon, and fortunately there’s a number of ways of dealing with it. My first resort if I’m working with tables or div tags is usually to make visible borders, but if that doesn’t help me pin down the problem then the next thing I try is using a spreadsheet.

Debugging_HTML_divtags If you look at this excerpt, you’ll see two different methods I used to pin-point the error.

On the right side of the column with the code (column E), I added three columns. The first one counted the number of opening tags up to that point, the second one counted the number of closing tags, and the third one (the one I highlighted in yellow) subtracted the 2nd from the 1st to find the current number of un-closed tags. I was repeating the same pattern of tags over and over, so the numbers in the third column should also have a pattern that repeated over and over. If represented by parenthesis, the pattern would be ([{}{}]…[{}{}]), so numbers should have started with 1 at the first (, and then repeated a 2,3,2,3,2,1 pattern until the closing ) appeared and it dropped to 0.

Scanning down the list all of the numbers were 3 or less until row 139, where I suddenly had a 4. Clearly the problem was on this row, or somewhere above. Scanning through with my eye I didn’t spot it, so I added the columns to the left of the code. Each of the 4 types of opening tags had a unique thing about it, so each column looked for 1 of those things and says “y” if it found it, stopped saying “y” when it encountered a close tag that wasn’t closing a deeper tag, and otherwise said the same thing as the row above it. Looking again at the excerpt, you may notice that one of the gaps between the y in the 4th column and the y in the 3rd column is shorter than all the others. Instead of 3 rows, it’s only two. And, once I was looking closely at that spot I saw that what was missing was a closing tag for the 2nd column. In other words, instead of [{}{}][{}{}], I had [{}{}[{}{}]. Problem located, and easily remedied.

Is this the only way to do this? Of course not. While typing this up it occurred to me that it would have been much easier to just copy the correct numerical pattern down the length another column right next to the yellow one, and look to see where those two columns diverged. But I didn’t think of it at the time, so it’s not the method I used.

Next week I’ll be back to discuss the formulas I used in this, including a new function: isnumber().