Éléments HTML

Vous connaissez déjà le squelette de base du document. Cette leçon zoome sur les briques à l’intérieur de la page : les éléments HTML. Chaque titre, paragraphe et la plupart des autres parties d’une page sont des éléments.

Qu’est-ce qu’un élément HTML ?

Un élément HTML est une unité complète de balisage. Pour la plupart des éléments qui enveloppent du contenu, il a trois parties :

1. Une balise de début — par exemple <p>
2. Le contenu — le texte ou les éléments imbriqués à l’intérieur
3. Une balise de fin — par exemple </p>
   Ensemble, <p>Bonjour</p> est un élément paragraphe.

Réponse directe

Un élément HTML signifie en général une balise de début, un contenu optionnel et une balise de fin qui correspondent. Le navigateur utilise cette paire pour savoir où l’élément commence et finit. Certains éléments vides n’enveloppent pas de contenu et n’ont donc pas de balise de fin séparée.

Lire l’exemple

• <p> ouvre un élément paragraphe
• Le texte entre les balises est le contenu
• </p> ferme le paragraphe
• Le titre fonctionne de la même façon avec <h1> et </h1>

Éléments imbriqués

Des éléments peuvent se placer dans d’autres. Cela s’appelle l’imbrication. L’élément intérieur doit être entièrement ouvert et fermé avant que l’extérieur ne se ferme.

Ici l’élément strong est imbriqué dans l’élément p. L’imbrication marque le sens dans de plus grands morceaux de contenu. Gardez l’arbre propre : ne croisez pas les balises en ouvrant p, ouvrant strong, puis fermant p avant strong.

Éléments vides (void)

Certains éléments n’enveloppent pas de contenu. On les appelle souvent vides ou void. Un exemple courant pour débutants est le saut de ligne :

La balise <br> crée un saut de ligne. Elle n’a pas de balise de fermeture séparée ni de texte intérieur. Plus tard vous rencontrerez d’autres éléments vides comme les images. Pour l’instant retenez : tout élément ne ressemble pas à un sandwich début-contenu-fin.

Balises vs éléments

On dit parfois « balise » et « élément » comme s’ils étaient identiques. Une balise est le balisage entre chevrons. Un élément est l’unité complète comprise par le navigateur — souvent balise de début + contenu + balise de fin. Dire « l’élément p » désigne en général l’unité paragraphe entière.

Essayez vous-même

1. Ouvrez votre fichier HTML de base
2. Ajoutez un paragraphe avec du texte strong imbriqué
3. Ajoutez un second paragraphe qui utilise <br> entre deux courtes lignes
4. Enregistrez et actualisez le navigateur
5. Vérifiez que le texte en gras et le saut de ligne apparaissent comme prévu

Erreurs fréquentes

• Oublier la balise de fermeture pour les éléments qui en ont besoin
• Croiser les balises au lieu de les imbriquer proprement
• Traiter chaque balise comme si elle devait avoir contenu et balise de fin (les vides diffèrent)
• Mauvais nom de fermeture, comme associer </p> à <h1>
• Mettre le contenu visible hors de body

Résumé

• La plupart des éléments HTML utilisent balise de début, contenu et balise de fin
• Les éléments imbriqués doivent se fermer dans le bon ordre
• Les éléments vides comme br n’enveloppent pas de contenu
• Une balise est le marqueur entre chevrons ; un élément est l’unité complète
• Entraînez-vous à l’imbrication et à un simple saut de ligne
• Les attributs, qui ajoutent des infos aux balises, viennent dans la leçon suivante