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.

3 Thoughts to “Simpler HTML”

  1. thanx…………………………………….very nice .
    _____________________________________________________________

    1. admin

      Thanks Sean – changed that now.

Leave a Comment