Debugging HTML Code
Before moving forward, let's see how we can fix syntax errors in HTML code.
What happens if something goes wrong and you can't resolve an error in the code? This article will introduce you to several tools that can help you find and fix errors in HTML.
The syntax of HTML elements is probably much easier to understand than a "real programming language" like PHP, JavaScript, or Python. The way browsers parse HTML is much more permissive than how programming languages are executed, which is both a good and a bad thing.
The Permissiveness of HTML Code
So, what do we mean by permissive? Well, generally when you do something wrong in the code, there are two main types of errors you'll encounter:
- Syntax errors. These are spelling mistakes in your code that directly affect how the program runs. They are usually easy to fix, as long as you know the syntax and can interpret the error messages.
- Logical errors. These are errors where the syntax is actually correct, but the code doesn't do what you intended, meaning the program runs incorrectly. These are often harder to fix than syntax errors because there's no error message pointing you to the source of the problem.
HTML itself doesn't suffer from syntax errors because browsers parse it permissively, which means that most of the time, the page is displayed even if there are syntax mistakes.
☞ HTML is parsed permissively because when the web was first created, it was decided that publishing content was more important than enforcing perfectly correct syntax. The web probably wouldn't be as popular today if it had been much stricter from the beginning.
In the editor below, try to identify the errors in the HTML code.
Validating HTML Code
As you may have seen in the example above, it's truly necessary to ensure that you've written your HTML code correctly. But how? In a small example like the one above, it's easy to scan through the lines and spot the errors, but what do we do when dealing with a huge and complex HTML document?
The best strategy is to run the HTML page through the Markup Validation Service — created and maintained by the W3C, the organization responsible for the specifications that define HTML, CSS, and other web technologies. This service scans an HTML web page and provides a report to tell you what's wrong.
Try validating the code from our example.
If you can't understand what each error message means, don't worry — a good idea is to try fixing just a few of the more obvious errors at a time. Then try revalidating the HTML code to see which errors remain. Sometimes, fixing one earlier error will also eliminate other error messages — multiple errors are often caused by a single issue, creating a domino effect.