Éléments et attributs
Les deux notions les plus fondamentales du langage HTML sont celles d'élément et d'attribut.
Les éléments HTML
On a vu dans la première section 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 attributs
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 est constitué d'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). La déclaration de l'attribut prend une des deux formes nom="valeur" ou
nom='valeur', les guillemets anglais "…" étant en général ptéférés aux apostrophes '…'.
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">.
Pour préciser qu'il s'agit en fait de français du Canada, on pourra même utiliser la valeur plus spécifique « fr-CA » : <html lang="fr-CA">.
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 dotant l'élément meta d'un attribut qui a pour nom charset et dont la
valeur est utf-8 : <meta charset="utf-8" />. 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>
Éléments ancêtres et éléments descendants
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 que B est 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.
