HTML5 is Here, Start Using It!

Jairo Martinez - Bayshore Solutions Sr. Programmer
By: Jairo Martinez — Bayshore Solutions Development Team
I hear a lot of people talk about how HTML5 is the future of the web but in reality HTML5 is now out there being used pretty heavily in a lot of websites. So, let’s start using it!
To clear the fear of the unknown, let’s cover some HTML5 fundamentals. First, let me show how a basic HTML5 page looks like in code:
<!DOCTYPE html>
<html>
<head>
<title>My first webpage</title>
</head>
<body>
<p>My first webpage</p>
</body>
</html>
That’s it! If you are familiar with HTML 4.01 you will notice the DOCTYPE declaration is not the crazy mess it was before and now it’s just <!DOCTYPE html>. If you see the source code of any HTML5 page that line will be always at the top. The <head> tag will contain important information for search engine web crawlers such as page title. The <body> tag will generate the code that will be shown in the browser.
So, what is new in HTML5? Some of the most interesting new features in HTML5 are:
- The <video> and <audio> tags for media playback
- The <canvas> tag for 2D drawing
- Better support for local offline storage
- New content-specific tags, like <article>, <footer>, <header>, <nav>, <section>
- New form controls, like calendar, date, time, email, url, search
If you want to add video your website you will not need to have a browser plug-in (like flash), you can just use the <video> tag like this:
<video width=”320″ height=”240″>
<source src=”movie.mp4″ type=”video/mp4″ />
</video>
The <canvas> tag will allow you to draw graphics, on the fly, by scripting (usually JavaScript). There are already people creating complete games using the features provided by the <canvas> tag. One amazing example is the popular game for the IPhone ‘Cut the Rope’ that has been completely ported to HTML5. You can play this game in your browser by going here: http://www.cuttherope.ie.
The set of features of HTML5 supported by the browsers vary from one to the other but most modern browser currently have some basic support of HTML5. If you want to know exactly what HTML5 features are supported by your browser you can view that on this page http://html5test.com.
For more information about HTML5, I’ll recommend you this site http://www.html5rocks.com.
In there you will find the latest and most relevant information about HTML5. So, let’s embrace HTML5 and start using it!
Jairo Martinez is a Senior Programmer at Bayshore Solutions—a Tampa Web Design, Web Development, and Internet Marketing Company.









