Télécharger le PDF du cours
Les éléments HTML
Le langage HTML tout entier repose sur l’utilisation d’éléments. Si vous comprenez bien ce qu’est un élément, vous comprenez le HTML.
Les éléments HTML vont nous permettre de créer la structure d’une page HTML, de définir chaque contenu de notre page et également de passer certaines informations utiles au navigateur pour afficher la page (comme le type d’encodage utilisé par exemple pour que celui-ci affiche bien nos accents français).
Dans une page, nous allons utiliser les éléments en HTML pour marquer du contenu, c’est-à-dire pour lui donner du sens aux yeux des navigateurs et des moteurs de recherche. Selon l’élément utilisé, un navigateur va reconnaître le contenu comme étant de telle ou telle nature.
Ainsi, on va utiliser des éléments pour définir un paragraphe ou un titre par exemple, ou encore pour insérer une image ou une vidéo dans un document.
L’élément p, par exemple, sert à définir un paragraphe, tandis que l’élément a va nous permettre de créer un lien, etc.
Aujourd’hui, il existe plus de 120 éléments HTML différents aux rôles très variés et qui font la richesse de ce langage. Nous allons étudier et nous servir d’une grande partie d’entre eux dans ce cours.
Les balises HTML
Un élément HTML peut être soit constitué d’une paire de balises (ouvrante et fermante) et d’un contenu, soit d’une balise unique qu’on dit alors « orpheline ».
L’élément p (qui sert à définir un paragraphe) est par exemple constitué d’une balise ouvrante, d’une balise fermante et d’un contenu textuel entre les balises. L’idée ici est que le texte contenu entre les deux balises va être le texte considéré par le navigateur comme étant un paragraphe.
Voici comment on va écrire cela :
Comme vous pouvez le constater, la balise ouvrante de l’élément est constituée d’un chevron ouvrant <, du nom de l’élément en question et d’un chevron fermant >.
Notez bien ici la différence entre la balise ouvrante et la balise fermante de notre élément p : la balise fermante contient un slash avant le nom de l’élément.
Vous pouvez déjà retenir cette syntaxe qui sera toujours la même en HTML.
Certains éléments en HTML ne vont être constitués que d’une balise qu’on appelle alors orpheline. Cela va être le cas pour certains éléments qui ne possèdent pas de contenu textuel comme l’élément br par exemple qui sert simplement à créer un retour à la ligne en HTML et qui va s’écrire comme ceci :
Notez ici qu’il est possible que vous rencontriez un jour une syntaxe un peu différente pour les balises orphelines utilisant un slash après le nom de l’élément comme ceci : <br/>.
Cette syntaxe est une syntaxe qui était acceptée il y a quelques années mais qui est aujourd’hui dépréciée en HTML. Elle provient en fait d’un autre langage qui est le XML. Il est déconseillé de l’utiliser aujourd’hui en HTML puisqu’elle risque de ne plus être reconnue par les navigateurs dans le futur.
Par ailleurs, notez que certains développeurs ont tendance, par abus de langage, à confondre les termes « élément » et « balise » en utilisant le mot « balise » pour désigner un élément. Vous verrez peut-être cela écrit dans d’autres cours.
C’est toutefois un abus de langage et je pense qu’il est préférable pour une bonne compréhension d’appeler chaque objet d’un langage par son vrai nom. Je vous conseille donc de retenir plutôt ce que j’ai expliqué plus haut.
Les attributs HTML
Finalement, les éléments vont également pouvoir contenir des attributs qu’on va alors placer au sein de la balise ouvrante de ceux-ci. Pour certains éléments, les attributs vont être facultatifs tandis que pour d’autres ils vont être obligatoires pour garantir le bon fonctionnement du code HTML.
Les attributs vont en effet venir compléter les éléments en les définissant plus précisément ou en apportant des informations supplémentaires sur le comportement d’un élément.
Un attribut contient toujours une valeur, qu’on peut cependant parfois omettre dans le cas des attributs ne possédant qu’une seule valeur (car la valeur est alors considérée comme évidente).
Prenons ici l’exemple de l’élément a qui est l’abréviation de « anchor » ou « ancre » en français. Cet élément va principalement nous servir à créer des liens vers d’autres pages.
Pour le faire fonctionner correctement, nous allons devoir lui ajouter un attribut href pour « hypertexte reference » ou « référence hypertexte » en français.
En effet, c’est l’attribut href qui va nous permettre de préciser la cible du lien, c’est-à-dire la page de destination du lien en lui passant l’adresse de la page en question en valeur.
Un autre exemple : l’élément img, servant à insérer une image dans une page HTML, va lui nécessiter deux attributs qui sont les attributs src et alt.
L’attribut src (pour « source ») va prendre comme valeur l’adresse de l’image tandis que l’attribut alt (pour « alternative ») va nous permettre de renseigner une description textuelle de l’image qui sera affichée dans les cas où l’image ne serait pas disponible pour une raison ou une autre : image introuvable, impossible à charger, etc.
L’attribut alt va également se révéler indispensable pour rendre notre site accessible aux non-voyants ou aux mal voyants et pour leur fournir une bonne expérience de navigation puisqu’ils sont généralement équipés de lecteur spéciaux qui vont pouvoir lire la valeur de l’attribut alt et donc leur permettre de se faire une représentation du contenu de l’image.
Notez au passage que l’élément img n’est constitué que d’une seule balise orpheline, tout comme l’élément br vu précédemment. On place dans ce cas les attributs au sein de la balise orpheline.
