WDD 130: Web Fundamentals

HTML and CSS Validation

Overview

Writing HTML markup and CSS can easily lead to mistakes in the syntax. We can use validation tools to help write standards-based HTML markup and CSS.

"HTML is not a programming language. Syntax errors in a web page do not commonly cause the web browser to refuse to open the page. This is one of the biggest reasons for the rapid adoption and spread of the web ... allowing people access to the content is more important than complaining about errors to people that won't understand them or be in a position to fix them ... Although web browsers will accept bad (invalid is the official term) web pages and do their best to render the code by making a best guess of the author's intention, it is still possible to check whether the HTML has been written correctly, and indeed it is a good idea to do so, as you'll see below. We call this “validating” the HTML." - Worldwide Web Consortium w3.org

Prepare

Validation means to check the HTML or CSS code provided to the validator tool and compare it with the rules of the accompanying doctype and report on the possible errors, warnings, and other info to consider. In this class, we will use the Web Developer browser extension tool to drive our HTML and CSS validation checks which you were asked to install as part of the course setup.

VS Code has built in help with HTML and CSS. For example, it will provide squiggly underlining of possible issues with your HTML and CSS. Hovering over the squiggly line will provide a description of the issue. You can also use the Problems tab to see a list of issues.

In this example screenshot, a closing } was left off the footer selector rule in CSS. VS Code provides a red squiggly underline to indicate a problem.

VS Code Problems
Figure 1: Example VS Code Helper Notation

The gray } on line #73 in the figure is the system providing a possible fix which you can accept using the tab key when in focus.

Activity Instructions

Validate HTML

  1. Open this demonstration page in your browser. This page contains some HTML issues.
  2. Validate the HTML by using the Web Developer browser extension that you have already added to your browser.
  3. Note and identify the errors, warnings, and information provided by the validation report.
  4. You should see a report of over 12 errors, warning, and info.
  5. On paper, try to fix the first five messages.
    Answers
    • Warning: The opening html tag should have a language attribute. 
      <html lang="en-US">
    • Info: Remove the trailing slash on any void element like meta tags. Not required but now considered good practice to remove them. 
      <meta charset="UTF-8">
    • Error: The required title element was missing in the head. 
      <title>This title should match up with the heading 1</title>
    • Error: List elements cannot contain anything beside list items as direct children. Probably change the <div> divider to a <li> list item within the <ul> list element.
    • Error: Do not use units in width and height attributes for <img> image elements. 
      width="200" not width="200px"
      The pixel unit is implied in HTML.
  6. ☑️ Post questions you have about fixing any of the remaining errors found in the General channel of MS Teams.

Validate CSS

  1. With the same page open, now validate the CSS using the Web Developer browser extension.
  2. Note and identify the line numbers of the CSS issues.
  3. What are the issues and how might they be fixed?
    Answers
    1. Line 9 - Value Error: font-size property value should be 1.2pt
    2. Line 20 - Value Error: padding should be 5px
    3. Line 70 - Property doesn't exist. A suggestion should be provided.

Tips

Submission

  1. Share anything that you find interesting or may have some questions about with the class in MS Teams.

Optional Resources