Wednesday, July 27, 2011

Periodic Table of HTML5 Elements

You've already known the periodic table of elements in chemistry from your early school days.
How about a periodic table for HTML5 elements?

Josh Duck prepared the following HTML5 periodic table showing the 106 elements currently in working HTML5 draft and two proposed elements.


You can view the original HTML5 periodic table from Josh Duck's web site. You can even interact and see descriptions of each element. It is very useful, try it.


HTML5, Still a draft

HTML4 has been standart since 1997 and there is unquestionably  a need for a better standard. HTML5 will be the latest HTML standart but it is still under development.

HTML5 is still a draft but many browsers have already started to adopt it. It is good to see the potentials of HTML5 before it is fully released. However, there are also some criticism over this strategy. Different browsers' adopting different draft versions will make them incompatible with each other and this will cause the same website will not look same in different browsers.

Some HTML5 Miracles

Check-out the following links and see how HTML5 will change web experience:

New HTML5 Tags

HTML5 specification contains not only some new elements but also scripting API, dom extensions etc.. In addition to following new HTML5 elements some HTML4 tags such as acronym, applet are not supported. There are also lots of changes in syntax and element attributes.

Tag Description
<audio> Defines sound content
<canvas> Defines graphics
<command> Defines a command button
<datalist> Defines a dropdown list
<details> Defines details of an element
<embed> Defines external interactive content or plugin
<figcaption> Defines the caption of a figure element
<figure> Defines a group of media content, and their caption
<footer> Defines a footer for a section or page
<header> Defines a header for a section or page
<hgroup> Defines information about a section in a document
<keygen> Defines a generated key in a form
<mark> Defines marked text
<meter> Defines measurement within a predefined range
<nav> Defines navigation links
<output> Defines some types of output
<progress> Defines progress of a task of any kind
<rp> Used in ruby annotations to define what to show if a browser does not support the ruby element
<rt> Defines explanation to ruby annotations
<ruby> Defines ruby annotations
<section> Defines a section
<source> Defines media resources
<summary> Defines the header of a "detail" element
<time> Defines a date/time
<video> Defines a video
<wbr> Defines a possible line-break
<article> Defines an article
<aside> Defines content aside from the page content


Examples

<audio>
Defines sound content
<audio controls="controls">
  <source src="horse.ogg" type="audio/ogg" />
  <source src="horse.mp3" type="audio/mp3" />
  Your browser does not support the audio element.
</audio>


<details>
Defines details of an element. Only Chrome Support
<details>
<summary>Copyright 1999-2011.</summary>
<p>All pages and graphics on this web site...</p>
</details>



Copyright 1999-2011.
All pages and graphics on this web site are the property of the company Refsnes Data.


<figure>,  <figcaption>
Defines a group of media content, and their caption
<figure>
  <figcaption>A view of birds</figcaption>
  <img src="Hareketli-Gun-Batimi.gif" width="304" height="228" />
</figure>

A view of birds



More

For more information checkout the following resources:
Wiki: HTML5
WHATWG HTML Specs
W3 School HTML5 Reference
HTML5 differences from HTML4
A Web Developer’s Guide to HTML 5
30 Must See HTML5 Tutorials
Build your First Game with HTML5

2 comments:

  1. The HTML5 is developed to solve the compatibility problem that affects the current standard of html4. The goal of html5 is to support the audio, video and canvas tags.
    HTML5 training in Chennai | Html5 training chennai

    ReplyDelete