Auditing for Matching Tag Pairs

HTML-CSS
1

I spend a lot time scanning HTML code to ensure that I have coded both opening and closing elements for paired tags. It’s easy to do when tag elements are on the same line or within a line or two, but sometimes I write a <div class="selector"> that’s followed by many lines of nested divs or other tags before the </div> element. It’s difficult to find omissions or multiple closing elements when many lines separate opening and closing tags for nested statements.

Perhaps this is due to bad coding practices on my part, but I don’t understand why VS Code (or whatever editor) can’t keep up with the syntax and note whether paired tags are complete. If this is somehting that VS Code can do, I haven’t figured out how to do it yet.

I frequently see feedback when coding CSS if I’ve failed to close an element identifier with a colon or fail to put a semi-colon on the end of a statement. If it can track this syntax, why can’t it track HTML paired tags?

I’ve searched and have not found any article addressing this question.

2

Hi @ahraitch

Here is a suggestion.

Each time you create an element that is not void, create the opening and closing tags at the same time and place a line break between them. I notice you are indenting code really well. If you need to duplicate code, copy and paste the entire block of code.

With this habit you won’t how to worry about forgetting to add closing tags.

Happy coding

2 Likes
3

Hi there!
In VS Code there is an Auto Close Tag extention, which automatically adds HTML/XML closing tag, you can find it here

1 Like
4

You can test your html with an html validator, like this one: Ready to check - Nu Html Checker

it will tell you if you are missing some tags or if you have illegal nesting

1 Like
5

VS Code helps with this by auto generating the completion tag, but I sometimes walk over my code when cutting and pasting.