Skip to main content Link Menu Expand (external link) Document Search Copy Copied

When HTML Goes Wrong

What happens when we do not create “good” HTML? In this activity, we will look at a few different examples.

W3C Validation Service

When an HTML document does not comply with the W3C’s HTML5 standard, most web browsers do their best to render the document using their detault settings. HTML5 provides detailed instructions for web browser developers on how to handle mistakes or issues in an HTML5 document; for example, how to handle problems such as missing optional end tags.

However, there are still many problems that web browsers may not be able to handle properly. A common problem is a missing closing tag or mistyped opening and/or closing tag. For example, consider the following HTML.

<!DOCTYPE html>
<html>
  <head>
    <title>A First Example</title>
  </head>
  <body>
    <p>
      Try including an anchor tag 
      <a href="http://www.cs.virginia.edu">CS website 
      without a closing tag.
    </p>
    <p>
      Then add another paragraph. 
      Try running this example and see how it looks. 
    </p>
  </body>
</html>

How does your browser render the example above? How does the browser build this HTML into a DOM tree?

Copy the above HTML and submit it to the W3C’s Markup Validation Service.

Question: Does the service provide enough information to fix the HTML syntax errors?

Now consider the following additional html snippet:

<p>
Here is a first paragraph
<p>
  Then another paragraph. 
  Try running this example and see how it looks. 
</p>

Question: Does this also contain a syntax error in HTML?

Add it to your earlier HTML and test it with the W3C Markup Validation Service.

Sometimes, problems relate to semantic constraints in HTML5. Some HTML5 elements may have a specific role or meaning, and should appear only once in an HTML document. For instance (as shown below), having multiple intances of the <main> element, which describes the main content of an HTML document, in an HTML document would cause the document to be invalid.

<body>
  <main id="main1">This is the main content of the document</main>
  <main id="main2">Here is more main content of the document</main>  
</body> 

Now we will test out the HTML validation service provided by W3C. This service will help us ensure that we’re writing good HTML5; it will also provide error messages to help us clean up our code.

  1. Create an HTML file and enter the following code
     <!DOCTYPE html>
     <html>
       <head>
    
       </head>
       <body>
         <p>Hello World!</p>
         <title>Hello World example</title>
         <main id="main1">An example HTML Document</main>
         <main id="main2">Experimenting with W3C's Validation Service</main>  
       </body>
     </html> 
    
  2. Go to W3C’s Markup Validation Service. Upload your HTML file to validate. The code (previous step) has some problems that should cause validationerrors when checking it through the W3C’s validation service.
  3. Inspect the validation results. Try to correct it. Repeat step 2 until the file is valid.
  4. Upload the HTML you created earlier and ensure it is valid. Likewise, try some of the errors we’ve mentioned above see how the validation service alerts you to those problems.

Submission: Submit your completed HTML file to Gradescope in Activity 2.