Méthode recommandée avec CSS et HTML
Pour indenter un texte ou un paragraphe, la méthode la plus couramment utilisée et recommandée consiste à utiliser CSS. Vous trouverez ci-dessous différents exemples d'utilisation de CSS pour indenter du texte. Chacun de ces exemples serait placé entre vos balises HTML.
L'exemple suivant crée une classe de style nommée "tab" qui indente le texte et le paragraphe de 40 pixels à gauche.
Une fois que le code ci-dessus est dans la section, vous pouvez l’utiliser à tout moment en l’ajoutant à votre paragraphe (
) comme indiqué.
Exemple d'onglet
Comme indiqué ci-dessus, l'inclusion de CSS dans votre document HTML est appelée CSS "en ligne". C'est utile pour apporter rapidement des modifications, mais à long terme, il est difficile de changer plus tard.
Au lieu de cela, vous pouvez prendre tout votre code CSS et le placer dans un fichier séparé, avec l'extension .css. Ensuite, vous pouvez créer un lien vers ce fichier à partir de n'importe quel document HTML, et ce document peut utiliser ces propriétés CSS. L'utilisation d'un fichier CSS externe facilite la modification ultérieure du CSS, car tout le CSS est défini à un endroit.
Pour créer un lien vers votre fichier CSS externe, ajoutez la ligne suivante dans votre document HTML dans l’élément (après le
Une fois ce fichier .css créé, éditez-le et ajoutez le même code CSS, en excluant les balises et commentaires, comme indiqué.
.tab {margin-left: 40px; }
Enfin, une fois les étapes ci-dessus terminées, vous pouvez utiliser n'importe quel texte avec le même texte.
exemple que nous avons montré ci-dessus.
Il existe également d'autres formes d'indentation. Par exemple, si vous souhaitez uniquement mettre en retrait la première ligne d'un paragraphe, au lieu d'utiliser la ligne CSS ci-dessus, utilisez la ligne suivante.
.tab {text-indent: 40px}
Conseil: Vous pouvez également mettre en retrait avec un pourcentage. Par exemple, au lieu d'indenter par 40 pixels (pixels), vous pouvez remplacer le retrait par 5% pour indenter le texte par 5% de la vue actuelle. Vous pouvez également utiliser un espace em pour définir la largeur d'un retrait.
Conseil de bonus: vous pouvez également modifier le retrait d'un retrait à gauche à un retrait à droite en modifiant marge-gauche en marge-droite.
Méthode recommandée utilisant HTML
Il est possible d'obtenir les mêmes résultats que ci-dessus en utilisant un style en ligne dans HTML. L'utilisation de l'exemple CSS ci-dessus facilite la maintenance sur plusieurs pages Web. Si vous devez utiliser un style une seule fois, vous pouvez utiliser l'exemple suivant.
Ce texte est en retrait.
Dans ce premier exemple, tout le texte de la balise de paragraphe est mis en retrait à 40 pixels de la gauche. Les autres balises de paragraphe ne sont pas en retrait.
Ce texte est en retrait.
Dans ce deuxième exemple, seule la première ligne de texte du paragraphe sera indentée de 40 pixels à gauche. Aucune ligne de texte supplémentaire dans ce paragraphe ne sera mise en retrait.
Conseil: Vous pouvez également mettre en retrait avec un pourcentage. Par exemple, au lieu d'indenter par 40 pixels (pixels), vous pouvez remplacer le retrait par 5% pour indenter le texte par 5% de la vue actuelle. Vous pouvez également utiliser un espace em pour définir la largeur d'un retrait.
Conseil de bonus: vous pouvez également modifier le retrait d'un retrait à gauche à un retrait à droite en modifiant marge-gauche en marge-droite.
Méthode alternative
Une autre méthode courante (mais incorrecte) d’indentation du texte consiste à utiliser les balises, comme illustré dans l’exemple suivant. Bien qu'il s'agisse d'une solution beaucoup plus simple, l'utilisation de cette solution pour indenter votre texte peut entraîner des problèmes d'accessibilité. Cette balise est destinée à la citation de texte et non à l'indentation.
Ce texte serait en retrait