Attributs généraux pour tous les éléments HTML

Nouveaux attributs en HTML5

Attributs généraux

Les attributs suivants peuvent s'utiliser dans tous les éléments HTML suivant:
<balise attribut="value">
attribut peut être:
accesskey="key"
permet de spécifier la touche key comme raccourci clavier, par exemple
<a href="http://xymaths.free.fr" target="_blank" accesskey="x">accueil de maths</a>
Affichage/Résultat: accueil de maths
Le raccourci s'appelle de manière spécifique pour chaque navigateur; pour Firfox par exemple, avec la combinaison [Alt]+[Shift]+key
(essayer ici, sur cette page, la combinaison[Alt]+[Shift]+x)
class="classname"
attribut de style css: le style css classname sera appliqué, par exemple
<style>
  .it{font-style:italic}
  .ul{text-decoration:underline}
</style>

<span class="it ul">texte en italique et souligné&hellip;</span>
Affichage/Résultat: texte en italique et souligné…
id="idname"
attribut l'identifiant idname à l'élément. Cet attribution peut être utilisée sur n'importe quel élément en HTML5, (mais pas en HTML).
Cet identifiant peut être utilisé pour appliquer un style css, ou cibler une action en javascript par exemple, ou comme ancre dans un lien interne à une page (voir par exemple déplacement doux et continu (smooth scrolling) dans une page en javascript)
lang="lang_code"
spécifie la langue du contenu de l'élement. Cet attribution peut être utilisée sur n'importe quel élément en HTML5, (mais pas en HTML, et même si l'intérêt semble parfois limité).
lang_code est le code normalisé de la langue, "fr" pour français, "en" pour l'anglais et "es" pour l'espagnol.
La liste des autres codes sont là.
style="style"
spécifie les élements de style à appliquer à l'élément, passant outre les spécifications de style données précédemment si nécessaire. Par exemple,
<span style="font-size:2em;border:0.5em groove violet;margin:1em">
Un style un peu différent</span>

Affichage/Résultat: Un style un peu différent
title="text"
spécifie une information supplémentaire sur le contenu de l'élément. Contenu affiché par défaut lorsque l'utilisateur passe la souris au-dessus de l'élément.
En HTML5, l'attribut title peut être utilisé sur n'importe quel élément. Par exemple,
<span title="Une information ici inutile sur un texte sans intérêt">Un texte vide d'intérêt</span>
Affichage/Résultat: Un texte vide d'intérêt

Nouveaux attributs HTML5

De nouveaux attributs ont été introduits en HTML5, applicables aussi à n'importe quel élément HTML, permettant d'ajouter des spécifications de comportement (à coupler alors avec du php ou javascript), ou sémantique (comme l'attribut rel de la balise <a>)
contenteditable="true|false" (défaut: false)
rend le contenu éditable, par exemple
<span contenteditable="true">Zone éditable …</span>
Affichage/Résultat: Zone éditable …
contexmenu="" (défaut: false)
permet de spécifier un menu contextuel pour l'élément, plus précisément, d'ajouter des entrées au menu contextuel par défaut du navigateur, par exemple:
<span contextmenu="menutest"
      style="border:1px solid red;background-color:green">Click droit ici !
<menu type="context" id="menutest">
  <menuitem label="Home" 
            onclick="window.open('http://xymaths.free.fr');">
  </menuitem>
  <menuitem label="Refresh" onclick="window.location.reload();">
  </menuitem>
  <menu label="Twitter">
    <menuitem 
      label="twit" 
      icon="/include/twitter-icone-32.png" 
      onclick="window.open('//twitter.com/intent/tweet?text=' + window.location.href);">
    </menuitem>
    <menuitem 
      label="Facebook" 
      icon="/include/facebook-icone-32.png" 
      onclick="window.open('//facebook.com/sharer/sharer.php?u=' + window.location.href);">
    </menuitem>
    <menuitem label="Bof non en fait"></menuitem>
  </menu>
  <menuitem 
    label="Envoyer la page par mail" 
    onclick="window.location='mailto:?body='+window.location.href;">
  </menuitem>
</menu>
</span>
Affichage/Résultat: Click droit ici !
draggable="true|false|auto"
spécifie si on peut déplacer un élément en cliquant/déplaçant (drag element).
Par défaut, les liens et images sont déplacables (draggable="auto").
A allier à javascript pour spécifier/contrôler le déplacement. Par exemple:
<script>
    function drag(ev) {
      ev.dataTransfer.setData("Text", ev.target.id);
    }
  </script>
  <span draggable="true" 
        ondragstart="drag(event)" 
        style="border:2px solid red">
          Un peu de texte déplaçable&hellip;
  </span>
  
Affichage/Résultat: Un peu de texte déplaçable…
Voir un exemple complet, avec cadre cible du déplacement, .
hidden
permet de cacher l'élément concerné. Cet attribut est amené à être modifié par javascript ou php. Par exemple:
<span hidden>Du texte non visible&hellip;></span>
<span>&hellip; alors que celui, est lisible</span>
Affichage/Résultat: … alors que celui, est lisible
spellcheck="true|false"
spécifie si le texte contenu dans l'élément doit être vérifié, orhographique et grammaire. Par exemple,
<span contenteditable="true" spellcheck="true" style="border:2px solid green">
Un text modifialbe à loisir, dans lequel les erreurs de farppe ne
passernt pas inaperçues</span>
Affichage/Résultat: Un text modifialbe à loisir, dans lequel les erreurs de farppe ne passernt pas inaperçues
translate="yes|no"
spécifie si le contenu de l'élément peut ou non être traduit, en particulier par les traducteurs automatiques.

Voir aussi: