Debugging, testing, and validating code

Test and observe (default) presentation.

Use Chrome browser to test how the browser renders your HTML document (from Notepad++, select Run > Launch in Chrome. Make note of individual components of the content, their position, their characteristics, their behaviour. Is everything visible? only what you've expected? which elements are inline? which elements are block? Test with other browsers, where possible, and use Chrome's Inspect tools.

Read further Emulate and Test Other Browsers (google)

Correct anything that needs to be changed. Test on a regular basis; do not wait until you have completed everything; add ten to twenty lines between tests. Capture all observations in comments. Use techniques like "TODO" and "TOFIX" to annotate incomplete markup or opportunities to improve it (similar to refactoring in Java). Validate, correct to remove errors, and re-test.

How to validate HTML5 documents

Testing is not enough. Most browsers will do a very good job displaying your content pretty much as you expect them to do so. Content can display properly and you still may have syntax and semantic errors in your code.

Always validate your code at validator.w3.org. Use the "Validate by Direct Input" tab for now. In the editor, press Ctr+a to select all code; followed by Ctr+c to copy selection to buffer, and then in the "Enter the Markup to validate" area page, Ctr+v to paste the buffer.

Read further W3C Recommendation, 1.10. Conformance requirements for authors; detailing common reasons for distinguishing between a conforming document and one with errors.

Debugging HTML

Writing HTML is fine, but what if something goes wrong, and you can't work out where the error in the code is? This article, Debugging HTML (MDN), will introduce you to some tools that can help you find and fix errors in HTML.

The basic rules to adhere to, in addition to semantic correctness, for HTML5 specifically:

  1. All elements are properly closed. <p> content </p>
  2. Empty elements are never closed. [exception] <br>
  3. All elements are properly nested. <p><em><mark> content </mark></em></p>
  4. All attributes have a quoted value assigned. <img src="image.png" alt="an image">
  5. Single-valued attributes are minimized. [exception] <input autofocus selected>