HTML5 is latest and biggest phenomenon on the web. Everybody wants a piece of it and everyone is discussing it. So we have started a series of HTML5 related articles and resources and you’ll be seeing them being published on every Wednesday.
As you know, HTML is the basic language of world wide web and HTML5 is its latest edition. It is changing the way we work in web design and many of our coding techniques. As you might already know that it is being considered as the Flash assassin. It’s true that many web browsers still do not support HTML5 properly so for routine kind of web designing it may not be the best solution just yet, but since this is the future of web, we must get a strong grip over it.
Update: Other posts in this series
- Wowing Demos of HTML5 with jQuery
- Mega Collection of HTML5 Cheat Sheets & eBooks
- How to Convert Your WordPress Theme into HTML5
- Getting to Know HTML5 Canvas
Let me clarify one thing first. I’m writing this article presuming that you do have a little knowhow about how HTML is written. If you have no idea, you might get bored reading it.
If we can understand the foundation of HTML5 in word, that word would be Simplification. The problem is that we guys who were coding HTML4 have a hard-time unlearning some practices. For the newbies, HTML5 is great. HTML5 is not difficult, it’s just a little different. So when you switch to HTML5, switch for good.
HTML5 have also trashed many codes which were better handled by CSS, codes such as <font><center> and <strike>.
Now let’s get to know the latest artifacts of HTML5.
The Latest Additions
HTML 5 holds many powers which HTML4 never even dreamt of. The most basic of these would be APIs and Latest Elements (codes). Here’s the introduction.
APIs: the new APIs can easily be integrated with HTML5. With these APIs you can create unbelievable results using plain HTML. Results such as:
- 2D drawing API which can be used with the new canvas element (elements are covered below)
- API for playing video and audio which can be used with the new video and audio elements.
- An API that enables offline Web applications.
- An API that allows a Web application to register itself for certain protocols or media types.
- Drag & drop API in combination with a draggable attribute.
- Editing API in combination with a new global attribute which edits content.
- API that exposes the history and allows pages to add to it to prevent breaking the back button.
- Cross-document messaging.
New Elements: Elements or the new codes in HTML5 will actually make our lives easier. Their working methodology and the simplification will be easier to learn and thanks to the new features, we won’t have to take help from other coding elements for small tasks, such as adding a video. We don’t need Flash to embed a video in HTML5. Even Youtube is creating its HTML based site, have a look Youtube HTML5.
Now let’s have a look at the significant new elements added in HTML5.
- <article> tag specifies independent, self-contained content such as a blog post.
- <aside> tag defines some content aside from the content it is placed in. The aside content should be related to the surrounding content.
- <audio> tag defines sound, such as music or other audio streams.
- <canvas> tag is used to display graphics. This is only a container for graphics, you must use a script (such as jQuery) to actually paint graphics.
- <command> tag defines a command button, like a radio button, a checkbox, or a button. It is only supported by Internet Explorer at the moment.
- <datalist> tag defines a list of options.
- <details> tag specifies additional details or controls which can be hidden or shown on demand. Supported by Google Chrome only.
- <figure> tag specifies self-contained flow content (like images, diagrams, photos, code, etc.).
- <footer> tag defines the footer of a section or document. Typically contains the name of the author, the date the document was written and/or contact information. You don’t have to create a <div id=”footer”> anymore.
- <header> tag specifies an introduction, or a group of navigation elements for the document (this has no relation to the <head> tag).
- <mark> tag is used if you want to highlight parts of your text.
- <nav> tag defines a section of navigation links. This is a dedicated tag for navigation bar.
- <output> tag represents the result of a calculation (like one performed by a script). Supported by Opera only.
- <option> tag defines an option in a select list. The option element goes inside a <select> or <datalist> element.
- <progress> tag represents the progress of a task.
- <section> tag defines sections in a document. Such as chapters, headers, footers, or any other sections of the document.
- <source> tag is used to specify multiple media resources for media elements, such as <video> and <audio>. You to specify alternative video and audio files which the browser may choose from based on its media type or codec support.
- <time> tag defines either a time (24 hour clock), or a date in the Gregorian calendar, optionally with a time and a time-zone offset.
- <video> tag specifies video, such as a movie clip or other video streams.
As I said, HTML5 makes our lives a lot easier. Here are some examples:
Earlier we used to start our HTML document like this
<!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 ">
<!DOCTYPE html> <html lang="en">
Earlier we had to form our web pages using the method of divs:
<div id="header"></div> <div id="content"> <div class="article"></div> </div> <div id="footer"></div>
<header></header> <content> <article></article> </content> <footer></footer>
Cute, right..! So now you know what is HTML5, why it is creating so much hype and what should we expect from it. I think we’ll be focusing on HTML5 more often here at Designzzz, so stay tuned.