Remember those treehouses that we had as children and how the wood would wear, tear, and eventually collapse because we just would not stop jumping around inside it?  

Well that's kind of like HTML. This markup language is like the wood to your coding project. If it’s invalid, your solution will collapse.

Now don’t fret. In this article, I'll give you some tips to help you make sure that your HTML is error-free as you build your coding solution.

Dwight from the Office is getting ready to code
You heard Dwight. Let's do this! :) 

Common Causes of Invalid HTML Syntax

Before you go and start investigating for unclean code like Sherlock Holmes (the Benedict Cumberbatch version to be exact 😉), let’s briefly meet some examples of syntax that can ruin your HTML file:

  1. Improper nesting of HTML elements
Screenshot of a code snippet zooming in on the line <b></b>
"HUH?" indeed

2.  Deprecated HTML tags

Screenshot pointing to the <center> tag, a deprecated HTML element from the Google search's code.
Interesting choice 😏

3.   Missing tags

Oh closing tag, where are you?

Now that you've met the culprits, let’s figure out how to catch them before they mess up your HTML file and destroy your coding project.

Young Alfred from "Gotham" saying "Let's do this"
Sir yes sir! 

Improper Nesting of HTML Elements

To briefly review, nesting occurs when an HTML element is inside another HTML element.

<p>Coded by <a class="profile-link" href="<>" target="_blank"><em>Christine Belzie</em></a></p>

Now a nested element becomes evil – I mean improperly nested – when you place an HTML element inside the wrong area of the other element, like this:

<a class="profile-link" href="<>" target="_blank"><em>Christine Belzie<p>Coded by </p></em></a>

The code above would be considered invalid because the <p> tag is not related to the <a> tag and the <p> tag is not related to <em> tag. As a result, you get an unorganized paragraph.

To replace the improperly nested element, I highly recommend doing what I like to call the Sandwich Model. It entails stacking the head and closing tags of styling HTML elements within the primary tags, kind of like how you stack up all your toppings and fillings between two slices of your favorite bread.

<bread> <topping> </topping> <filling> </filling> </bread>

Now if you think improperly nested tags were evil, wait until you see the next villain.

Daughter from "Bob's Burgers" gives an evil laugh while flames erupt in the background
Muahaha! 😈

Deprecated HTML Tags

Simply put, deprecated HTML tags are basically when you use HTML elements that the tech industry has decided should no longer be used. Here's an example:

  <figcaption id="img-caption">Rihanna performs on stage in San Siro Stadium for Anti World Tour 2016. </figcaption>

In the code snippet above, I used the <center> tag, Now, will the code snippet above fulfill its task? Of course. See the output below:

But it’s considered invalid since it is no longer used, which can cause your project to not function in the best way possible.

It’s like wearing like wearing platform shoes from the 70s when everyone else is wearing Yeezy’s, Sketchers, or Converse.

Yellow platform shoes walking down the stairs
To quote Pauly D from "Jersey Shore", "What are those?!"

The best way to fix deprecated HTML tags is to refer to websites, blogs, and other sources to stay updated on the latest versions of the code. Let’s give the snippet I mentioned a makeover:

<figcaption id="img-caption">Rihanna performs on stage in San Siro Stadium for Anti World Tour 2016. </figcaption>
	  height: auto;
	justify-content: center;
	 font-family: 'Montserrat', sans-serif;

To center the <figcaption> element, I used the CSS Flexbox method: "justify-content" and viola:

See how pretty the snippet looks now? When your code looks good, your project operates well, too. To stay updated on HTML, MDN, in my opinion, is a great source because they always let the readers know when certain tags are out of date.

Now hold on, we’re not out of the woods yet, there’s still one more invalid syntax that we have to meet.

Ren from the "Ren and Stimpy Show" is sweating in fear
Don't be scared...yet! 😈 

Missing Closing Tags

You know how you use to scoff and roll your eyes whenever your writing instructor took points from your essay for having a few misspelled words or a missing period? Well, they were on to something – because the same idea applies to your HTML file.

A common issue you might run into is missing closing tags. Let's see what that looks like.

<div class="user-info">
<h3 id="user-name">Victor Crest<span class="age">26</span></h3>

Closing <div> tag is missing

If one of your code lines is like the code snippet above, your HTML file will break, causing your project to not look so great like in the output below:

Think of it like a missing tire in your car (or whatever vehicle you use to transport yourself). Without it, you would be driving like this:

Kramer from "Seinfeld" is driving an uncontrollable truck.
Hang in there buddy! 

To fix this error, I highly recommend using the sandwich method that I mentioned before.

<div class="user-info">
<h3 id="user-name">Victor Crest<span class="age">26</span></h3>
Closing <div> tag has been added

As you can see in the code above, we've added our closing <div> tag, causing the snippet to now look like this:

See how improved the code looks now? Remember, think of a line of code like a sandwich. When one slice of bread (or in this case, a closing tag) is missing, your masterpiece falls apart, leaving you angry, sad, and sometimes hungry.

A pudgy rubs its stomach in sadness while saying "I'M SO HUNGRY"
So sorry penguin! 

Wrapping Up

There you have it! Three common types of invalid syntax to look out for in your HTML file.

Remember, this file is the foundation of your coding projects, so Happy HTML file = Happy project! 😊

Glad to know that we agree with each other. 


  • Ben Mckenzie Fox GIF by Gotham
  • Can't Touch This High Heels GIF by BrownSugarApp
  • Closing Tag image from "How to Easily Find Missing Closing Tags in HTML (with Coda 2)" article on Clicks Nathan
  • Dwight Office Tv GIF by The Office
  • Driving Michael Richards GIF by Seinfield GIFs
  • Fox Tv Fire GIF by Bob's Burgers
  • Oh Yeah Yes GIF by Mauro Gatti
  • Ren And Stimpy Reaction GIF by Giphy
  • Sad Nft GIF by Pudgy Penguins
  • Screenshot of Google from the  "Why does Google use the deprecated HTML tag still?"discussion forum on Reddit
  • Screenshot of improper nested tag from "How is the DOM Affected by Improperly Nested HTML Elements?" article by Louis Lazrus on Impressive Webs