HTML5header


HTML5 Tags

Tracking the 28 new HTML5 tags.

August 31, 2013

I wanted to know at a glance how each browser handled the new HTML5 elements. To do this I used the tags listed as new from www.W3schools.com/tags/ since they reflect the tags which have been implemented in browsers.

The table to the right accomplishes this by simply showing the actual execution of the elements based on the current browser in use.

If you change to a newer version of a browser or the implementation for any browser changes the current state is always known without any code changes.

In attempting to use these elements it is important to know what they are supposed to do, which ones have been implemented in any browser at any given point in their development and what the actual output will be. There are also small differences that are only found after you have implemented an element, e.g. Google Chrome will display an ogg video but it will skip ahead after the beginning. Note: This has been fixed in the latest version.
The definitions for each specific element are easily available, with example code, from many sources across the web.

The table uses code snippets (shown below) to reveal what each browser actual produces as a result of execution and what should be expected from each element.

<h3>article</h3>
<article>This is an article.</article>

<h3>aside</h3>
<article>
This is an article.
<aside>
This is an aside.
</aside>
<article>

<h3>audio</h3>
<audio controls="controls" >
<source src="audiovideo/audio.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>

<h3>bdi</h3>
<ul>
<li>Name <bdi>Jack</bdi>: 32 years old</li>
<li>Name <bdi>إيان</bdi >: 12 years old </li >
</ul>

<h3>canvas</h3>
<canvas id="canvas" width="200" height="50"></canvas>

<h3>datalist</h3>
<input list="code" />
<datalist id="code">
<option value="AJAX">
<option value="HTML 4">
<option value="HTML 5">
<option value="PHP">
</datalist>

<h3>details</h3>
<details>
<summary>Summary</summary>
<p>Should only see this if user clicks on summary.</p>
</details>

<h3>embed</h3>
; <embed src="images/realindian100x133.jpg" width="100" height="133" >

<h3>figcaption</h3>
<figure>
<img src="images/giraffe.gif" alt="A giraffe" width="140" height="113" />
<figcaption>See the giraffe yet?</figcaption>
</figure><br>

<h3>figure</h3>
<figure>
<img src="images/giraffe.gif" alt="A giraffe" width="140" height="113" />
<figcaption>See the giraffe yet?</figcaption>
</figure><br>

<h3>footer</h3>
<footer>
Copyright 2011 by coreHTML5.com. All rights reserved.
</footer><br><br>

<h3>header</h3>
<header>
This is a header.
</header>

<h3>keygen</h3>
Name:<input type="text" name="username" />
Encryption: <keygen name="aspect" /><br><br>

<h3>mark</h3>
<p>There are approximately <mark style="background-color:yellow;"> 2 billion people </mark> who access the internet via the web, <mark style="background-color:yellow;">1 billion</mark> live in Asia.</p>

<h3>meter</h3>
<meter min="0" max="100" value="25">
Your browser does not support the meter element.
</meter>

<h3>nav</h3>
<nav>
This is a nav tag.
</nav><br><br>

<h3>output</h3>
<form onsubmit="return false" oninput="c.value = a.valueAsNumber * b.valueAsNumber">
<input name=a type=number><br><input name=b type=number > X<br>__________<br>
= <output name=c ></output><br>
</form>

<h3>progress</h3>
<progress max="100" value="25"></progress>

<h3>rp</h3>
See the HTML5 ruby tag.<br>

<h3>rt</h3>
See the HTML5 ruby tag.<br>

<h3>ruby</h3>
The HTML5 ruby tag is used for specifying Ruby annotations, which is used in East Asian typography.<br>

<h3>section</h3>
<p>There is a lot of debate about precisely what this tag is for and how it relates to the article tag.</p>

<h3>source</h3>
<audio controls="controls">
<source src="audiovideo/explosion.wav" type="audio/wav" />
Your browser does not support the audio element.
</audio>

<h3>summary</h3>
<details>
<summary>Summary</summary>
<p>Should only see this if user clicks on summary.</p>
</details>

<h3>time</h3>
<p>The Swiss mathematician Leonhard Euler was born on <time datetime="1707-04-15">April 15, 1707</time></p>

<h3>track</h3>
<video src="audiovideo/yellowstone2011.ogg" width="200" controls="controls">>
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
This browser does not support the HTML 5 video tag.
</video>

<h3>video</h3>
<video src="audiovideo/yellowstone2011.ogg" width="200" controls="controls">
This browser does not support the HTML 5 video tag.
</video>

<h3>wbr</h3>
The javascript object XML<wbr>Http<wbr>Request rocks.