Avant d'aller plus loin, il faut introduire deux notions fondamentales du langage HTML : les éléments et les attributs.
On a vu dans la section précédente que le code HTML d'une page Web contient des balises. Une balise d’ouverture, une balise de fermeture ainsi que le contenu
qu’elles encadrent forment ensemble ce qu’on appelle un élément HTML. Des exemples d’éléments sont les titres de pages (<h1> … </h1>
) et
les paragraphes
(<p> … </p>
).
On a aussi des éléments vides, constitués d'une balise auto fermante, p.ex. les lignes horizontales
(<hr />
). Un autre exemple d'élément vide est l'élément meta
, qui permet de communiquer certaines informations au navigateur, comme on va le voir plus bas.
Les éléments HTML peuvent avoir ce qu'on appelle des attributs. Les attributs (qu'on appellerait des variables en mathématiques) donnent au navigateur de l’information supplémentaire concernant l’élément. Il faut réaliser que les attributs ne sont pas arbitraires : chaque élément accepte des attributs bien spécifiques.
Chaque attribut a un nom et une valeur, qui sont spécifiés dans la balise d'ouverture de l'élément (pour les éléments vides, on les inclut
dans la balise avant l'espace et la barre oblique finals). Par exemple, l’élément html
peut accepter un attribut de langue dont le nom est lang
et qui peut prendre des valeurs telles que fr
(pour français) ou en
(pour anglais). Donc, pour indiquer au navigateur qu'une page Web est en français,
au lieu de la commencer simplement par <html>
, on la commencera par <html lang="fr">
(notez les guillemets anglais
"…"
autour de la valeur fr
).
Un autre exemple est fourni par l'élément meta
. Dans une page Web en français, on retrouve divers accents qui n'existent pas dans l'alphabet anglais standard et il
est extrêmement pénible et frustrant d'écrire une page Web en français en utilisant le codage de caractères ASCII ou
un codage similaire qui gère mal les accents. Pour éviter le problème,
on peut utiliser un encodage plus moderne comme UTF-8 et le faire savoir au navigateur en donnant la valeur utf-8
à l'attribut charset
de l'élément
meta
: on ajoutera donc <meta charset="utf-8" />
au code. Cette information fait partie des métadonnées et doit donc figurer avant
la balise <body>
.
Avec ces changements, le code de notre page Web de la section précédente devient :
<!DOCTYPE html>
<html lang="fr">
<meta charset="utf-8" />
<title>Page Web test</title>
<body>
<h1>Ceci est un titre</h1>
<p>Ceci est un paragraphe.</p>
<!--Ceci est un commentaire.-->
<p>Ceci est un autre paragraphe.</p>
<hr />
</body>
</html>
Si l'élément A d'un fichier HTML fait partie du contenu de l'élément B, on dit que A est contenu dans B ou que B contient A. On dit aussi que A est un descendant de B et que B est un ancêtre de A. S'il n'y a pas d'élément C « intermédiaire » tel que A soit contenu dans C et C contenu dans B, on dit que A est un enfant de B et B le parent de A. Deux éléments ayant le même parent sont dits frères.
Notez qu'un élément vide aura au moins un ancêtre, mais
qu'il ne peut pas avoir de descendants.
On peut faire un dessin où on représente tous les éléments d'un fichier HTML en plaçant les enfants plus bas que les parents. Si on relie parents et enfants par des lignes, le résultat va ressembler à un arbre généalogique et s'appelle l'arbre des éléments du fichier HTML.
La figure qui suit représente l'arbre des éléments du fichier HTML ci-dessus.