HTML5 new tags and old tags with new behavior: ruby, rt, rp, bdi, wbr, canvas, command, menu, details, summary, datalist, keygen, output, address, div

HTML5 Logo

<ruby> / <rt> / <rp>

Ruby annotations are short runs of text presented alongside base text, primarily used in East Asian typography as a guide for pronunciation or to include other annotations.

<bdi>

The bdi element represents a span of text that is to be isolated from its surroundings for the purposes of bidirectional text formatting. For example to display an Arabic word from right to the left, in an English document where all the text flows from left to the right.


<article>
	<p>This is article is in english, the text flow is left to right, but this word <bdi>reverse</bdi> is an exception, it's flow is from right to left.</p>
</article>

<wbr>

This tag indicates that if useful the browser may add a line break if it doesn't fit into the surrounding space. So if there is not enough space, the browser will add a <br> tag at the location of the <wbr> tag.

Put this example in your browser an resize the window, you will notice that


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>wbr</title>
    </head>
    <body>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id eleifend odio. Sed eget fermentum nisi. Donec posuere, nulla eget lobortis mattis, <wbr>(the &lt;wbr&gt; is here) quam dolor commodo dolor, ac hendrerit mi orci ut mauris. Donec sed lectus dui, vel gravida urna. Mauris vulputate nulla at est tincidunt a euismod leo commodo. Pellentesque pretium sapien pellentesque dui volutpat dictum. </p>
        <p>Llllooorrreeeemmmm<wbr>(&lt;wbr&gt;)iiiiippppppsssssuuuuummmmmm</p>
        <p>Llllooorrreeeemmmmmmiiiiiiiippppppsssssuuuuuuummmmmmm</p>
    </body>
</html>

<canvas>

The canvas tag is a lot more then just a tag for rendering bitmap images using a native browser API. The canvas area allows you to paint an image using coordinates, to animate that image using javascript and even let the user control the rendered image to create a game like interaction.

When setting the size of a canvas area use the canvas tag width and height attributes, if you change the size of the canvas area using CSS, it will act like an image of smaller (or bigger) size that got scaled up to fit the dimensions defined by the css. This might afterwards be problematic depending on how you measure distances, because the size of the coordinate space does not necessarily represent the size of the actual bitmap, if you modify the size using css instead of the width and height attributes of the tag.

Check out HTML5canvastutorials for lots of canvas tutorials and examples.

For IE (Internet Explorer) there is a javascript polyfill library that emulates canvas in older IE version by using SVG graphics instead of canvas, that library is called excanvas.

Examples of a games done with canvas are Angry Birds HTML5 and cut the rope HTML5.

Can i use it today?

Yes and no. Unfortunately a lot of older browser especially IE don't support it. If you make a web app mobile game, you should consider using canvas. For IE you have the possibility to use excanvas but apparently it is slow and does not work in every situation. Will canvas replace flash animations in the future, probably yes, can i use them now, that depends of your audience.

Canvas example

Here is a very basic example, for more examples check out the mozilla developer network page about canvas.


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>html5 line canvas</title>
        <script>
		
            function initialize() {

                var canvas = document.getElementById('example');

                if (canvas.getContext) {

                    var context = canvas.getContext('2d');

                    fillRectangle(context);
                    drawLine(context);

                }

            }

            function drawLine(context) {

                context.moveTo(100, 150);
                context.lineTo(250, 50);
                context.stroke();

            }

            function fillRectangle(context) {

                var gradient = context.createLinearGradient(0, 0, 0, 100);
                gradient.addColorStop(0, "#ff005a");
                gradient.addColorStop(1, "#ff985a");

                context.fillStyle = gradient;
                context.fillRect(50, 50, 150, 150);

            }
			
        </script>
        <style>
            canvas { 
                border: 1px solid blue;
            }
        </style>
    </head>
    <body onLoad="initialize();">
        <canvas id="example" width="500" height="300">Your browser does not support canvas ... go away!</canvas>
    </body>
</html>

3D <canvas> aka WebGL

If we talk about 3D canvas, in fact we mean WebGL. WebGL is an open standard from WebGL Working Group which is not a w3c group, it's from the Khronos Group a non profit organization.

