Comment indenter facilement mon code HTML ?

Comment indenter facilement mon code HTML ?

Il existe différentes méthodes d’indentation du texte. Cependant, pour des raisons de compatibilité avec plusieurs navigateurs et d’accessibilité, nous discutons des méthodes les plus populaires d’indentation du texte sur votre page Web.

Méthode recommandée avec CSS & HTML

Pour l’indentation d’un texte ou d’un paragraphe, la méthode la plus couramment utilisée et recommandée serait d’utiliser CSS. Vous trouverez ci-dessous différents exemples de la façon dont le CSS peut être utilisé pour indenter du texte. Chacun de ces exemples sera placé entre vos balises HTML.

L’exemple suivant créerait une classe de style nommée « tab » qui indente le texte et le paragraphe 40 pixels à partir de la gauche.

Une fois que le code ci-dessus est dans le champ

) comme indiqué.

Exemple d’un onglet

L’inclusion de CSS dans votre document HTML, comme indiqué ci-dessus, est appelée CSS en ligne. Il est utile pour apporter rapidement des changements, mais à long terme, il est difficile de le faire 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 le changement ultérieur du CSS, car tout le CSS est défini au même endroit.

Pour créer un lien vers votre fichier CSS externe, ajoutez la ligne suivante dans votre document HTML au format

Lire aussi
Comment mettre en évidence du texte avec HTML et le CSS

Une fois ce fichier.css créé, éditez le fichier et ajoutez le même code CSS, à l’exception de l’option

Enfin, une fois les étapes ci-dessus terminées, vous pouvez tabuler n’importe quel texte à l’aide de la même commande

que nous avons montré ci-dessus.

Il existe également d’autres formes d’indentation. Par exemple, si vous voulez seulement indenter la première ligne d’un paragraphe, au lieu d’utiliser la ligne CSS ci-dessus, vous devriez utiliser la ligne suivante.

Vous pouvez également indenter en utilisant un pourcentage. Par exemple, au lieu d’indenter par 40px (pixels), vous pourriez remplacer l’indentation par 5% pour indenter le texte de 5% de la vue courante. Vous pouvez également utiliser un espace em pour définir la largeur d’un retrait.

Vous pouvez également changer l’indentation de gauche en indentation de droite en changeant marge-gauche en marge-droite.

Méthode recommandée utilisant HTML

Il est possible d’obtenir les mêmes résultats ci-dessus en utilisant un style en ligne dans HTML. Bien que l’utilisation de l’exemple CSS ci-dessus peut faciliter la gestion de plusieurs pages Web, si vous avez besoin d’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 paragraphe est indenté de 40 pixels à gauche. Les autres balises de paragraphe ne sont pas indentées.

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. Toute ligne de texte supplémentaire dans ce paragraphe ne sera pas indentée.

Lire aussi
Comment centrer une image sur une page Web en utilisant HTML

Vous pouvez également indenter en utilisant un pourcentage. Par exemple, au lieu d’indenter par 40px (pixels), vous pourriez remplacer l’indentation par 5% pour indenter le texte de 5% de la vue courante. Vous pouvez également utiliser un espace em pour définir la largeur d’un retrait.

Vous pouvez également changer l’indentation de gauche en indentation de droite en changeant marge-gauche en marge-droite.

Méthode alternative

Une autre méthode courante (mais incorrecte) d’indentation du texte est l’utilisation de la méthode

vignettes

Ce texte serait en retrait

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *