HTML5 aim is to make life simpler for developers. One way it aims to do this is in making subtle little changes to the way you can write your HTML code. The syntax of valid XHTML (HTML5’s predecessor) could be a little excessive and HTML5 takes the garden shears to some of code.
The Stuff at the top – doctype et al
If you have built any HTML documents over the last few years you will probably have been using XHTML with
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> ......
With HTML5 the doctype has been simplified to:
<!doctype html >
Tech Note: This effectively launches the browser into Standards Mode
The <html> elements can be simplified as HTML5 no longer has the XML pretensions of XHTML. Therefore you can just use:
The <meta> tag used to tell the document which character set to use is also reduced to:
None Container Tag Closure
As a result we would open and close the tags in one go as follows
<br /> and
With HTML5 you no longer need to do this and you can use
<img> without effecting page validation.
To validate XHTML documents, all attribute values needed to be placed in quotes. This meant that with ‘on/off’ boolean type attributes, like ‘selected’, would need to be set in longhand as follows
<option value="1" selected="selected">1</option>
However, with HTML5 with boolean attributes there is no need to set a repetitive value. This is valid html5:
<option value="1" selected>1</option>
Removal of ‘type’
With <link> when attaching a stylesheet to a page you will set the type attribute to
text/css as follows:
<link rel="stylesheet" href="style.css" type="text/css" />
I have often been asked what others types could be used here. Very good question. In my experience I have only set the
text/css. HTML5 now assumes that be to the case, thus saving you having to add
type. So the following is valid HTML5:
<link rel="stylesheet" href="style.css">
In a similiar vein the
<script> element is most commonly associated with the type
So can now be replaced with:
<script src="code.js"> </script>
Fudge, Shim, Shiv
HTML5 adds a whole raft of new HTML elements. What if the user’s browser doesn’t support HTML5 (IE6, IE7, IE8). If older browsers come across a new HTML5 element they won’t recognise it. This won’t crash the browser or cause nuclear meltdown but these elements cannot be styled and they will be rendered as ‘inline‘.
<!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
Tip: Note the lack of ‘type’ attribute
This includes the ‘shiv’ but also adds ‘feature-sniffing’ to identify whether the browser supports various HTML5 and CSS3 features.
Lowecase, uppercase, mixed case, suitcase – no problems – but it is generally recommended that you stick to lowercase for consistency.
The <a> tags
target attribute which was invalid in XHTML is now valid again in HTML5.