Élément et attribut

Dans un document HTML, on retrouve donc du texte mais également des informations complémentaires à propos du texte, que ce soit à propos de sa structure ou du style qu'il faut lui appliquer. Cette information complémentaire est fournie grâce aux éléments et attributs.

Élément

On utilise des types d'élément pour représenter un élément voulu ou un certain comportement, par exemple un paragraphe, un lien, une image, un tableau, ... Une déclaration de type d'élément comporte généralement trois parties : une balise ouvrante, un contenu et une balise fermante.

La balise ouvrante prend la forme suivante : le caractère < suivi du nom du type d'élément, suivi par le caractère >. La balise fermante a la même forme que la balise ouvrante sauf qu'elle commence par les caractères </ à la place du caractère <.

Certain types d'élément ne doivent pas obligatoirement avoir de balise fermante. C'est par exemple le cas de l'élément P qui représente un paragraphe. Par convention, on notera assez souvent le nom du type d'élément en lettres majuscules mais sachez que ce nom insensible à la casse (par contre, XHTML impose des lettres minuscules).

Dans un document HTML, on a donc du texte (le contenu) et des balises qui permettent de délimiter des zones ayant une signification particulière. Il ne faut donc pas confondre type d'élément et balise. Le type d'élément P défini un paragraphe et on utilise les balises <P> et </P> pour délimiter un paragraphe dans le document.

On peut voir, dans l'exemple du listing 1.2, l'élément TITLE qui représente le titre du document et également l'élément P qui, comme on commence à le savoir, délimite un paragraphe. On observe également que certains éléments ne nécessitent pas de balise fermante (HTML, HEAD, BODY et P), tandis que pour d'autres, elle est obligatoire (TITLE).

Il existe aussi des éléments pour lesquels la balise fermante et le contenu sont interdits. En effet, de tels éléments n'agissent pas sur un contenu, mais leur seule présence vont provoquer un comportement particulier. Ces éléments sont appelés éléments orphelins. Voici par exemple comment provoquer un saut de ligne dans un document en utilisant l'élément BR.

On utilise donc simplement la balise ouvrante. Une liste de tous les éléments se trouve dans les ressources et vous pouvez y voir, pour chaque élément, si la balise fermante est obligatoire ou optionnelle.

Attribut

Les éléments définissent donc une information de structure sur un contenu ou par leur seule présence. De plus, on peut préciser des propriétés à un élément en utilisant les attributs. On va par exemple pouvoir décider que le texte d'un paragraphe doit être aligné à gauche, à droite, ou centré ou même justifié par rapport à la largeur de la page.

Il faut deux choses pour spécifier une propriété : il faut tout d'abord un nom d'attribut (par exemple l'alignement) et une valeur (par exemple centrer). On dit qu'une propriété se définit par une paire nom/valeur. Cette paire se place dans la balise ouvrante. Voyons tout de suite un exemple :

Vous voyez ici la balise <P> qui définit un paragraphe de texte. La paire nom/valeur se place entre le nom de l'élément et le >. On a utilisé l'attribut align et on lui a donné comme valeur center. Cet attribut permet de spécifier l'alignement du texte. La figure 1.2 montre le résultat que l'on obtient en affichant ce document avec un navigateur Web.

Les couples nom/valeur se placent donc toujours dans la balise ouvrante. On écrit le nom de l'attribut suivi du caractère égal (=) et vient ensuite la valeur de l'attribut. Cette valeur est écrite entre guillemets doubles (") ou entre guillemets simples (').

Pourquoi deux manières de noter la valeur d'un attribut ? Et bien imaginez un attribut dont la valeur serait salut "toi". Si on utilise les guillemets doubles, on devrait écrire ceci :

Et ça ne fonctionnera pas, en effet, on voit que la valeur de l'attribut est simplement salut puisque celle-ci s'étend du guillemet ouvrant jusqu'au premier guillemet fermant. Donc, lorsqu'on a une valeur d'attribut qui contient des guillemets doubles, on va utiliser des guillemets simples pour la délimiter.

Les noms d'attributs sont également insensible à la casse mais par convention, on utilise des lettres minuscules (cette convention étant une obligation en XHTML). De plus, on n'est pas obligé de mettre toutes les valeurs de tous les attributs entre guillemets, en HTML, tant que ces valeurs ne contiennent que des lettres et des chiffres. Enfin, il existe également des attributs qui ne prennent pas valeur, leur seule présence est suffisante : il s'agit de propriétés.