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

click fraud protection

Lorsqu'il s'agit d'apprendre le HTML, deux balises que la plupart des gens apprennent tôt sont les balises de paragraphe et de saut de ligne, qui sont 

 et 
respectivement. Ces balises mettent des pauses naturelles dans votre texte afin que le contenu de votre page Web soit plus facile à lire. Bien que ces balises soient assez faciles à utiliser, elles peuvent également causer une certaine confusion et être utilisées à mauvais escient.

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

L'élément paragraphe

est utilisé comme une paire de balises avec le 

 balise ouvrant l'élément et le 

 balise le fermant. En écrivant 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 démarrer une nouvelle idée ou un nouveau point. La plupart des navigateurs affichent des paragraphes séparés par une ligne vierge. Voici un exemple de paragraphe en HTML:

instagram viewer

Il est maintenant temps pour tous les hommes de bien de venir en aide à leur pays. Le renard brun rapide a sauté par-dessus 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
la balise est un balise singleton - il n'a pas de balise de fin. En XHTML, vous devez utiliser la balise avec une barre oblique finale (
), mais en HTML (y compris HTML5), ce 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 lorsque vous souhaitez que le texte continue sur la ligne suivante, mais le contenu n'est pas une idée ou un point distinct, 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 fixés.

Voici un exemple de saut de ligne dans un paragraphe:

Il est maintenant temps pour tous les hommes de bien de venir en aide à leur pays.

Le renard brun rapide a sauté par-dessus le chien endormi paresseux.


Étant donné que la balise de saut de ligne est une balise singleton, aucune autre balise ne peut être utilisée à l'intérieur.

Usages abusifs courants de la

et
Mots clés

Les personnes qui débutent dans le codage font des erreurs courantes avec les éléments de paragraphe et de saut de ligne lors du balisage d'une page Web.

  • Utilisant
    pour changer la longueur d'une ligne de texte
    : L'utilisation de la balise break pour tenter de forcer le texte à apparaître ou à se rompre d'une manière spécifique garantit que vos pages ont fière allure sur votre navigateur mais pas nécessairement sur un autre navigateur et certainement pas sur tous dispositifs. Si votre site est un site web réactif, il modifie sa disposition en fonction des différentes tailles d'écran. Le navigateur met automatiquement le mot wrapping, puis lorsqu'il s'agit de la
    tag, il enveloppe à nouveau le texte, ce qui donne des lignes courtes et longues et un texte saccadé. Tu devrais utiliser Feuilles de style CSS pour dicter des styles visuels au lieu d'essayer de forcer la mise en page en ajoutant des éléments HTML spécifiques.
  • Utilisant pour ajouter de l'espace entre les éléments: Encore une fois, il s'agit de se tourner vers HTML pour créer une mise en page visuelle, dans ce cas, l'espacement, au lieu d'utiliser CSS. Il s'agit d'une pratique courante de certains éditeurs HTML, et bien que ce ne soit pas techniquement faux, cela donne un HTML d'apparence maladroite et peut être déroutant à modifier plus tard. Il 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 de non-rupture les espaces à l'intérieur, les balises de paragraphe vides peuvent 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 consiste à utiliser des feuilles de style.
instagram story viewer