La création d'espaces et la séparation physique d'éléments en HTML peut être difficile à comprendre pour le concepteur Web débutant. En effet, HTML possède une propriété appelée "réduction des espaces". Que vous tapiez 1 espace ou 100 dans votre code HTML, le navigateur Web réduit automatiquement ces espaces en un seul espace. Cela diffère d'un programme tel que Microsoft Word, qui permet aux créateurs de documents d'ajouter plusieurs espaces pour séparer les mots et les autres éléments de ce document. Ce n'est pas ainsi que fonctionne l'espacement des sites Web.
Alors, comment ajoutez-vous des espaces en HTML apparaissant sur la page Web? Cet article examine certaines des manières différentes.
Espaces en HTML avec CSS
La méthode recommandée pour ajouter des espaces dans votre code HTML consiste à utiliser des feuilles de style en cascade (CSS). CSS doit être utilisé pour ajouter tous les aspects visuels d’une page Web. Etant donné que l’espacement fait partie des caractéristiques de conception visuelle d’une page, CSS est l’endroit où vous souhaitez que cela soit fait.
En CSS, vous pouvez utiliser les propriétés margin ou padding pour ajouter de l'espace autour des éléments. De plus, la propriété text-indent ajoute un espace au début du texte, par exemple pour les paragraphes indentés.
Voici un exemple d'utilisation de CSS pour ajouter de l'espace devant tous vos paragraphes. Ajoutez le CSS suivant à votre feuille de style externe ou interne:
p {retrait du texte: 3em;} Si vous souhaitez simplement ajouter un espace supplémentaire ou deux à votre texte, vous pouvez utiliser l'espace insécable. Ce caractère agit comme un caractère d'espace standard, à la différence qu'il ne s'effondre pas dans le navigateur. Voici un exemple d’ajout de cinq espaces dans 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 Cette phrase comporte cinq sauts de ligne à la fin. Bien que ces options fonctionnent toutes deux - l'élément d'espacement insécable va effectivement ajouter de l'espacement à votre texte et les sauts de ligne ajouteront de l'espacement sous le paragraphe ci-dessus - ce n'est pas la meilleure façon de créer de l'espacement sur votre page Web. L'ajout de ces éléments à votre code 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 imposent de les séparer pour un certain nombre de raisons, notamment la facilité de mise à jour ultérieure, la taille globale du fichier et les performances de la page. Si vous utilisez une feuille de style externe pour dicter tous vos styles et votre espacement, il est facile de modifier ces styles pour tout le site, car vous devez simplement mettre à jour cette feuille de style. Considérons l’exemple ci-dessus de la phrase avec cinq Au lieu d'ajouter ces éléments d'espacement à votre code, utilisez CSS. p {rembourrage en bas: 20px;} Cette 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 devez ajouter un seul espace dans une partie de votre site Web, utilisez un Espaces en HTML: dans votre texte
balise pour ajouter des sauts de ligne supplémentaires.
Pourquoi l'espacement en HTML est une mauvaise idée
balises à la fin de celui-ci. Si vous souhaitez que cet espacement soit au bas de chaque paragraphe, vous devez 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 par la suite que cet espacement est trop grand ou trop petit et que vous souhaitez le modifier un peu, vous devez modifier chaque paragraphe de votre site Web. Non, merci!
tag ou un seul espace insécable n'est pas la fin du monde, mais vous devez être prudent. L'utilisation de ces options d'espacement HTML en ligne peut être une pente glissante. Même si un ou deux sites ne risquent pas de nuire à votre site, si vous continuez dans cette voie, vous allez introduire des problèmes dans vos pages. En fin de compte, mieux vaut utiliser CSS pour l'espacement HTML et tous les autres besoins visuels des pages Web.
