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:
<html lang="en">
The <meta> tag used to tell the document which character set to use is also reduced to:
<meta charset="utf-8">
None Container Tag Closure
To valid XHTML documents all elements needed to be closed even if they didn’t contain any content. For some tags it is nonsensical for them to contain content. Think <br> and <img>.
As a result we would open and close the tags in one go as follows <br />
and <img />
.
With HTML5 you no longer need to do this and you can use <br>
and <img>
without effecting page validation.
Attribute Values
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
Syntax
selected=”selected”
For example:
<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 type
as 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 text/javascript
ie:
<script src="code.js" type="text/javascript"> </script>
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‘.
However, a ‘fudge’ or ‘shim’ or ‘shiv’ has been made available by jQuery and Javascript wizard John Resig. Adding the following Javascript code to your pages will allow them to be styled.
<!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
Tip: Note the lack of ‘type’ attribute
Modernizr
Alternatively, you can use a javascript plugin called ‘modernizr’.
This includes the ‘shiv’ but also adds ‘feature-sniffing’ to identify whether the browser supports various HTML5 and CSS3 features.
Caseless
Lowecase, uppercase, mixed case, suitcase – no problems – but it is generally recommended that you stick to lowercase for consistency.
Target
The <a> tags target
attribute which was invalid in XHTML is now valid again in HTML5.
thanx…………………………………….very nice .
_____________________________________________________________
script not style!
Thanks Sean – changed that now.