A nice 3D (canvas) javascript library is three.js, lots of examples can be found in the three.js github repository.

<command> / <menu>

A menu of commands for keyboard shortcuts or other javascript functions by using attributes like the onclick attribute.


<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>html5 command menu</title>
	</head>
	<body>
		<menu type="toolbar">
			<command type="radio" radiogroup="alignment" checked="checked" label="Left" icon="icons/left.png" onclick="alert('left')">
			<command type="radio" radiogroup="alignment" label="Right" icon="icons/right.png" onclick="alert('right')">
			<hr>
			<command type="command" disabled label="Publish" icon="icons/disabled.png" onclick="alert('disabled')">
		</menu>
	</body>
</html>

There are moments when i ask myself, "what did they think when writing the HTML5 specification", when i look at menu and commands it is such a moment ;) .

As far as i know, no browser vendor has implemented this tag yet.

<details> / <summary>

A widget to show / hide additional information. Here is an example that works in chrome > 18:


<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>html5 details</title>
	</head>
	<body>
		<details>
			<summary>summary</summary>
			<p>Additional Data.</p>
		</details>
	</body>
</html>

<datalist>

A list of options to add suggestions to an input field. Here is an example that works in firefox > 8:


<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>html5 datalist</title>
	</head>
	<body>
		<form>
			<input list="browsers">
			<datalist id="browsers">
				<option value="Chrome">
				<option value="Firefox">
				<option value="Safari">
				<option value="Internet Explorer">
				<option value="Opera">
			</datalist>
		</form>
	</body>
</html>

You can place fallback code between the datalist tags. Everything between the datalist tag will be only be displayed to browsers that don't support the datalist element, similar to the video or audio tag behavior. For example, you could place a select box tag with options between the datalist tag, so users which have an HTML5 ready browser will get an input field with suggestions from the datalist, other users with non modern browser will get a select box. An alternative to this would be to use a javascript library, for example the combobox widget / data store from dojo toolkit or autocomplete from jQuery.


<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>html5 datalist</title>
	</head>
	<body>
		<form>

			<label>Enter the name of the country you are living in:</label>
			<input id="country" type="text" list="countrynames">
			<datalist id="countrynames">
			  <label>or select it from the list:</label>
			  <select id="countryselection">
				<option value="luxembourg">luxembourg</option>
				<option value="germany">germany</option>
				<option value="belgium">belgium</option>
				<option value="france">france</option>
			  </select>
			</datalist>
			
		</form>
	</body>
</html>

<keygen>

Public / private key pair generator, it's purpose is to provide a secure way to authenticate users. When the form is submitted, the private key is stored in the "local secure keystore", and the public key is packaged and sent to the server with the other form data.

Check out this two articles which explain the use of keygen: the w3c page, whatwg mailinglist and mozilla dev zone, far better then i could.


<form>
    <keygen keytype="rsa" challenge="some_string_added_to_key" name="key">
    <input type="submit">
</form>

<output>

Form field for output.

<address>

You are right, this tag was already available in html4.01! But in HTML4 the address always referring to the document owner / maintainer, in HTML5 address can be placed in an article and then represents the address of the article author. For instance an address tag inside of a point of interest description would be interpreted as the POIs address instead of the websites owners personal address.

Inside of the address tag you can add the name of the person, a link to his social profile, his e-maill address, but not a personal address. If you want to add semantic value to a personal address, use microformats like hcard and add your street name, town, ... but don't use the address tag.

<dialog>

I wanted to mention this tag even if it got removed from the HTML5 specification because i think it was a great tag that would enhance the semantic meaning of a document as much as article does.

The goal of this tag was to delimiter comments / conversations or a discussion section of a document.

The html5docotor dialog article.

A developer from Microsoft asked for this tag to be removed because they wouldn't have time to implement it. This was already enough to be removed. If one browser vendor says he won't implement a feature that enough to kill that feature, it's like a veto.

<div>

I know this one is not new, but with all the new semantic tags, you could wonder if there is still use for div and / or span.

Yes there is, use divs every time there is no tag with a semantic value that could replace it, or for content where you don' want to add semantic value because you just won't to be able to style it's content using CSS.