Its been a year and half since I last posted any tips or tutorial so today I decided to post something that currently I am using and learning that is HTML 5 technology.
About HTML 5, is a revision of the Hypertext Markup Language (HTML), the standard programming language for describing the contents and appearance of Web pages. HTML 5 was developed to solve compatibility problems that affect the current standard, HTML 4. One of the biggest differences between HTML 5 and previous versions of the standard is that older versions of HTML require proprietary plugins and APIs. (This is why a Web page that was built and tested in one browser may not load correctly in another browser.)
HTML 5 provides one common interface to make loading elements easier. For example, there is no need to install a Flash plugin in HTML 5 because the element will run by itself.
1. A new DOCTYPE declaration.
Having problem remembering long and complicated HTML 4 / XHTML 1.0 doctype like below?
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
If so, then you will surely love the new doctype by HTML5, which looks simple, clean and easy to memorize. Here it is:
1 <!DOCTYPE html>
2. No more Type attribute for script and link.
This is how you define your <script> and <link> tags in HTML 4.
1 <link rel="stylesheet" type="text/css" href="style.css" />
2 <script type="text/javascript" src="script.js"></script>
In HTML 5, you don’t have to specify the MIME type value for your <script> and <link> tag. All scripts and styles are assumed to be type="text/javascript" and type="text/css". You can simply write your code as:
1 <link rel="stylesheet" href="style.css" />
2 <script src="script.js"></script>
3. Semantic Structure – header , footer & nav
Previously, we added an id or classes to HTML structure and perhaps, it can be serve as pseudo-semantic structure. But by nature, div have no semantic structure even after added an id.
1 <div id="header">
2 ...
3 </div>
4 <div id="nav">
5 <ul>...</ul>
6 </div>
7 <div id="footer">
8 ...
9 </div>
New HTML5 tags like <header>, <nav> and <footer> can be used to replace the mark-up above, with provide semantic structure to content.
1 <header>
2 ...
3 </header>
4 <nav>
5 <ul>...</ul>
6 </nav>
7 <footer>
8 ...
9 </footer>
4. Semantic Structure – article vs section.
HTML5 also offers new <article> and <section> tags to help us create semantic content.
1 <section>
...
2 </section>
3 <section> tag defines sections in a HTML such as headers, footers, or any other sections of content.
1 <article>
2 ...
3 </article>
The <article> tag is used to specify independent and self-contained content.
5. New HTML5 Form Input Types and Attributes
HTML5 has introduced 13 new input types and several new attributes for <form> and <input> tags. However, not all browsers are fully support HTML5 new input types and attribute. By the way, you might have to try out these amazing HTML5 form, some new features has been added for instance the browser-based validation, build-in placeholder and new input types.
1 <form id="myform">
2 Name: <input name="name" required placeholder="Your name" pattern="[A-z]{7}" />
3 <br/>
4 Email: <input type="email" name="email" required placeholder="email@inwebson.com"/>
5 <br/>
6 URL: <input type="url" name="url" placeholder="Homepage URL"/>
7 <br/>
8 Age: <input type="number" name="age" min="18" max="99" />
9 <br/>
10 Description: <textarea name="desc" placeholder="Describe yourself here..."></textarea>
11 <br/>
12 <input type="submit" value="Submit" />
13 </form>
6. Editable HTML5 Content
HTML5 has offers another cool new attribute – contenteditable. You can make your content editable with adding the contenteditable attribute to it. This feature will be more useful if paired with HTML5 Local Storage (will be explain in below).
1 <div contenteditable="true">
2 Any content here will be editable...
3 </div>
7. HTML5 Fix for Internet Explorer
Internet Explorer up to version 8.0 can’t read HTML5 tags properly, you can’t style them. Thankfully, Remy Sharp and John Resig have found a fix for this.
1 <!--[if lt IE 9]>
2 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
3 <![endif]-->
Simply include this script in the <header> tag and you will be able to style the HTML5 elements in IE.
