Cet article aborde les bases de {{Glossary("HTML")}} : les balises et comment les utiliser.
| Prérequis : | Vous devriez au préalable connaître la différence entre une page web et un site web et savoir comment créer un document HTML simple. |
|---|---|
| Objectifs : | Apprendre ce que sont les balises HTML et comment les utiliser correctement dans un document HTML. |
{{Glossary("HTML")}} (HyperText Markup Language) est un langage descriptif utilisé pour structurer le contenu d'une page (ses textes, ses images, ses liens, etc.).
Un document HTML est un fichier texte qui contient des {{glossary("balise","balises")}} (ou tag en anglais). Ces balises doivent être utilisées d'une certaine façon pour décrire correctement la structure du document. Les balises indiquent au navigateur comment afficher le document, certaines balises permettent d'intégrer différents médias comme des images, des vidéos ou des musiques parmi le texte de la page.
Le navigateur n'affiche pas les balises telles quelles. Lorsqu'un utilisateur visite une page web, son navigateur analyse (ou parse en anglais) le document et l'interprète afin d'afficher la page web correctement. Par exemple, si le document contient une balise {{HTMLElement("img")}}, le navigateur chargera l'image associée et affichera l'image à la place de la balise HTML.
Les balises HTML respectent une syntaxe simple et stricte :
Voici quelques exemples :
<article><meta charset="utf-8"><img src="monImage.png" alt="">Généralement, les balises fonctionnent par paires. La première balise est la balise ouvrante et la seconde est la balise fermante. Une balise fermante doit avoir le même nom que la balise ouvrante correspondante. De plus, une balise fermante doit contenir une barre oblique entre le chevron initial et le nom de la balise. Ainsi, si <p> est une balise ouvrante, </p> sera la balise fermante correspondante.
Un élément HTML se compose d'une balise ouvrante, d'un contenu textuel et d'une balise fermante :
La rigidité des conventions pour la fermeture des balises est utile afin de pouvoir imbriquer différents éléments les uns dans les autres :
<p>
Voici le début du paragraphe
<strong>
ici un texte important au sein du paragraphe
</strong>
et là, la fin du paragraphe.
</p>
Bonne pratique : Si vous omettez les balises fermantes, le navigateur aura les coudées franches pour déterminer comment clôturer un élément. Ces règles sont bien définies mais souvent contre-intuitives (donc difficiles à deviner). Afin de vous épargner des pertes de temps à venir, préférez fermer les éléments.
HTML contient environ 140 balises qui fournissent au navigateur des indications sur le sens d'un élément, son interprétation ou son affichage. Entre autres choses, les balises permettent de fournir des méta-données pour le document HTML, de mettre en avant certaines phrases, d'ajouter des fichiers multimédias ou de gérer des formulaires en ligne.
Voici quelques-unes des balises les plus fréquemment utilisées :
h1 pour les grands titres et h6 pour les titres des sections très spécifiques.<a href="url_cible">du texte qui sera lu par l'utilisateur</a>.<img src="url/vers/mon/image.png" alt="Une description"><ul> permet de définir une liste non-ordonnée et <ol> de définir une liste ordonnée. Pour chacune de ces listes, ce sera la balise <li> qui permettra de définir un élément de la liste. Voici un exemple avec <ul> :<ul> <li>Café</li> <li>Thé</li> <li>Lait</li> </ul>
N'hésitez pas à expérimenter avec ces balises. Dans les articles suivants, nous verrons comment intégrer des fichiers multimédias, des formulaires, des tableaux, etc. Dans tous les cas, vous pouvez faire vos propres tests avec n'importe quelle balise HTML. Assurez-vous de bien choisir la bonne balise pour ce que vous souhaitez faire : la sémantique des éléments HTML est très importante, notamment pour les moteurs de recherches qui analysent et classent votre site.
Cet article ne contient pas encore de matériau interactif. N'hésitez pas à contribuer.
Pour l'instant, nous avons vu quelques règles simples concernant les éléments et les balises HTML. Mais c'est bien connu, chaque règle a ses exceptions.
Nous avons vu précédemment qu'un élément HTML était composé de texte entre deux balises. Cependant, certaines balises ne contiennent pas de texte. L'exemple le plus simple est {{HTMLElement("img")}}. Le navigateur remplace la balise <img> avec l'image indiquée, ignorant le texte de l'élément. Pour cette raison, <img> n'a pas de balise fermante.
Here some text before an image element <img src="myImage.png" alt=""> Here some text after an image element
Note : Attention à ne pas mélanger les éléments et les balises. Parfois, une balise seule permet de définir un élément mais la plupart du temps, les balises fonctionnent par paires.
En HTML, il existe deux éléments spéciaux qui n'ont pas de balise. Ces éléments sont essentiels pour tout document HTML.
Le doctype (pour « type de document ») est une déclaration formelle, placée au tout début d'un document HTML. Elle indique que le document est écrit avec du HTML standard. Le doctype se présente de cette façon :
<!DOCTYPE html>
Si vous ne commencez pas votre document par <!DOCTYPE html>, les navigateurs afficheront votre document en mode quirks. Le mode quirks est le mode utilisé par le navigateur pour afficher les documents anciens ou malformés, écrits dans les années 1990 lorsque HTML était peu (voire pas du tout) standardisé et que chaque navigateur gérait HTML à sa façon.
Les commentaires sont des éléments très particuliers. Ce sont des notes que vous pouvez utiliser pour annoter votre code HTML . Le navigateur n'affichera pas ces commentaires dans la page web (cependant, le code source peut être lu par n'importe qui et les commentaires seront donc publics comme le reste de la page).
En HTML, les commentaires sont écrits avec du texte contenu entre <!-- et -->
<!-- Ceci est un commentaire. Il ne sera pas affiché dans le navigateur.--> Ce texte s'affichera dans le navigateur.
La structure de base d'un document HTML est définie avec un ensemble de balises spéciales. Les éléments définis dans ces balises ne doivent pas apparaître plus d'une fois dans le document (excepté pour l'élément {{HTMLElement("title")}} ). Le navigateur gèrera les cas où ces éléments ne sont pas fournis (ce qui n'est pas conseillé).
body dans un document HTML et celui-ci est toujours placé après la tête. L'utilisateur verra tout ce qui est placé dans cet élément.Voici le document HTML formel le plus simple qu'on puisse écrire :
<!DOCTYPE html>
<html>
<head>
<title>Un document HTML formel</title>
</head>
<body>
<!-- Du contenu pour l'utilisateur ici -->
</body>
</html>
Si on retire les différentes balises optionnelles, on obtient alors le document HTML valide le plus simple qui puisse être écrit :
<!DOCTYPE html> <title>Et voilà un tout petit document HTML</title>
Bonne pratique : Nous vous recommandons d'utiliser la structure formelle. Si vous ne séparez pas clairement le contenu de <head> du contenu de <body>, il sera plus facile de commettre des erreurs qui entraîneront un comportement étrange du navigateur.
Pour finir notre aperçu sur les éléments HTML, précisons que les éléments peuvent être imbriqués mais ne peuvent pas se chevaucher.
Comment faire se chevaucher des éléments ? Voici un exemple :
<p>
le début de mon paragraphe
<strong>
du texte important
</p>
<p>
un deuxième paragraphe
</strong>
et l'élément strong a été bouclé
juste avant
</p>
Dans l'exemple ci-dessus, l'élément strong chevauche ceux des paragraphes. Ceci est une erreur (qui n'est pas autorisée par HTML). Il faut plutôt écrire :
<p>
mon paragraphe commence ici
<strong>
du texte important
</strong>
</p>
<p>
<strong>
un deuxième paragraphe
</strong>
dont le début était important aussi
</p>
Dans des cas simples comme celui-ci, le navigateur pourra deviner ce qui était voulu mais généralement de telles erreurs pourront avoir des répercussions importantes (par exemple avec {{Glossary("CSS")}} ou {{Glossary("JavaScript")}} que nous verrons bientôt). Par exemple, si nous avions utilisé une balise {{HTMLElement("div")}} à la place des balises {{HTMLElement("p")}} et {{HTMLElement("strong")}} :
<div>
le début de mon paragraphe
<div>
du texte important
</div>
<div>
un deuxième paragraphe
</div>
la fin du paragraphe
</div>
Comment savoir si les éléments se chevauchent ou non ? C'est impossible car il n'y a plus de chevauchement mais une imbrication d'éléments div ! Attention donc si vous souhaitez maîtriser le comportement de vos futurs documents HTML.
Une bonne pratique consiste à valider son code pour s'assurer qu'il est correct. Le meilleur outil pour cela est le validateur HTML du W3C. C'est un outil en ligne qui analyse votre document HTML et vous indique si celui-ci respecte les spécifications HTML. Si le document est invalide, le validateur fournira des indications quant aux erreurs qu'il a trouvées.
Note : Étant donné la méthode utilisée par le validateur, il est préférable de se concentrer sur la première erreur relevée dans l'analyse. En effet, une seule erreur peut en déclencher d'autres en cascades. Si le résultat de l'analyse comporte une myriade d'erreurs, commencez par résoudre la première, cela permettra éventuellement de résoudre des erreurs suivantes.
Grâce aux notions abordées dans cet article, vous devriez être en mesure d'écrire votre premier document HTML complet et d'obtenir une première version d'un site web fonctionnel.