How to Easily Find Missing Closing Tags in HTML (with Coda 2)
Scouring through code trying to find that darn missing closing tag that’s throwing your entire system off can be a massive pain.
There are a variety of ways to figure this out, the easiest probably being Chrome or Safari’s Inspector, but I recently discovered another way to do this right in your code editor. Assuming, that is, you’re using Coda 2 by Panic.
Firstly, open an HTML file in Coda 2. See those varying blue boxes to the left of the editor panel? They represent chunks of code. Darker areas are single lines of code or deeper nested bits, while lighter areas are containing elements, such as
Clicking on a darker element will cause it to shrink up. In my screenshot below, everything in my
fieldset element gets replaced with a little ellipsis icon.
If I didn’t have a properly closed
</ fieldset> tag, it would become immediately obvious, as in the example below.
Of course, when working with included files on a single page, such as with the various templates that make up a WordPress theme, this wouldn’t work, because closing tags might not be in the same part of the theme as their opening companions. However, on a live site, you could view source, copy the source code, and paste it into a new Coda 2 window to find the culprit using the method above.