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.
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)
Tags for this Thread