Open In App

How to check for errors in HTML ?

Improve
Improve
Like Article
Like
Save
Share
Report

HTML5 is easy to understand and it’s not compiled into different forms before the browser displays it.

In any code, 2 types of errors are possible:

  1. Syntax error: Incorrect syntax leading to compile time error in other languages.HTML have no affect of syntax error.
  2. Logical error: Syntax is correct but output is unexpected because of wrong logic.

In HTML we never encounter syntax errors because the browser parses HTML permissively, which means that the page is displayed even if there are any syntax errors. Browsers have some built-in rules to display incorrect HTML. Therefore there would always be some output, even if it is not what is expected.

The way that browsers parse HTML is a lot more permissive than how other programming languages are run, which leads to both good (content gets displayed) and bad scenarios (content is displayed in an unexpected manner).

In the below example, there are some syntax errors like incomplete p tag, incomplete h1 tag, but still, it displays some of the content in an expected way. In this case, the initial p tag and h1 tag but the next p tag is displayed as h1. These scenarios are easy to identify and avoid in small codes but when the length of code increases, it will be complex to debug code.

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>HTML errors</title>
</head>
   
<body>
    <h1>HTML errors</h1>
    <p>unclosed paragraph tag 
    <h1>its displaying the way it is intended
    <p>but it may lead to next unexpected thing
</body>
  
</html>


Output:

Validating our HTML: In order to make sure your html code is error free is by using html validation service by w3c. This site takes html as input and returns the errors in html document. You can provide html by providing link to html document, uploading html file or directly pasting html there.

W3C interface

Example: Let’s try by directly pasting html. Here is the result for the code given above. The errors in the HTML are highlighted, so now we can make changes accordingly in html and make it error free.

Errors

The error free HTML is shown below.

HTML




<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <h2>Welcome To GFG</h2>
    <p>Default code has been loaded into the Editor.</p>
</body>
</html>




Last Updated : 31 Oct, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads