Lesson Overview

What is valid HTML and why is it important? Does it really matter? The short anwer is YES. The long answer is the whole point of This lesson :D You'll also learn about industry standards and creating good code, and how to make sure your code is valid and well-formed.

Prerequisites

It's important that you understand basic HTML Syntax, the minimal HTML elements, and the basics of HTML elements before doing this lesson.

What is Valid HTML?

HTML is considered valid or well-formed when it follows all of the syntax and standards rules. These rules include (but are not limited to):

Why Only Valid HTML?

All HTML documents should be valid and well-formed because:

  1. Pages with valid and well-formed HTML render faster than pages with invalid or mal-formed HTML.
  2. Pages with valid and well-formed HTML will be more likely to work in a browser you haven't tested for your page, or a new browser that you haven't tried.
  3. HTML changes frequently. Valid and well-formed HTML is easier to update to match changes in the technology.
  4. Pages with valid and well-formed HTML are more accessible and will work with accessibility software (for example, a screen reader).
  5. Search engines will give higher priority to valid and well-formed pages (Search Engine Optimization Test)
  6. It's more professional and shows that you pay attention to detail, which employers and clients really like.

Industry Standards

Industry standards (or just "standards" or "conventions", sometimes also referred to as "coding style") are important. These are the rules that industry follows regarding the styling of source code. They include rules for things like indentation and spacing, the made-up names for things (identifiers) like variables and methods/functions/classes, how long a line of code should be, how code is documented or commented, and where certain words or symbols should appear (e.g. at the end of the line or beginning of the next line).

Industry standards don't determine the validity of your HTML code, but they do make your code professional and easier to read and maintain.

Here's a list of typical industry standards:

Following standards makes your code more readable and also makes it easier to maintain (update, make changes to, fix errors, etc.)

Validating your HTML Code

The W3C has a free HTML validator you can use to ensure your HTML is valid and well-formed. The validator will inform you of any errors in your HTML code with line numbers (but it won't point out violations of industry standards).

W3C Markup Validation Service

You can validate by either passing the service your page's URL with file name, by uploading your HTML file to the validator, or by pasting your HTML code right into the validator.

Regardless of which method you choose, make sure you open the "More Options" area to change some of the validation options:

validator settings
An example of the validation options. Here I've selected utf-8, HTML5,
and to show the page source being validated plus verbose output.

The rest of the options are up to you. You can list your error output in the order in which it was discovered (List Messages Sequentially) or you can list them in groups of similar errors (Group Error Messages By Type). You can have the validator output the source it's validating (Show Source, helpful if you chose file upload or URL options), and you can tell the validator to give you error messages with a bit more explanation (Verbose Output).

Once you have selected your options, click the CHECK button to validate your HTML. You will see the output shortly after clicking the button.

validator output
Several validation errors: I only made 2 mistakes, yet several errors result!

In the example above, I only have 2 mistakes: I left the <title> element empty, and I put a level-2 heading inside a paragraph but forgot to close the level-2 heading tag above the footer element:

<!DOCTYPE html>
<html lang="en">
  <!--
  Name: Wendi Jollymore
  Version: 1
  Date Created: Sept 11 2017
  Date Updated: Sept 11 2017
  Description: Week 2 exercises - stuff for week 2.
  -->
  <head>
    <title></title>
    <meta charset="utf-8">
    <meta name="author" content="Wendi Jollymore">
    <meta name="description" content="Assignment 1 Sample">
  </head>

  <body>
    <header>
      <h1>Week 2</h1>
    </header>
    
    <p>Exercises for week 2 - demonstrating invalid and/or
    mal-formed HTML.</p>
    
    <p><h2>A Heading</p>

    <footer>
      <address>Wendi Jollymore © 2017 Sheridan College</address>
    </footer>
  </body>
  
</html>

You should only publish valid and well-formed HTML, and there's really no good reason not to: it's so easy to validate your HTML code and fix the problems!

Exercise

Copy the HTML from the CodePen below and run it through the W3C HTML validtor. Fix all the errors! Keep running your altered code through the validator until it's perfect.

Once you've made the code well-formed and valid, fix any violations of industry standards.

See the Pen Bad Code: Invalid Non-Standard HTML by Wendi Jollymore (@ProfWendi) on CodePen.