Something that I remember doing when I first started my development career has cropped up again recently! Chasing down tags in malformed HTML and the reason isn’t just AI.

Teaching moments

• Nice little walk down memory lane with old school problems we appeared to have solved with tooling, IDE extensions like brackets and rainbow syntax highlighting
• How to solve issues with closing tags, some tips and tricks I learnt a long time ago. Warning: it’s still not a fun job.

So the year is 2012, right?

The year is 2012 and a young know-it-all (spoiler: he doesn’t) straight out of Uni gets his first development job. Being junior and not knowing as much as I think I do, I am put on very basic tasks and do a hell of a lot of work on email newsletters. Now anyone who has ever worked on newsletters will tell you they are painful and stuck in the year 1999, full of table tags and attributes today’s React developers would never have heard of.

With all of the >tr<s and <td>s comes a hell of a lot of HTML and me being fresh faced and unknowing, plus I think Atom hadn’t come out yet and I hadn’t quite taken to Sublime Text, the HTML very easily became broken. Extra tags in places, missing tags in others or just straight up structurally wrong HTML (think link tags wrapping table row tags). Again I would like to reiterate I didn’t know as much as I thought I did.

I quickly got better and read everything I could about web development. And with this came learning of other IDEs and then plugins and autocompletes. Autocompletes I think are what finally hit the nail on the head of missing tags for me. No longer did I have to remember to always be closing! Jerry Maguire style. But it was magically just done for me. Then lastly came Emmett, which I still use to this day. Emmett is an incredible tool with a simple, yet complex, syntax which allows you to create lots of complex HTML very quickly.

Writing just:

.class-name>.container*2>p{item $}+a[href="https://google.com"]{link $}

And then hitting Tab will auto complete to:

<div class="class-name">
    <div class="container">
        <p>item 1</p>
        <a href="https://google.com">link 1</a>
    </div>
    <div class="container">
        <p>item 2</p>
        <a href="https://google.com">link 2</a>
    </div>
</div>

So you can quickly see that complex HTML structures can be generated easily.

So why is this issue happening again when it seemed to disappear.

So as the little preamble goes through if this disappeared around 2012 for a junior developer why is this popping up again? Why as a now senior developer, with over 10 years working at multiple agencies, have I today (at the time of writing) been chasing missing HTML tags and malformed HTML.

Well I think first and foremost of course the blame falls on AI. It’s a tool at the end of the day, a chisel or a hammer. And like any tool it can do as much damage as it can fix and create.

The problem it seems AI has is context and its own ability to run tooling, grep-style commands that edit your code. With this I am seeing an increased amount of broken and malformed code making it into repos or even production environments. The problem it has in a kind of real life context is making edits in large files or large contexts in an array of files, when deleting, changing and adding it struggles to know what lines it should keep and what it should remove. Resulting in some wild layouts and HTML.

How to solve and some old school tips and tricks.

So firstly, of course take a breath it can be extremely frustrating.

The hard way which I used to do pre plugins is manually tabbing the code. Then following where the missing code blocks are through perseverance. This works obviously not the most ideal and can take some time.

Next I would like to suggest this, not nicely styled but extremely useful website that got me out of a few tricky spots: Find Unclosed Tags - Unclosed Tag Checker - HTML5 - by Alicia Ramirez it hugely helps if you can just paste in the rendered HTML file, but it does help by pointing out the missing tag and leading you to the correct place.

Next use the plugins, make sure your IDE has auto complete tags. Make sure it has indent rainbow these are so useful, also make sure it has a formatter whether that is Prettier or another one this is a very quick, easy way to format the document in a useful way to identify the missing tag.

Another point I would make is on frameworks. Almost all frameworks, frontend and backend, have ways of making components small reusable parts of any site. Use these as much as possible to reduce the file sizes and keep files readable to the human eye even at a glance

Notes on preventative measures

Most IDEs (I am using VSCode currently, but am on the way out to Neovim) have a format-on-save function in conjunction with Prettier or other formatters, these will close and fix most missing divs if not too complex.

Also think about making small manageable tasks for AI on separate and testable branches. With the recent uptake in agents, this is easier than ever you have the choice between cloud and background with Copilot, this allows you to isolate and test AI contributions and quite often catch glaring mistakes. Especially before it’s made 400+ file changes and it becomes unmanageable to check all.

Setting CI linting for HTML. I admit this is one I often forget as HTML often gets forgotten. I almost never write plain HTML and am often wrapped in the PHP or the JS that generates the HTML, but linting for this can help catch and identify issues.

Conclusion

To take away from this is: God, didn’t we have it hard in the past! And I am only talking 14 years ago! But now it’s an annoyance and it seems to be back again. And I would like to use this point to just hammer home that AI is a tool, a fantastic, super useful, and friendly tool. But it needs human eyes on before any code goes to production or even ends up in repositories. Or alternatively, or in unison, using building steps, linting and testing to pick these issues up earlier.