WDD 130: Web Fundamentals

HTML and CSS Validation

Overview

Writing HTML markup and CSS can easily lead to errors in the syntax. You can use validation tools to help write standards-based HTML 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 using a validator tool and comparing it against the the rules of the specified doctype and, then reporting any possible errors, warnings, or other information. In this class, you will use the Web Developer browser extension tool to conduct the 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
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 several HTML mistakes.
  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, warnings, and information.
  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. This is not required, but is considered good practice. 
      <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 other than list items as direct children. 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 any questions you have about fixing the remaining errors in the General channel of Microsoft Teams.

Validate CSS

  1. With the same page open, 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 Microsoft Teams.

Optional Resources