Création de sauts de ligne et de paragraphes avec les balises P & BR

En ce qui concerne l’apprentissage HTML, les deux balises que la plupart des gens apprennent très tôt sont les balises de paragraphe et de saut de ligne, qui sont:

et
respectivement. Ces balises insèrent des coupures naturelles dans votre texte afin que le contenu de votre page Web soit plus facile à lire. Bien que ces balises soient relativement faciles à utiliser, elles peuvent également causer une certaine confusion et être mal utilisées.

Utilisation correcte de l'élément de paragraphe HTML

L'élément de paragraphe

est utilisé comme une paire de balises avec le

tag ouvrant l'élément et le

tag la fermer. En écriture HTML4 ou HTML5, la balise de fin n'est techniquement pas requise, mais il est recommandé de fermer cette balise. En XHTML, la fermeture

est requis.

Vous utilisez l'élément de paragraphe sur un site Web de la même manière que lorsque vous écrivez du contenu pour des besoins hors-Web - lorsque vous souhaitez commencer une nouvelle idée ou un nouveau point. La plupart des navigateurs affichent des paragraphes séparés par une ligne blanche. Voici un exemple de paragraphe en HTML:

Le moment est venu pour tous les hommes de bien de venir en aide à leur pays. Le renard brun rapide sauta sur le chien endormi paresseux.

De nombreuses autres balises peuvent apparaître entre les balises de paragraphe d'ouverture et de fermeture.

Utilisation correcte de l'élément de saut de ligne HTML

L'élément de saut de ligne
tag est un tag singleton - il n’a pas de balise de fin. En XHTML, vous devez utiliser la balise avec une dernière barre oblique (
), mais en HTML (y compris HTML5), cela n’est pas obligatoire.

L'élément break est un saut de ligne forcé dans le flux de texte de la page Web. Vous l'utilisez quand vous voulez que le texte continue sur la ligne suivante, mais le contenu n'est pas une idée ou un point séparé, ce qui en ferait un autre paragraphe. Un exemple de cela se produit avec la poésie où les sauts de ligne sont généralement corrigés.

Voici un exemple de saut de ligne dans un paragraphe:

Le moment est venu pour tous les hommes de bien de venir en aide à leur pays.
Le renard brun rapide sauta sur le chien endormi paresseux.

La balise de saut de ligne étant une balise singleton, aucune autre balise ne peut y être utilisée.

Mauvais usages communs du

et
Mots clés

Les personnes qui débutent dans le domaine de la programmation commettent des erreurs communes avec les éléments de paragraphe et de saut de ligne lors du balisage d’une page Web.

• En utilisant
  changer la longueur d'une ligne de texte: L'utilisation de la balise de coupure pour forcer le texte à apparaître ou à la casse de manière spécifique garantit que vos pages ont une belle apparence sur votre navigateur, mais pas nécessairement sur un autre navigateur, et certainement pas sur tous les appareils. Si votre site est un site Web réactif, il modifie sa présentation en fonction de la taille de l'écran. Le navigateur insère automatiquement le retour à la ligne, puis s’agissant de la
  balise, elle enveloppe à nouveau le texte, ce qui entraîne des lignes courtes, des lignes longues et du texte instable. Vous devez utiliser les feuilles de style CSS pour dicter les styles visuels au lieu d'essayer de forcer la mise en page en ajoutant des éléments HTML spécifiques.
• En utilisantajouter de l'espace entre les éléments: Une fois encore, il s’agit de HTML pour créer une mise en page visuelle, dans ce cas-ci espacement, au lieu d’utiliser CSS. Ceci est une pratique courante chez certains éditeurs HTML et, même si cela n’est pas techniquement faux, il en résulte un code HTML maladroit et une confusion qui peut nuire à l’édition ultérieure. Cela n’est pas non plus conforme aux normes du Web et à la séparation de la structure et du style. Dans certains cas, l'utilisation d'espaces insécables à l'intérieur de balises de paragraphe vides sinon peut entraîner un espacement inattendu dans différents navigateurs, car ils semblent tous interpréter cela différemment. La meilleure solution pour obtenir les éléments d'espacement nécessaires à votre conception est d'utiliser des feuilles de style.

En savoir plus sur ces balises et d’autres dans la liste des balises HTML.