Comme vous le savez, plusieurs nouvelles balises sont présentes en HTML5. En voici une autre qui est un peu moins connue/populaire.
Quelle est l’utilité de la balise <progress> ?
La balise <progress> permet d’indiquer la progression d’une tâche quelconque. Elle pourrait très bien être intégrée à des applications en ligne comme Basecamp ou toute autre application de gestion de projets. Nous pouvons facilement imaginer son utilité pour des barres de progression en nous indiquant le status d’une tâche (peu avancée, moindrement avancée, complétée, etc).
Les attributs de la balise <progress>
Cette balise peut contenir deux attributs : value et max.
L’attribut value détermine la progression d’une tâche jusqu’à maintenant tandis que l’attribut max va servir à déterminer la valeur maximale qu’une tâche peut avoir avant d’être complétée.  À noter que la valeur des deux attributs se doit d’être un float et ne doit pas dépasser 1.
Voici un exemple de l’utilisation de la balise <progress> avec une interaction Javascript :
<p>Progression de ma tâche: <progress value="0" max="1">
<span id="p"></span>%</progress></p>
<script>
var progressBar = document.getElementById('p');
progressBar.textContent = 0;
function updateProgress(newValue) {
progressBar.textContent = (newValue * 100);
}
</script>
<p><a href="#" onclick="updateProgress(1);" title="Update progress bar">
J'ai terminé cette tâche</a></p>
Pour en savoir plus sur la balise <progress>, je vous invite à lire la description complète se trouvant dans la spécification d’HTML5 du W3.
Télécharger l’exemple sur la balise progress.
