HTML5 Doctype

The New Doctype
How do you start to make a HTML5 page? The very first line of a HTML5 page would have to be its doctype, and you would write this:

<!DOCTYPE html>

Yes. Its that short and simple. That's all you need to start a HTML5 page. Remember, HTML5 is not some magical programming language. Its just a series of features to be found in the new awesome standard of HTML, which is that same old boring code that the internet is still made of. Nothing else has changed, except the introduction of new "standard features" which in some cases, have yet to appear as standards over all the browsers.

In previous version of HTML, you might have had to write one of the following lines as the first line:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

In HTML4, if you used something like "strict" then sometimes when you wrote things wrongly then things will go very wrong. I used to use transitional most frequently.


 * 4.01 strict - means that things like font and link attributes on body and old markup will be removed. ie: wrong style attributes will look BROKEN.
 * 4.01 transitional - means that some things like font will be deprecated but others wont. ie: its like saying you can use it now but in later html versions its totally gonna be depreciated. transitional 4.01 was created in period when css support was not so consistent for all and so browsers had to accept some less strict html.

BUT NOW in HTML5 there is only one standard. Thank god for that, wasn't that bit above pointlessly confusing?

But now you might be asking... why is there even this header at the start of the page?... What does it mean?

MIME Headers
At this point its good to talk about headers like the doctype and other MIME headers.

MIME stands for Multipurpose Internet Mail Extensions (MIME). Although its name is about internet mail, it is generally used to help describe any sort of multimedia today. You may have seen lines like these in some of your emails (in gmail, go to "Show original" to see the whole email header)

MIME-Version: 1.0 This is a multi-part message in MIME format Content-Type: text/plain; charset="utf-8"; format="fixed" Content-Transfer-Encoding: quoted-printable

When your browser requests for a page on the internet, the web server on the other side will send over a header FIRST. Similarly, when your email client requests for the email from your mail server, the mail server will send over the header first, so your email client can speed up things by preparing itself for the data that is about to follow. The header explains to your browser what kind of information/data is about to be sent over.

Error Handling
Of course, the point of having headers and content types is that because it now knows what information it is expecting, what if it ISN'T what it expected?

You will no doubt have noticed that you can write incomplete HTML and things will show. This is because on the internet, they know people already have been building shitty websites for so long, that there is no point in being strict about it. "HTML5" would need to be backwards compatible in order for it to be truly useful.

Tip: When building pages, try seeing how far you can break your HTML code and still have it appear as you sort of expected.

HTML5 Validation
When they started drafting HTML5, they said that the important thing was that it had to be forgiving, and ignore errors that were not crucial to the running, and there should be no alert on the user's end.

If you validate your page as an XML or XHTML page, it will totally break. Because XHTML uses "draconian error handling", whereas HTML doesn't.

Fun fact: Draco was the first legislator in ancient greece - "it is said that Drakon himself, when asked why he had fixed the punishment of death for most offences, answered that he considered these lesser crimes to deserve it, and he had no greater punishment for more important ones." Because the laws that Draco had made were so ridiculously strict (DEATH PENALTY FOR ALMOST EVERYTHING!), we describe really strict laws as "draconian".

"Linting"
On the topic of validating your code. Sometimes you will have a client who tells you that they want you to make it totally Valid HTML5 so you can put a pointless button on it claiming to be totally verified HTML5. This may be good practice (to try to write good, valid code), but you should explain to clients, it is not really the point either. Because this may result in you "linting" or fixing bits of the code which do not pass in the validator but actually dont show up as any sort of error visually on the site itself.

We call it lint because its like lint on your coat. It doesn't really stop anything else from working perfectly fine, but it might just look less tidy. Big deal. I'd say, build good code the best you can, but don't sweat the small stuff.

'''5 minute challenge: Find the website with the MOST ERRORS when you check it with either http://validator.w3.org or http://html5.validator.nu/
 * Read the errors that appear - can you guess what is going on?
 * Can you find any BIG portal websites with no errors?'''

Try the big websites like:
 * http://www.google.com
 * http://www.yahoo.com
 * http://www.msn.com
 * http://www.bbc.co.uk
 * http://youtube.com
 * http://twitter.com
 * http://tumblr.com
 * http://wordpress.com
 * http://blogspot.com
 * http://ebay.com
 * http://amazon.com
 * http://myspace.com
 * http://vimeo.com
 * http://flickr.com
 * http://ntu.edu.sg
 * http://edventure.sg
 * http://www.nus.edu.sg
 * http://www.gov.sg