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 divs or ul elements.

a screenshot of the code editing interface for Coda
Note the various shades of blue that correspond to lines of code, and blocks of nested code.

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.

Screenshot of collapsed code in Coda 2
After clicking in the blue bars on the left, you can collapse your code. Collapsed code is represented by a blue box with an ellipsis inside.

If I didn’t have a properly closed </ fieldset> tag, it would become immediately obvious, as in the example below.

Screenshot of collapsed code in Coda, where there is no end tag for a fieldset element.
Any HTML tags which aren’t closed will become apparent after you collapse the code.

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.

Up Next: Modern Tribe Events Calendar Conditional Tag for Detecting all Calendar Pages