<dialog><dialog>
<dt> Don Juan
<dd> Voilà qui est étrange, et tu es bien mal reconnu de tes soins ;
ah ah, je m'en vais te donner un louis d'or tout à l'heure pourvu que tu veuilles jurer.
<dt> Le pauvre
<dd> Ah ! monsieur, voudriez-vous que je commisse un tel péché ?
<dt> Don Juan
<dd> Tu n'as qu'à voir si tu veux gagner un louis d'or ou non,
en voici un que je te donne si tu jures. Tiens : il faut jurer.
<dt> Le pauvre
<dd> Monsieur...
<dt> Don Juan
<dd> À moins de cela tu ne l'auras pas.
</dialog>
La balise <dialog> est déjà supportée par les versions actuelles de Firefox (3.0.7) et Internet Explorer 7.
<canvas>La balise <canvas> représente un canvas bitmap de résolution fixée, dans lequel il est possible de dessiner dynamiquement des graphes, images de jeu vidéo, ou autres objets graphiques.
<figure>Elle permet d'ajouter une légende à un contenu imbriqué (image, vidéo...) :
<figure>
<img src="images/mypicture.jpg" alt="picture" />
<legend> Mon image à moi </legend>
</figure>
<progress>Elle permet d'afficher la progression d'une tâche, par exemple un téléchargement. Voici un exemple d'utilisation :
<section>
<h2>Task Progress</h2>
<p>Progress: <progress><span id="p">0</span>%</progress></p>
<script>
var progressBar = document.getElementById('p');
function updateProgress(newValue) {
progressBar.textContent = newValue;
}
</script>
</section>
draggable permettra de déplacer un élément avec une API de drag and drop. Le document pourra être informé quand l'utilisateur glisse et dépose quelque chose à partir ou vers une autre application desktop.
Une API permettra aussi d'éditer des éléments portant l'attribut contenteditable.
<script language="javascript">
function doFormat(cmd) {
document.execCommand(cmd, null, null);
}
</script>
<button onclick="doFormat('bold');"><span style="font-weight: bold;">B</span></button>
<button onclick="doFormat('italic');"><span style="font-style: italic;">I</span></button>
<button onclick="doFormat('underline');"><span style="text-decoration:underline;">U</span></button>
<div id="editor1" contenteditable="true" style="height:50px; width: 300px; border:1px solid black;">
This is the content
</div>
Ceci permet de créer facilement un véritable éditeur WYSIWYG et se révèle bien entendu très utile dans la conception d'applications web.