Upgrading to HTML5/CSS3
I recently decided to upgrade my sites to HTML5/CSS3, and thought it would be a good idea to share the experience. By the way, I'm starting this thread here because I'm not adding to the functionality, that may/will come later. I'm just ensuring that my existing code is up-to-scratch. So I do not think it belongs in the HTML5/CSS3 thread, but by all means move it if you think otherwise...
Firstly, how do you idenify your code as HTML5? Simple, amend the doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
to: <!DOCTYPE html> or <!DOCTYPE HTML>
Isn't that easy? Then you may need to update the charset to UTF-8. There is a new syntax for that. Replace:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
with: <meta charset="UTF-8" />
Secondly, I was pleasantly surprised at how much of my code passed muster as HTML5. There were a few <font>, <align>, <img hspace= > and <a name= > errors where I'd used obsolete code. Also there were a few characters, like "£" (UK pounds) which are invalid in UTF-8, but nothing major. Also, the " />" termination for <img>, <br> etc. is optional. So can be re-written in due course...
However there was one big difference - validation. To validate HTML4, I used the WDG validator, because it will validate a whole site in one go. However, it does not understand HTML5! Which means using the W3G HTML validator, which only validates one web page at a time, so is very cumbersome! Fortunately, I found that the HTML5 validator engine used by W3G (Validator.nu) can be accessed directly. So I've written a simple front-end that calls it. It still only validates a page at a time, but it works from a list of pre-set pages, in a drop-down list, and has three buttons:
Previous - validate the previous page in the list.
Validate - validate the current page in the list.
Next - validate the next page in the list.
I actually like the facility to click page by page. However, there is a maintenance overhead, because the list is hard-coded in the front-end, which needs to be updated in two places each time a page reference changes, but I'll live with that.
So now I'm a convert. Despite the things I've previously written, I now agree that anyone starting out should learn HTML5/CSS3.
An update on the front-end for Validate.nu: I've re-written it to use external files to store the list of web pages to validate. Multiple lists are supported, the script assumes any files with the extension ".lst" that is in the same folder as the script are lists for it's use. The format of the lists is simple:
- First line is the URL of the site to validate.
- Subsequent lines: file names of the web pages to validate, one per line.
E.g. The file "voting.lst" contains:
The validator can be run from a local host or on-line, but the sites to validate must be on-line (to be read by Validator.nu). Anyone interested can have a copy of the front-end free on request. Or I can upload the code, if preferred...