html5

Le nom le dit, la balise <datalist> est une liste contenant des données. Mais n’existe-t-il pas déjà la balise <select> qui s’occupe de nous afficher des éléments dans une liste? Oui, mais la balise <datalist>, elle, nous l’associons avec un autre élément du formulaire comme un champ texte par exemple.

Cette nouvelle sorte de liste est en quelque sorte plus permissive dans le sens qu’elle nous suggère diverses options, mais nous ne sommes pas absolument obligés de choisir une de ces options là. Nous pouvons entrer notre propre valeur si la liste ne nous suggère pas ce que nous voulons.

Compatibilité

Pour l’instant, cette nouveauté d’HTML5 semble seulement fonctionner sur Opera. Firefox, Chrome et Safari devraient supporter cette balise dans leur prochaine version.

À savoir

Un peu comme lorsque nous associons un label et son champ respectif à l’aide de l’attribut for, cette fois, c’est avec l’attribut list que nous associons une liste à un champ texte.

Exemple

<form method="post" action="">
    <ul>
        <li><label for="txtMetier">Quel est votre métier?</label></li>
        <li><input type="text" list="metiers" autofocus /></li>
        <li>
            <datalist id="metiers">
                <option>Designer Web</option>
                <option>Integrateur Web</option>
                <option>Programmeur</option>
            </datalist>
        </li>
    </ul>
</form>

Consultez l’exemple de balise datalist en HTML5.

Consultez la spec d’HTML5 pour en savoir davantage sur la balise <datalist>.

Tweet This Post

Voilà une balise intéressante à utiliser dès maintenant pour ceux qui utilise déjà HTML5.

Si je reprends la définition du W3C :

The hgroup element represents the heading of a section. The element is used to group a set of h1–h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines.

Donc en gros, la balise <hgroup> permet de regrouper plusieurs éléments décrivant un en-tête de section. (ex : titre avec un sous-titre ou titre avec un slogan, etc)

Imaginons par exemple un site web corporatif qui à son logo et un slogan en dessous.

Le code approprié serait :

<header>
    <hgroup>
        <h1 id="logo">Budget en ligne</h1>
        <h2>Planifier son budget intelligemment</h2>
    </hgroup>
</header>


C’est simple, efficace et on comprend plus facilement l’intention en analysant le code source.

Tweet This Post