WebPetit

Cet article recense la liste des attributs globaux HTML. Ce sont les attributs applicables à tous les éléments HTML.

acesskey

L’attribut accesskey sert à définir des raccourcis clavier afin d’activer un élément ou de lui donner le focus. Par exemple : un raccourci présents sur beaucoup de sites qui ont un moteur de recherche global comme… Web-Petit bien sûr qui utilise la touche F comme raccourci. À partir de Mozilla Firefox, Il faut faire la combinaison de touches : Alt+Shift+F (petite gymnastique digitale ).

<form action="" method="get"><input type="text" name="champ" accesskey="Z"></form>

class

L’attribut class permet de regrouper plusieurs éléments afin de leur appliquer un style commun (css). Un élément peut d’ailleurs avoir plusieurs classes.

<ul>
<li class="vert italique">vert & italique</li>
<li class="italique gras">italique & gras</li>
<li class="vert gras">vert & gras</li>
</ul>

.vert { color:green; }
.italique { font-style:italic; }
.gras { font-weight:bold; }

id

L’attribut id permet de donner un identifiant à un élément. Il peut être utilisé par CSS afin d’y appliquer un style ou encore dans des traitements Javascript. Il constitue une ancre dans la page.

<ul>
<li id="gras">vert & italique</li>
<li id="italique">italique & gras</li>
<li id="barre">vert & gras</li>
</ul>

#barre { text-decoration:line-through; }
#italique { font-style:italic; }
#gras { font-weight:bold; }

contenteditable

L’attribut contenteditable permet de définir si un élément peut être modifié ou pas.

<p contenteditable="true">Le contenu de ce paragraphe peut être modifié. Lâchez vous !</p>

dir

L’attribut dir permet de définir le sens de lecture d’un élement. Il peut pendre comme valeur ltr (left to right = de gauche à droite) qui est la valeur par défaut ou rtl (right to lefft = de droite à gauche).

<p dir="rtl"> إتش‌تي‌إم‌إل </p>

hidden

L’attribut hidden permet de dire au navigateur si un élément est visible ou pas. Il peut prendre comme valeur true ou false.

<ul>
<li hidden="true">Élément de liste invisible</li>
<li hidden="false">Élément de liste visible</li>
</ul>

lang

L’attribut lang permet de définir la langue d’un élément. En général, on l’utilise quand on veut insérer du contenu dans une langue différente de la langue de document HTML courant.

<ul>
<li lang="en">hello</li>
<li lang="de">hallo</li>
<li lang="it">ciao</li>
</ul>

spellcheck

L’attribut spellcheck permet de dire au navigateur si vous voulez ou non que le correcteur orthographique soit appliqué sur un élément. Bien entendu, il faut que votre navigateur intègre un correcteur orthographique et que vous n’ayez pas désactivé pas celui-ci.

<form action="" method="get">
<input type="text" name="corrige" spellcheck="true" value="Nimportnawak koi j'rakonte !" />
<input type="text" name="non-corrige" spellcheck="false" value="Nimportnawak koi j'rakonte !" />
</form>

style

L’attribut style permet d’appliquer un style CSS sur un élément.

<p style="font-style:italic;color:maroon;">Texte en italique de couleur bordeaux.<p>

tabindex

L’attribut tabindex permet de modifier l’ordre naturel de parcours d’un document, sa valeur doit être de type numérique entier. Par exemple, en tabulant les éléments pour lesquels tabindex a été renseigné recevront le focus en premier, dans l’ordre croissant de valeur.

<form action="" method="get">
<input type="text" name="text1" value="1" tabindex="1" />
<input type="text" name="text3" value="3" tabindex="3" />
<input type="text" name="text2" value="2" tabindex="2" />
</form>

title

L’attribut title permet de définir un texte d’infobulle qui apparaîtra lors du passage de la souris sur un élément.

<abbr title="Read The Fucking Manual">RTFM</abbr>

draggable

L’attribut draggable permet de définir si un élément peut être déplacé ou pas. On ne va pas ici entrer dans les détails mais cet attribut permet de glisser/déposer des éléments.

<p style="height:40px;width:40px;background:blue;" draggable="true"></p>

contextmenu

L’attribut contextmenu permet de lier un élément à un menu via l’id de ce dernier. Les menus (balise menu) permettent de créer, selon le type, des menus contextuels ou des barre d’outils. N’ayant pas de navigateur qui supporte cette fonctionnalité à l’heure où j’écris ces lignes je vous ai remis l’exemple donné par le W3C.

<form name="npc">
 <label>Character name: <input name=char type=text contextmenu=namemenu required></label>
 <menu type="toolbar" id=namemenu>
  <command label="Pick random name" onclick="document.forms.npc.elements.char.value = getRandomName()">
  <command label="Prefill other fields based on name" onclick="prefillFields(document.forms.npc.elements.char.value)">
 </menu>
</form>