Start working with the HTML5

by Muhammad Yoosuf on December 9, 2009 · 3 comments

The HTML5 is the new generation of web markup language and becoming popular among the web application developers and web designers, how to start with HTML5? how the markup flow should be arranged? so let’s dive in.

Before briefing the topic, why HTML5 should be used for your applications? There are plenty of benefits of using the HTML5, but we are specifying the limited items to make this post short.

The canvas tag for immediate mode 2D drawing
Timed media playback (Media streaming)
Offline storage database (smiler like Google gears)
Drag-and-drop
Cross-document messaging ( smiler to xml)
Browser history management
MIME type and protocol handler registration and so on…

How to to start with the HTML5

As every single HTML document you should define the document type first, if you are not defining the document type, the web browser will show as a general web page (The HTML, some of the styling may will not be applied) to avoid that, we should add the document type, that will tell the browser, that the page is belong to a particular schema, thus to use the HTML5 document type use the following;

<!DOCTYPE html>

Now the browser will know that the page is HTML5 markup, and we should make the rest, to continue with the element positioning and coding, we should understand that DIV elements will be replaced with the SECTION element.

Previously

<div>...... </div>

Now (HTML5)

<section>.....</section>

Other than this, additional special tags are available, earlier when you was working with HTML4/XHTML1.1 you might use so much of DIV tags for making the header, footer and other important areas. But the HTML5 has build in tags.

Previously

<div id=header>.....</div>
<div id=nav>...</div>
<div id=content>....</div>
<div id=sidebar>....</div>
<div id=footer>.....</div>

Now (HTML5)

<header>.....</header>
<nav>...</nav>
<section>...</section>
<aside>...</aside>
<footer>.....</footer>

Lets look at a full page of HTML5 document skeleton

<!DOCTYPE html>
<html lang="en-uk">
 <head>
 <meta charset="UTF-8" />
 <title>Its a HTML5 page</title>
 <meta name="keywords" content="Thats IT, Muhammad Yoosuf" />
 <meta name="description" content="ADD YOUR DESC" />
 </head>

 <body>
 <header>
 <!--Inert your header related items -->
 </header>
 <nav>
 <!--Inert your Navigation items -->
 </nav>

 <section>
 <article>
 <h2>Some Title goes here</h2>
 <p>come content goes here</p>
 </article>
 <!--    You can repeat the articles    -->
 </section>

 <aside>
 <!--Inert your sidebar related items -->
 </aside>
 <footer>
 <!-- insert your footer content -->
 </footer>
 </body>
</html>

Making work perfectly in IE browser

Above code block will work with , all the major browsers but not the Internet Explore, in order to make available for Internet Explore a small hack can be done.

<script type="text/javascript">
document.createElement('header');
document.createElement('nav');
document.createElement('section');
document.createElement('article');
document.createElement('aside');
document.createElement('footer');
</script>

else @rem has made up a HTML5 enabling code and hosted at Google code, when you are inserting that hack script, make sure that you are using with the IE only conditional tag as following;

<!--[if IE]>
 <script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Styling the elements

To start with styling , always better to use a reset script, Yahoo provides a CDN access for their reset style sheet, else use the meyerweb reset (we are not going to show usage of reset script). After using of reset style, use the following in your style sheet.

article, aside, nav, section, header, footer{ display:block;}

Whats up

By now you may understand the usage and implementation on HTML5, hopefully now you can play around and with HTML5 and make your site or blog in HTML5 in well accessible way.

Tagged as: CSS, HTML5, JavaScript, Web Development