HTML 5 is planned to be the fifth major revision of the core language of the World Wide Web, HTML. In this version, new features are introduced to help web application authors, new elements are introduced based on research into prevailing authoring practices, and special attention has been given to defining clear conformance criteria for user agents in an effort to improve interoperability. It is an incremental step forward rather than a bold step as compared with XHTML 2.0 that is coming and which is intended to create an architecture that will become the host language to many other W3C technologies. The ideas behind HTML 5 were pioneered in 2004 by the Web Hypertext Application Technology Working Group (WHATWG). HTML 5 was adopted as the starting point of the work of the new HTML working group of the W3C in 2007. The HTML working group has published the First Public Working Draft of the specification on 22nd January 2008. HTML 5 should be flexible to handle incorrect syntax in contract to XHTML where the browser must refuse to render the page at all even if there is just one illegal character or missing close tag. HTML 5 is designed such that the old HTML 4 browsers will escape the new HTML 5 tags or constructs.

New Section Tags

HTML 5 introduces many new elements that partition webpage content into sections. These partitions should help search engines and other assistive technologies to better process the page. The idea of sections is cool and it is a great relief to the UI designers to better organised their code. Block levels elements like header, section, footer & nav have been added to maximise the production of web application developers. The beauty of sections can be well understood from the above new tags that have been included. Like we have now nav for structuring of navigation links and header for the header elements. These elements are similar to div or span tags except they are having some meaning and context in which they are used.

<h3 id="blog-title">My Blog Name</h3>
<p id="blog-description">Hello World!</p>
In the same way, you can have
<nav></nav>
<ul class="nav">
<li>Home</li>
</ul>

WYSIWYG Signature

Documents created with WYSIWYG editors should include a signature in the head of the document, so that the browser can know the generator and will render the page accordingly.

<meta name="generator" content="Sample Editor 1.0 (WYSIWYG editor)" />

New Block level Elements

aside element

The aside element represents a note, a tip, a sidebar, a pullquote, a parenthetical remark, or something that’s just outside the main flow of the narrative.

<aside>
<h3>Aside Representation</h3>
This is the representation of aside element.
</aside>

dialog element

The dialog element represents conversation. It contains dt elements which represent the speaker and dd elements which represents the speakers quotes. This gives reasonable display even in legacy browsers.

<dialog>
<dt> Costello
</dt>
<dd> Look, you gotta first baseman?
</dd>
<dt> Abbott
</dt>
<dd> Certainly.
</dd>
<dt> Costello
</dt>
<dd> Who's playing first?
</dd>
<dt> Abbott
</dt>
<dd> That's right.
</dd>
<dt> Costello
</dt>
<dd> When you pay off the first baseman every month, who gets the money?
</dd>
<dt> Abbott
</dt>
<dd> Every dollar of it.
</dd>
</dialog>

figure element

figure element is a cool addition to HTML 5. This is a block level element that combines image and its caption. Until this version, HTML was lacking the feature to add captions to the images. The figure element with a child legend element can be used to caption images. For example:

<figure>
<img src="kashit.jpg" alt="Photo: J. Smith" />Credit: Kashit, 2007
</figure>

New Inline Semantic Elements

mark element

As the name suggests, the mark element <m> is meant for marking the text or highlighting the text. As you will be aware of google’s searched keyword highlighting on the pages. This will be used for highlighting the searched keywords inside a page.
This is the test for <m>marked</m> text.

time element

The time element represents time of a specific moment such as 20 July, 2008, 5:30 PM.
This is the example of <time>5:35 PM, July 25, 2007</time>
This is a very important update / feature as it will help browsers to recognize the times very easily. It will also help in better search engine optimization and calendar functions.

progress element

This is similar to the progress bar that is present in today’s GUI showing progress of a particular process or activity. The progress element is very useful in showing the download or upload process with the aid of some scripting language. Its usage is like this :

Downloaded:
<progress value="1534602" max="4603807"></progress>

It has value and max as its attributes which represent the current state of process and the total amount of process to be completed respectively.

Enhancements to input element

input element has received a good response from W3C. New types have been added to input element for better differntiation of input text. The new types are :
datetime, datetime-local, date, month, week, time, number, range, email, url
The idea of these new types is that the user agent can provide the user interface, such as a calendar date picker or integration with the user’s address book and submit a defined format to the server. It gives the user a better experience as his input is checked before sending it to the server meaning there is less time to wait for feedback.

datagrid element

According to W3C specifications for HTML 5, datagrid represents an interactive representation of a tree list or tabular data. It’s intended for trees, lists, and tables that can be updated by both the user and scripts. By contrast, traditional tables are mostly intended for static data.
A datagrid gets its initial data from its contents: a table, select, or other group of HTML elements.

<datagrid>
<table><tbody>
<tr>
<td>Jones</td>
<td>Allison</td>
<td>A-</td>
<td>B+</td>
<td>A</td>
</tr>
<tr>
<td>Smith</td>
<td>Johnny</td>
<td>A</td>
<td>C+</td>
<td>A</td>
</tr>
<tr>
<td>Willis</td>
<td>Sydney</td>
<td>C-</td>
<td>D</td>
<td>F</td>
</tr>
<tr>
<td>Wilson</td>
<td>Frank</td>
<td>B-</td>
<td>B+</td>
<td>A</td>
</tr>
</tbody></table>
</datagrid>

What distinguishes this from a regular table is that the user can select rows, columns, and cells; collapse rows, columns, and cells; edit cells; delete rows, columns, and cells; sort the grid; and otherwise interact with the data directly in the browser on the client. The JavaScript code monitors the updates.

Embedded Media

HTML 5 will contain two new elements for media. New audio & video elements will make a uniform way of embedding media inside webpages. As today different vendors are using different media types on their sites (like Microsoft uses Windows Media, Apple uses Quicktime, Adobe uses Flash), thus resulting in diversity in the embedding of media. These elements may contain a way for better searching and accessible to blind or deaf users. Their usage is :

<audio autoplay="autoplay">
This is the podcast on DrupalWelcome to Drupal podcast...
</audio>

Similarly for video the usage will be same with support of deaf & blind people.

<video>
This is the descrption of movie...
</video>

Whether any one format and codec will be preferred is still under debate. Probably Ogg Theora support at least will be strongly recommended, if not required.

Conclusion

HTML 5 is part of the future of the Web and is a reaction to the slow progress made by W3C in delivering replacement to HTML 4. Its new elements enable clearer, simpler markup that makes pages more obvious. Div and span still have their places, but those places are much more restricted than they used to be.
Although not all browsers will support these new elements at first, the same has been true for most elements introduced after HTML was first invented: img, table, object, and many more. Support will come with time. In the meantime, HTML’s must-ignore behavior for unrecognized elements means that users with legacy browsers will still be able to read HTML 5 pages. They can do so today. Users with more modern browsers will get an enhanced experience, but no one will be left out. HTML 5 restores some of the excitement of the early days when Netscape, Microsoft, and others were introducing new elements every other week. At the same time, it takes a much more careful approach to defining these elements so that everyone can use them interoperably. The future looks bright.

Further reading

Latest version of W3c draft for HTML 5
Ogg - The next generation open video format
Conversation with HTML 5 team

(1 votes, average: 1 out of 5)

 Loading ...

Trackback URI | Comments RSS