Attributs Html 5

Certains attributs sont globaux et s' appliquentà tout élément , d' autres sont spécifiques à un ou plusieurs éléments et n' ont de sens que dans ce contexte.

.

Attributs Globaux

accesskey   class   contenteditable   contextmenu dir   draggable   hidden   id   itemid   itemprop   itemref   itemscope   itemtype   lang   spellcheck   style   tabindex   title

Attribut accesskey

acceskey="caractères séparés par un espace"

Cet attribut s' applique à tous les éléments.

Permet à un utilisateur d' accéder directement à l' élément ou de le déclencher en tapant une touche de clavier . En fonction du navigateur et du système d' exploitation de l' utilisateur, des touches de contrôles peuvent être nécessaires

Attribut class

class="mots séparé par un espace"

Cet attribut s' applique à tous les éléments.

Principalement utilisé pour déterminer le format d' affichage dans le navigateur par l' utilisation de styles CCS.

Un élément peut appartenir à plusieurs classes.

Attribut contenteditable

contenteditable="true ou false"

Cet attribut s' applique à tous les éléments.

Un élément peut être modifié par l' utilisateur si son attribut contenteditable est "true" ou si lentement parent est sur "true" sans qu 'il ne soit lui-meme sur "false".

Exemple :

Cette ligne est éditable , son attribut conteneditable est sur "true"

Attribut contextmenu

contextmenu="texte"

Cet attribut s' applique à tous les éléments.

Permet à un élément d' avoir un menu contextuel apparaissant lorsque l' on clique sur cet élément. Le texte de contextmenu revoit à l' id de l' élément menu concerné.

Voici un exemple pour un menu contextuel sur une balise input:

Attribut dir

dir="rtl ou ltr"

Cet attribut s' applique à tous les éléments.

L' attribut dir ne peut prendre que deux valeurs "rtl" ou "ltr" . Il précise le sens de lecture de l' élément: droite à gauche ou gauche à droite.

Attribut draggable

draggable="true ou false"

Cet attribut s' applique à tous les éléments.

Précise si l' élément peut être déplacé avec la souris. Si non précisé la valeur par défaut est "auto". Dans ce cas la valeur dépend de l' élément concerné. par défaut les éléments "img" et "a href" sont à "true"

exemple : drag and drop

Attribut hidden

hidden

Cet attribut s' applique à tous les éléments.

L' attribut hidden ne prend aucune valeur, lorsqu 'il est présent, lentement quoi que restant actif, ne doit pas être affiché par le navigateur.

Exemple: la ligne ci-dessous a l' attribut hidden .

Cette ligne ayant l' attribut ne devrait pas s' afficher dans un navigateur compatible html 5

Attribut id

id="texte"

Cet attribut s' applique à tous les éléments.

L' attribut id précise un identifiant unique pour l' élément.

Cet attribut est utilisé pour de nombreuses raisons, les principales étant, de pouvoir avoir un lien conduisant directement vers l' élément et de pouvoir définir un style CSS particulier pour cet élément.

Attribut itemid

itemid="URL"

Cet attribut s' applique à tous les éléments.

L' attribut itemid, s' il est utilisé, doit indiquer une URL valide. Il ne doit pas être indiqué sur des éléments ne possédant pas également les attributs itemscope et itemtype .

Attribut itemprop

itemprop="texte"

Cet attribut s' applique à tous les éléments.

Itemprop définit la propriété de l' élément

Détails et discussion

Attribut itemref

itemref="mots séparés par un espace"

Cet attribut s' applique à tous les éléments.

itemref contient l' "id" des éléments inclus dans l' élément lui-même. Itemref ne doit pas être spécifié sur un élément ne possédant pas d' attribut itemscope

Attribut itemscope

itemscope

Cet attribut s' applique à tous les éléments.

L' attribut itemscope ne prend aucune valeur. Il indique que l' élément comprend plusieurs éléments définissant une "mirco data"

Exemple : une chanson définie par son auteur, son chanteur, son titre , l' URL où elle est disponible etc.
ou comme dans le code suivant la Vcard de Jack Bauer

<section id="jack" itemscope itemtype="http://microformats.org/profile/hcard"> <h1 itemprop="fn">Jack Bauer</h1> <img itemprop="photo" alt="" src="jack-bauer.jpg"> <p itemprop="org" itemscope> <span itemprop="organization-name">Counter-Terrorist Unit</span> (<span itemprop="organization-unit">Los Angeles Division</span>) </p> <p> <span itemprop="adr" itemscope> <span itemprop="street-address">10201 W. Pico Blvd.</span><br> <span itemprop="locality">Los Angeles</span>, <span itemprop="region">CA</span> <span itemprop="postal-code">90064</span><br> <span itemprop="country-name">United States</span><br> </span> <span itemprop="geo">34.052339;-118.410623</span> </p> <h2>Assorted Contact Methods</h2> <ul> <li itemprop="tel" itemscope><span itemprop="value">+1 (310) 597 3781</span> <span itemprop="type">work</span> <meta itemprop="type" content="pref"></li> <li><a itemprop="url" href="http://en.wikipedia.org/wiki/Jack_Bauer">I'm on Wikipedia</a> so you can leave a message on my user talk page.</li> <li><a itemprop="url" href="http://www.jackbauerfacts.com/">Jack Bauer Facts</a></li> <li itemprop="email"><a href="mailto:j.bauer@la.ctu.gov.invalid">j.bauer@la.ctu.gov.invalid</a></li> <li itemprop="tel" itemscope><span itemprop="value">+1 (310) 555 3781</span> <span><meta itemprop="type" content="cell">mobile phone</span></li> </ul> <p itemprop="note">If I'm out in the field, you may be better off contacting <span itemprop="agent" itemscope itemtype="http://microformats.org/profile/hcard"><a itemprop="email" href="mailto:c.obrian@la.ctu.gov.invalid"><span itemprop="fn">Chloe O'Brian</span></a></span> if it's about work, or ask <span itemprop="agent">Tony Almeida</span> if you're interested in the CTU five-a-side football team we're trying to get going.</p> <ins datetime="2008-07-20T21:00:00+0100"> <span itemprop="rev" itemscope> <meta itemprop="type" content="date-time"> <meta itemprop="value" content="2008-07-20T21:00:00+0100"> </span> <p itemprop="tel" itemscope><strong>Update!</strong> My new <span itemprop="type">home</span> phone number is <span itemprop="value">01632 960 123</span>. </ins> </section>

Attribut itemtype

Itemtype= "url"

Cet attribut s' applique à tous les éléments.

itemtype s' il est spécifié doit contenir une url valide. Il revoit vers la spécification du type de l' élément utilisé.

Voir l' exemple ci-dessus sur Jack Bauer : <section id="jack" itemscope itemtype="http://microformats.org/profile/hcard">

Attribut lang

lang="BCP47"

Cet attribut s' applique à tous les éléments.

L' attribut lang indique la langue utilisée dans l' élément. Il n' est utile de le préciser que s' il diffère du reste du document. Le texte de l' attribut lang doit répondre à la norme BCP47 . Pour le français il suffit d' indiquer "fr" .

Attribut spellcheck

spellcheck="true ou false"

Cet attribut s' applique à tous les éléments.

L' attribut spellcheck indique si oui ou non le contenu de l' élément doit être soumis au correcteur orthographique et grammatical.

Attribut style

style="CSS"

Cet attribut s' applique à tous les éléments.

l' attrubut style indique le style d' affichage que doit utiliser le navigateur pour afficher l' élément.