La création d'espaces et la séparation physique des éléments en HTML peuvent être difficiles à comprendre pour le concepteur Web débutant. Ceci est dû au fait HTML a une propriété connue sous le nom de « whitespace collapse ». que vous tapiez 1 espace ou 100 dans votre code HTML, le navigateur Web réduit automatiquement ces espaces à un seul espace. Ceci est différent d'un programme comme Microsoft Word, qui permet aux créateurs de documents d'ajouter plusieurs espaces pour séparer les mots et d'autres éléments de ce document. Ce n'est pas ainsi que fonctionne l'espacement de conception de sites Web.
Alors, comment ajouter des espaces en HTML qui s'affichent sur le page Web que vous avez créée? Cet article examine certaines des différentes manières.
Espaces en HTML avec CSS
La meilleure façon d'ajouter des espaces dans votre HTML est avec Feuilles de style en cascade (CSS). CSS doit être utilisé pour ajouter tous les aspects visuels d'une page Web, et puisque l'espacement fait partie des caractéristiques de conception visuelle d'une page, CSS est l'endroit où vous voulez que cela se fasse.
En CSS, vous pouvez utiliser les propriétés margin ou padding pour ajouter de l'espace autour des éléments. En outre, la propriété text-indent ajoute de l'espace au début du texte, par exemple pour l'indentation des paragraphes.
Voici un exemple d'utilisation de CSS pour ajouter de l'espace devant tous vos paragraphes. Ajoutez le CSS suivant à votre externe ou alors interne feuille de style:
p {
retrait de texte: 3em ;
}
Espaces en HTML à l'intérieur de votre texte
Si vous souhaitez simplement ajouter un ou deux espaces supplémentaires à votre texte, vous pouvez utiliser l'espace insécable. Ce caractère agit comme un espace standard, sauf qu'il ne se réduit pas à l'intérieur du navigateur.
Voici un exemple de la façon d'ajouter cinq espaces à l'intérieur d'une ligne de texte:
Ce texte a cinq espaces supplémentaires à l'intérieur
Utilise le HTML:
Ce texte a cinq espaces supplémentaires à l'intérieur
Vous pouvez également utiliser le
balise pour ajouter des sauts de ligne supplémentaires.
Cette phrase a cinq sauts de ligne à la fin
Pourquoi l'espacement en HTML est une mauvaise idée
Bien que ces options fonctionnent toutes les deux, l'élément espaces insécables ajoutera en effet de l'espacement à votre texte et à la ligne. les pauses ajouteront un espacement sous le paragraphe ci-dessus - ce n'est pas la meilleure façon de créer un espacement dans votre page Web. L'ajout de ces éléments à votre HTML ajoute des informations visuelles au code au lieu de séparer la structure d'une page (HTML) des styles visuels (CSS). Les meilleures pratiques dictent que ceux-ci doivent être séparés pour un certain nombre de raisons, notamment la facilité de mise à jour à l'avenir et la taille globale du fichier et performances des pages.
Si vous utilisez une feuille de style externe pour dicter tous vos styles et espacements, il est facile de modifier ces styles pour l'ensemble du site, car vous devez simplement mettre à jour cette feuille de style.
Prenons l'exemple ci-dessus de la phrase avec cinq
balises à la fin de celui-ci. Si vous vouliez cet espacement au bas de chaque paragraphe, vous auriez besoin d'ajouter ce code HTML à chaque paragraphe de l'ensemble de votre site. C'est une bonne quantité de balisage supplémentaire qui gonflera vos pages. De plus, si vous décidez ultérieurement que cet espacement est trop ou trop petit et que vous souhaitez le modifier un peu, vous devrez modifier chaque paragraphe de l'ensemble de votre site Web. Non, merci!
Au lieu d'ajouter ces éléments d'espacement à votre code, utilisez CSS.
p {
rembourrage en bas: 20px ;
}
Cette seule ligne de CSS ajouterait un espacement sous les paragraphes de votre page. Si vous souhaitez modifier cet espacement à l'avenir, modifiez cette ligne (au lieu du code de l'ensemble de votre site) et vous êtes prêt à partir!
Maintenant, si vous avez besoin d'ajouter un seul espace dans une partie de votre site Web, en utilisant un
tag ou un seul espace insécable n'est pas la fin du monde, mais vous devez faire attention. L'utilisation de ces options d'espacement HTML en ligne peut être une pente glissante. Bien qu'un ou deux ne nuisent pas à votre site, si vous continuez dans cette voie, vous introduirez des problèmes dans vos pages. En fin de compte, vous feriez mieux de vous tourner vers CSS pour l'espacement HTML et tous les autres besoins visuels des pages Web.