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.
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:
- Improper nesting of HTML elements
2. Deprecated HTML tags
3. Missing tags
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.
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="<https://github.com/CBID2>" 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="<https://github.com/CBID2>" 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.
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:
<center>
<figcaption id="img-caption">Rihanna performs on stage in San Siro Stadium for Anti World Tour 2016. </figcaption>
</center>
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.
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>
figcaption{
max-width:100%;
height: auto;
display:flex;
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.
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>
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:
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>
</div>
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.
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! 😊
Credits
- 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
