I’m not going to write a huge article explaining why HTML5 is great, what’s planned, none of that. I’m just giving you the facts so you can reference and get the birds eye view perspective which for the busy web developer is sufficient.
Doctype declaration
<!-- HTML 4.1 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- HTML5 -->
<!DOCTYPE html>
Charset definition
<!-- HTML 4.1 -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- HTML5 -->
<meta charset=utf-8 />
Tags that have been Removed from HTML5
<basefont>
<big>
<center>
<font>
<s>
<strike>
<tt>
<u>
<frame>
<frameset>
<noframes >
Deprecated tags that have been Removed from HTML5
<acronym>
<!-- Use abbr instead -->
<applet>
<!-- Obsoleted in favor of object -->
<isindex>
<!-- Replaced by usage of form controls -->
<dir>
<!-- Obsoleted in favor of ul -->
Attributes for positioning were Removed
align, background, bgcolor, border, clear, height
What changed in HTML5
<a>
<!-- Now it can contain block elements. Hurray! -->
<b>
<!-- Now represents text whose typical typographic presentation is emboldened -->
<hr />
<!-- Now reprensents a thematic break in paragraph-level -->
<i>
<!-- Now represents text in an alternate voice or mood -->
<menu>
<!-- Has been redefined to be usefull for toolbars and context menues -->
<small>
<!-- Is now used to represent small print in documents, generally for legal purposes -->
<b>
<!-- Now represents importance instead of strong emphasis -->
New tags in HTML5
All I have to say is: finally.
<section>
<!-- Generic document or application section -->
<article>
<!-- INDEPENDENT piece of content of a document. E.g: Blog entry, newspaper article -->
<aside>
<!-- Content slightly related to the rest of the page. *cough* side bars *cough* -->
<hgroup>
<!-- Header of a section. E.g: To include title and subtitle, or company name and slogan type of thing -->
<header>
<!-- Group of Introductory or navigational aids. Doesn't necessarily needs to be at the top of the document, it can be the header of a section of the page -->
<footer>
<!-- Footer for a section. Can contain information about the author, copyright, etc. -->
<nav>
<!-- Section of document intended for navigation. -->
<figure>
<!-- Associate a caption with some embedded content, such as graphic or video. -->
<figcaption>
<!-- Provides caption for the previous tag's embedded content -->
<video>
<!-- Video and audio multimedia content. Very exciting tag <img src="http://jorgepedret.com/wp-includes/images/smilies/icon_smile.gif" alt=":-)" class="wp-smiley"> -->
<mark>
<!-- Run of marked text. E.g: Can be used for marking keywords of a search in a long text -->
<progress>
<!-- Represents a completion of a task. E.g: Downloading, performing series of expensive operations -->
<meter>
<!-- Represents a measurement, such as disk usage. -->
<time>
<!-- Represents a date and/or time. Very exciting tag <img src="http://jorgepedret.com/wp-includes/images/smilies/icon_smile.gif" alt=":-)" class="wp-smiley"> -->
<canvas>
<!-- Rendering dynamic bitmap graphics on the fly. Very exciting tag -->
<command>
<!-- Represents a command the user can invoke -->
<details>
<!-- Additional information or controls which user can obtain on demand -->
<datalist>
<!-- Used for creating a list of options for the new 'select' tag. -->
<keygen>
<!-- Control for key pair generation. -->
<output>
<!-- Represents some type of output. E.g: Calculation result -->
Input tag’s type attribute now has the following values:
* tel
* search
* url
* email
* datetime
* date
* month
* week
* time
* datetime-local
* number
* range
* color
Depending on the device or browser used, this can prompt change the way to input the value. For example, if browsing from an iPhone, the datetime value promts the native way for the iPhone to choose a date+time.
The type attribute can also be used for automatic browser native validation purposes.
For more details on form changes, take a look at http://diveintohtml5.org/forms.html
Visit: http://www.w3.org/TR/html5-diff/#new-attributes for more new attributes in html5 that you need to know about.
New html5 API’s
Other than tags, html5 implements a bunch of new API’s (think of it like javascript libraries) that will help you develop better applications in a faster way.
* Video & Audio: API for playing of video and audio; it can be used with the new video and audio elements.
* Offline Apps: An API that enables offline Web applications.
* Editable Content: API for editing inline content; use it with the new global contenteditable attribute.
* Drag & Drop: API for drag & drop elements; use in combination with a draggable attribute.
* History: API that exposes the history and allows pages to add to it to prevent breaking the back button.
* Geolocation: API that provides scripted access to geographical location of the device that’s browsing the site
* Local Storage: API for persistent data storage of key-value pair data in Web clients (how exciting is that!?)
Examples:
Check out html5 examples here http://html5demos.com/ they have everything and more of what I’ve said here and it’ll also tell you the current browser support.
