Cours de (X)HTML / CSS

Les attributs communs


id

id pour identifiant. La valeur de l'id est constituée d'une chaîne alphanumérique. La valeur d'un identifiant est unique dans une page. En d'autres termes si on a dans un document HTML <p id="entete">, il ne peut y avoir d'autres éléments dans ce même document avec la valeur entete en id.
Utilisé pour les styles CSS et et Javascript.

Exemple :

<p id="entete">Site de l'Université Paris VII</p>
	

class

Attribue une classe de style à un élément. La valeur de la classe est constituée d'une ou plusieurs chaînes alphanumériques (s'il y en a plusieurs, les classes sont séparées par un espace). Plusieurs éléments d'un même document HTML peuvent avoir la même classe.
Utilisé pour les styles CSS.

Exemple :

<img src="img/photo_tom.jpg" alt="Photo de Tom" class="vignettes" />
	

title

Donne des informations sur l'élément. Génère une info-bulle au survol du pointeur de la souris sur la plupart des navigateurs.

Exemple :

<abbr title="Document Type Definition" lang="en">DTD</abbr>
	

lang, xml:lang

Indique la langue de l'élément.
Il est utilisé surtout avec l'lément body ou en cas de changement de langue dans le document HTML.
lang est utilisable en (X)HTML, xml:lang est utilisable en XHTML. En XHTML, il est recommandé de spécifier les 2.

Exemple :

<html lang="fr" xml:lang="fr">
....
	Comme le disait Shakespeare : <cite lang="en" xml:lang="en">To be or not to be.</cite> 
...
</html>
	

dir

Indique le sens de lecture d'un élément.
la valeur étant soit ltr soit rtl.

Exemple :

<span dir="ltr">A lire de gauche à droite.</span>
		

style

Permet de spécifier des styles CSS.
Il convient d'éviter son utilisation au profit de celle d'une feuille de style.

Exemple :

<p style="text-align:right">A lire.</p>
		

accesskey

Définit un raccourci clavier pour accéder rapidement à l'élément.
Son utilisation est recommandée pour favoriser l'accessibilité des sites web.

Exemple :

<a href="aide.html" accesskey="6">Aide</a>
		

[Evénements] (onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup)

Permet d'associer un action programmée en Javascript à un événement portant sur l'élément (clic, survol...)

Exemple :

<span onclick="alert('Vous avez cliqué sur la réponse B')">réponse B</span>