Les attributs suivants peuvent s'utiliser dans tous les éléments HTML
suivant:
<balise attribut="value">
où attribut peut être:
accesskey="key"
permet de spécifier la touche key comme raccourci clavier, par exemple
<a href="https://xymaths.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é…</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>)
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:
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…
</span>
Affichage/Résultat:Un peu de texte déplaçable…
Voir un exemple complet, avec cadre cible du déplacement,
là.
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…></span>
<span>… alors que celui, est lisible</span>
Affichage/Résultat:Du texte non visible…>… 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.