--- title: Découverte des balises HTML courantes pour structurer une page web description: Parlons un peu de HTML, l'incontournable langage de balisage utilisé pour créer des pages web. tags: [] --- import Callout from "@/components/Callout"; import tabs from "./tabs"; Dans l'article précédent, nous avons exploré la balise `` et son rôle important dans une page HTML. Maintenant, concentrons-nous sur les balises situées dans le corps de la page, c'est-à-dire dans la balise ``. ## 🏗️ La balise \ La balise `` est l'endroit où se trouve tout le contenu visible de la page... ou presque ! Elle contient tous les éléments que l'utilisateur peut voir et interagir avec, comme le texte, les images, les liens, etc. Voici un exemple de code HTML simple avec la balise `` : On peut voir que la balise `` contient plusieurs éléments : - `

` : Un titre de premier niveau. - `

` : Un paragraphe de texte. - `` : Une image. - `` : Un lien hypertexte. Mais on y reviendra un peu après ! ## 📝 Balises de textes et mise en forme ### 1. Titres et sous-titres Les titres et les sous-titres sont des éléments importants _(pour ne pas dire essentiels)_ pour structurer le contenu d'une page web. Le langage HTML fournit six niveaux de titres, du plus important au moins important : - `

` : Titre de premier niveau _(le plus important)_. - `

` : Titre de deuxième niveau. - `

` : Titre de troisième niveau. - `

` : Titre de quatrième niveau. - `

` : Titre de cinquième niveau. - `
` : Titre de sixième niveau _(le moins important)_. Il est important de prendre en compte plusieurs éléments lors de l'utilisation des titres : - **Accessibilité** : Les titres aident les lecteurs d'écran à comprendre la structure de la page. - **SEO** : Les moteurs de recherche utilisent les titres pour comprendre le contenu de la page. - **Lisibilité** : Les titres aident les utilisateurs à parcourir rapidement le contenu de la page. - **Sémantique** : Les titres donnent du sens au contenu et aident à organiser l'information. La plupart du temps _(selon le navigateur)_, les titres sont affichés avec une taille de police plus grande que le texte normal. Il est donc important de ne pas utiliser les balises de titres uniquement pour changer la taille du texte. Si ton titre est le titre principal de la page, utilise la balise `

` et applique-lui un style CSS pour le personnaliser. Il est recommandé d'utiliser une seule balise `

` par page pour le titre principal. Ni plus, ni moins ! En revanche, tu peux utiliser plusieurs balises `

`, `

`, etc. pour les sous-titres. Les balises `

` jusqu'à `

` sont utilisées pour les sous-titres et les titres de sections. Elles permettent de structurer le contenu de la page et de créer une hiérarchie d'information. Il est préférable d'utiliser une balise `

` pour un sous-titre qui suit un `

`, et de ne pas sauter directement à un `

` ou `

`. Cependant, tu peux totalement passer d'un `

` à un `

` si tu le souhaites et que ça a du sens pour toi ! Il est important de respecter cette hiérarchie pour que le contenu soit facilement compréhensible par les utilisateurs et les moteurs de recherche. ### 2. Paragraphes de texte En reprenant l'exemple précédent, on peut voir que la balise `

` est utilisée pour définir un paragraphe de texte. Il s'agit d'une des balises les plus courantes en HTML et elle est utilisée pour structurer le texte sur la page en sections distinctes et lisibiles. ### 3. Mise en forme du texte Il existe plusieurs balises HTML qui permettent de mettre en forme le texte, comme : - `` - Indique un texte comme étant important _(sémantique)_. - Par défaut _(selon le navigateur)_, le texte est affiché en gras. - `` - Indique un texte comme étant mis en emphase _(sémantique)_. - Par défaut _(selon le navigateur)_, le texte est affiché en italique. - `` - Indique un texte comme étant souligné _(non sémantique)_. - Par défaut _(selon le navigateur)_, le texte est affiché avec un soulignement. - `` - Indique un texte comme étant en gras _(non sémantique)_. - Par défaut _(selon le navigateur)_, le texte est affiché en gras. - `` - Indique un texte comme étant en italique _(non sémantique)_. - Par défaut _(selon le navigateur)_, le texte est affiché en italique. La balise `` est utilisée pour indiquer que le texte est important, tandis que la balise `` est utilisée pour appliquer un style de gras sans signification sémantique. Il en est de même pour les balises `` et `` avec un style italique. Bien entendu, niveau style on va chercher à privilégier le CSS pour appliquer des styles de mise en forme plutôt que d'utiliser les balises HTML. ## 🔗 Liens vers des ressources externes ### 4. Liens hypertextes Un lien hypertexte est un élément cliquable qui permet de naviguer vers une autre page web ou une autre section de la même page. Il est créé à l'aide de la balise `` _(pour "anchor")_ et peut contenir du texte, des images ou d'autres éléments. Il est construit avec l'attribut `href` qui spécifie l'URL de la page vers laquelle le lien doit pointer. Dans l'exemple ci-dessous, on peut voir un lien vers la page d'accueil du Memento ainsi qu'un lien vers une section : ## 🖼️ Images et médias ### 5. Images L'ajout d'une image à une page web est un élément essentiel pour rendre le contenu plus attrayant et informatif. Il est créé à l'aide de la balise ``. Cette balise est construite avec l'attribut `src` qui spécifie l'URL de l'image à afficher. Mais il est également important d'utiliser l'attribut `alt` pour fournir une description de l'image, ce qui est utile pour l'accessibilité et le référencement. ## 📋 Listes et tableaux ### 6. Listes Les balises `