HTML5


So HTML5 is now the correct way to build websites. Previously we had to support IE6 which means all the new cool features that we want to implement had to be ignored.

Old browsers are being upgraded and security flaws in previous versions now make it important for users to make this move to more recent/stable browsers.

For the most recent list of which usage stats for browsers go to
http://www.w3schools.com/browsers/browsers_stats.asp

As you can see, the percentage on IE6 is now 0.5% which means we can now ignore them.

A full breakdown of the differences between HTML4 and HTML5 can be found at
http://dev.w3.org/html5/html4-differences/

Let run through some examples of what is different that you need to know.

DOCTYPE

Was:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

Now:

<!DOCTYPE html>
<meta charset="utf-8">

No need for <div>

Now available elements are:

<header>, <section>, <aside>, <article>, <nav>, <footer>

You can still use the <div> element, but it will be needed less with these new elements available

Type attribute for script tags

No longer required

Was:

<script type="text/javascript">

Now

<script>

Input Types:

With mobile browsing become more common (and in a few countries the majority of internet browsing) we can make input boxes provide back a different keyboards/options depending on what we require from them.

New Input types:

color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week

Audio

HTML5 now supports an audio player instead of having to use flash or javascript libraries to play music on your site
Both .ogg and .mp3 formats need to be created to gurantee the users browser can play it.

<audio controls="controls">
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

Video

And again, HTML5 now supports video code
Both .mp4 and .ogg need to be provided to gurantee the users browser can play it.

<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

Canvas

The <canvas> element is used to draw graphics, on the fly, on a web page. (javascript can be used to do some cool things here)

<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>

And that was a quick breakdown of what HTML5 has to offer.

CSS3 allows a host of other options also.

Examples can be found at http://glynrob.com/css-2/css3/

Leave a Reply

Your email address will not be published. Required fields are marked *