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

L’article d’aujourd’hui concerne la nouvelle balise <time> en HTML5 qui va encore une fois améliorer la sémantique de nos pages web.

La balise <time> sert à indiquer l’heure ou la date. Jusque là, tout est simple.

Elle contient deux attributs : pubdate et datetime.

L’attribut pubdate est un booléen et indique une date de publication. S’il est présent, il faut spécifier la date entre <time></time>. Un article peut contenir au maximum un élément <time> ayant l’attribut pubdate (quand même logique…).

Si l’attribut datetime est présent (ex : datetime= « 2009-10-12 »), il n’est pas nécessaire que notre élément <time> contienne quelque chose. Dans le cas contraire, nous devons spécifier la date et l’heure avec l’élément <time>.

Son utilisation

La balise <time> peut être utilisée à plusieurs endroits différents dépendamment du contenu de notre site. Pour prendre à nouveau l’exemple d’un blog, la balise <time> en HTML5 pourrait être intégrée dans l’en-tête de nos articles pour indiquer la date de publication.

Voici 4 exemples de l’utilisation de la balise <time>  :

<p>Je devrais arriver à <time>19h30</time>.</p>

Avec l’attribut pubdate

<header>
    <h3>Is HTML5 a FLASH killer?</h3>
    <p>Publié le <time pubdate>2009-10-12</time></p>
</header>

Avec l’attribut datetime

<p>Écrit le <time datetime=”2009-10-12”></time></p>

Avec l’attribut pubdate et datetime

<p>Publié <time pubdate datetime=”2009-10-12”>aujourd’hui</time></p>

Dans le dernier cas ci-dessous, nous ferions un rendu de la date dynamiquement à l’aide d’un autre langage de programmation.

<p>Publié <time pubdate datetime=”2009-10-12”></time></p>

Un autre exemple serait d’utiliser la balise pour nos tweets sur Twitter. En effet, après chaque tweet nous retrouvons l’heure à laquelle notre tweet a été publié.

Ex :

<ul id="twitter_update_list">
    <li>Comment « plugger » subtilement des mots-clés comment HTML5
    dans mon blog. <time>1 hour ago</time></li>
</ul>

La balise <time> en HTML5 sera de plus en plus utilisée dans les futurs sites web. Elle peut sembler complexe au début, mais une fois que nous comprenons bien la distinction entre les attributs pubdate et datetime, nous pouvons bien l’exploiter. C’est une autre balise avec laquelle les développeurs pourront s’amuser avec Javascript, PHP, etc.

Vous pouvez également consulter la spécification du W3C sur HTML5 concernant la balise <time>.

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