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):

• Minimal structure elements have been included and used correctly.
• Correct DOCTYPE has been used.
• Elements that require closing tags have properly closed tags. For example:

  <p>This is an example of some mal-formed
  or invalid HTML.  I have not closed the paragraph tag
  I opened on the first line.
  <p>We don't want to do that!</p>

• Proper nesting of elements: always close tags in the reverse order they were opened. For example:

  <!-- invalid HTML: improper nesting: -->
  <p>This is a paragraph with <strong>important text</p></strong>
  
  <!-- valid HTML: nesting is correct: -->
  <p>This is a paragraph with <strong>important text</strong></p>

• Attribute values enclosed in single- or double-quotes. For example:

  <p class=highlight>This is not valid because the attribute value
  is not enclosed in single-quotes or double-quotes.</p>

• Ensuring that only those elements and attributes that are part of the HTML standard (in our case, the HTML Living Standard standard) are being used. There are some special circumstances when you can make up attributes for use by scripts and plugins, but they have to follow certain standards and conventions in order to be considered valid.

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:

• Elements and attributes should be in lower-case. For example, the following code violates industry standards because the <p> and <span> tags and the class attribute are in upper-case:

  <P>This is invalid HTML because all <SPAN CLASS="highlight">elements</SPAN>
    and <SPAN CLASS="highlight">attributes</SPAN> must be in lower-case.</P>

  The proper way to write this code would be:

  <p>This is invalid HTML because all <span class="highlight">elements</span>
    and <span class="highlight">attributes</span> must be in lower-case.</p>

• A line of code should not go beyond column 80. This is for a variety of reasons but mostly because it fits on most screens (try reading code by scrolling side-to-side, it's annoying). Example, do this:

  <aside>
  <h3>This Is A Sidebar</h3>
  <p><img src="images/AnImageFileThatIMadeUp.jpg" alt="not a real image">
    Some text about something related to the main content of the page.</p>
  </aside>

  NOT this:

  <aside><h3>This Is A Sidebar</h3>
  <p><img src="images/AnImageFileThatIMadeUp.jpg" alt="not a real image">Some text 
    about something related to the main content of the page.</p>
  </aside>

  Exception: if you have an href attribute with a really long URL, you can't break that URL over multiple lines. So for long URLs, we accept that it's often necessary to have a line of code go past column 80. For example:

  <a href="http://www.not.a.real.url/do/not/try/to/go/to/this/page/because/i/just/made/this/up/so/it/would/be/really/long/lol.html">Not 
    a real URL, don't try to go here.</a>

• Indent the code inside an element. You've already seen this in the longer code examples throughout these tutorials so far. For example:

  <body>
  
  <header>
    <h1>Fundamentals of HTML</h1>
    <h2>Valid HTMLe</h2>
  </header>
  
  <footer>
    <address> 
      &copy; 2020 Wendi Jollymore, et. al.
    </address>
  </footer>
  
  </body>

  You should also add an extra indent to the second and subsequent lines of an extra-long bit of code that you have to break up over multiple lines. For example:

  <section>
    <h2>Lorum Ipsum>
      <p>This is lorum ipsum text. We use it as 
        "filler" when we want to include blocks of text but don't have any actual content, 
        yet.  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula 
        eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, 
        nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
        sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, 
        vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. 
    </p>
  </section>

• Standard indent size is 2 spaces, but many programmers use 4 because most programing languages use 4.
• Add a blank line between groups of related statements. You saw an example of this up above in the example I used for indentation.
• Add lines of documentation using the <!-- --> element to help explain the structure of a complex page or the different components of a page/application.

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:

• If offered, select the "utf-8" Character Encoding.
• Make sure you select the right DOCTYPE for your HTML. In this course, you should be writing valid HTML5 code so you should select "HTML5 (experimental)".

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.

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!