HTML - Balises de base
Balises de base courantes
Titres
HTML dispose de six niveaux de titres, de <h1> à <h6>, pour structurer le contenu d'une page web. La balise <h1> est le titre principal, tandis que <h6> est le plus petit sous-titre. Chaque niveau de titre a un style et une importance différents. L'utilisation de titres aide à créer une structure claire pour votre contenu, facilitant la compréhension de l'organisation de votre page web par les lecteurs.
Paragraphes
La balise <p> définit les paragraphes de texte en HTML. C'est un élément de niveau bloc, ce qui signifie que les navigateurs ajoutent un espace vertical avant et après chaque élément <p>. Les paragraphes organisent et séparent les blocs de texte, rendant votre contenu plus lisible. Utilisez la balise <p> pour regrouper des phrases ou des idées connexes, créant ainsi un flux logique d'informations.
Conseil: Code HTML pour un paragraphe avec des espaces supplémentaires
<p>Ceci est un paragraphe avec des espaces supplémentaires.</p>Lorsqu'un navigateur affiche ce code, il affichera le texte comme suit :
Conseil: Texte rendu pour un paragraphe avec des espaces supplémentaires
Ceci est un paragraphe avec des espaces supplémentaires.
Liens
La balise <a>, abréviation d'"ancre", crée des hyperliens vers d'autres pages web ou ressources. L'attribut href dans la balise <a> spécifie l'URL de destination ou le chemin vers la ressource liée. Les liens peuvent être appliqués à du texte, des images ou d'autres éléments HTML, permettant aux utilisateurs de naviguer entre différentes pages ou d'accéder à des informations supplémentaires. Lors de la création de liens, utilisez un texte clair et descriptif pour indiquer le but ou la destination du lien.
Images
La balise <img> intègre des images dans les pages web. C'est une balise auto-fermante, ce qui signifie qu'elle n'a pas besoin d'une balise de fermeture séparée. L'attribut src spécifie le chemin ou l'URL du fichier image, tandis que l'attribut alt fournit un texte alternatif pour l'accessibilité et l'optimisation des moteurs de recherche. Le texte alternatif décrit le contenu de l'image et s'affiche lorsque l'image ne peut pas être chargée ou lorsqu'un utilisateur utilise des technologies d'assistance, comme les lecteurs d'écran.
Listes
HTML a deux types de listes :
| Type de liste | Balise | Description |
|---|---|---|
| Non ordonnée | <ul> |
Utilisée lorsque l'ordre des éléments n'est pas important, généralement affichée avec des puces |
| Ordonnée | <ol> |
Utilisée lorsque l'ordre des éléments est important, affichée avec des marqueurs numérotés |
Chaque élément d'une liste est représenté par la balise <li> (élément de liste). Les listes sont utiles pour présenter une série d'éléments connexes ou d'étapes de manière structurée.
Emphase et forte emphase
Pour ajouter de l'emphase à des mots ou des phrases dans votre texte, vous pouvez utiliser les balises <em> et <strong>. La balise <em> indique une emphase et est généralement rendue en italique par les navigateurs. Elle transmet un changement dans le sens ou le ton du contenu mis en emphase. La balise <strong> indique une forte emphase et est généralement rendue en gras. Elle implique une plus grande importance par rapport au texte environnant. Utilisez ces balises avec parcimonie pour mettre en évidence les points clés ou attirer l'attention sur des parties spécifiques de votre contenu.
Conseil: Code HTML avec des balises mal assorties
<p>Ceci est un paragraphe.</div>Dans ce cas, la balise d'ouverture <p> est fermée avec une balise </div>, ce qui est incorrect. La bonne façon de fermer le paragraphe est :
Conseil: Code HTML corrigé pour un paragraphe
<p>Ceci est un paragraphe.</p>