Utilisation de caractères d'espacement pour formater le code HTML, d'espaces insécables et d'autres caractères spéciaux (mnémoniques). Espaces en HTML

Tous ceux qui ont essayé créer des sites Web en HTML confronté à ce problème. Presque tout Balises HTML découpez des espaces supplémentaires. Et cette fois je vais vous donner un exemple de cette « découpe », et aussi vous expliquer comment faire en sorte que les espaces ne soient pas découpés.

Commençons par écrire un simple Code HTML:

Un peu de texte Suite...

Si vous regardez le résultat, vous verrez que tous nos espaces ont été découpés et qu’il n’en reste qu’un. Et presque toutes les balises font cela.

Il y a trois options afficher des espaces supplémentaires en HTML. La première façon est d'utiliser une balise<pré>:

Un peu de texte Suite...

Du coup, vous verrez que des écarts subsistent, et c’est exactement ce que nous souhaitions.

Mais il existe une autre méthode que j'utilise régulièrement : l'entité "". Cette entité remplace simplement le caractère espace :

Un peu de texte Suite...

De ce fait, vous verrez également toute une série d’espaces. Pour moi, cette méthode est meilleure car vous n'avez pas besoin d'utiliser de balises supplémentaires. Mais c'est une question de goût. Où est-ce nécessaire ? espace supplémentaire en HTML, insérez simplement "" et profitez du résultat.

Et enfin, la dernière façon est en utilisant CSS. Pour cela, il vous suffit d'ajouter ce style :

P(
espace blanc : pré ;
}

Cette méthode est la plus rapide et la plus simple, cependant, je ne l'utilise pas car dans ma pratique, il y a peu de cas dans lesquels je dois ajouter de nombreux espaces consécutifs. Et si cela se produit, j'utilise l'entité " " plusieurs fois. En outre, propriété d'espace blanc n'est pas pris en charge par tous les navigateurs (en particulier, IE6 Et IE7 ne supporte pas), ce qui limite déjà la portée de cette méthode.

De manière générale, pour résumer :

1) Si une partie de votre texte contient beaucoup d'espaces à différents endroits, utilisez la balise<pré>.

2) Si vous rencontrez un seul moment quelque part où vous avez besoin de plusieurs espaces d'affilée, utilisez l'entité "  ";

3) Si votre page entière est composée de plusieurs espaces consécutifs (bien que cela arrive extrêmement rarement), utilisez la propriété espace blanc avec du sens pré.

Si vous voulez en savoir plus sur HTML, alors jetez un œil à mon cours gratuit avec un exemple de création de site Web sur HTML:

Bonjour, chers lecteurs du site blog ! Ceux qui s’en sont familiarisés, au moins superficiellement, en ont probablement déjà pris note, quoique de manière générale. Cela signifie qu'ils ont une idée des symboles HTML généralement utilisés dans le code du document.

Dans l'article d'aujourd'hui, nous allons essayer de comprendre ce qu'est un espace en HTML et dans quels cas vous pouvez utiliser des caractères d'espacement lors du formatage du code lui-même pour une lecture facile. Nous découvrirons quand il est nécessaire d'utiliser un espace insécable et nous familiariserons également avec d'autres caractères spéciaux (ou, comme on les appelle aussi, des mnémoniques).

En fait, je vous conseillerais de ne pas ignorer le sujet de l'utilisation de divers caractères spéciaux, car il s'agit d'un élément important qui vous permet de compléter votre étude du langage de balisage hypertexte. De manière générale, les informations fournies dans cette publication ne seront certainement pas superflues. Eh bien, venons-en au fait.

Espaces et caractères d'espacement en HTML

Il y a d’abord une remarque importante à faire. Il existe des touches spéciales sur un clavier d'ordinateur qui vous permettent de séparer le texte (plus d'informations ci-dessous). Cependant, seule une large barre d'espace permet de séparer les mots non seulement dans l'éditeur, mais également dans la fenêtre du navigateur. Il y a des nuances lors de la rupture des lignes et de l'indentation des bords.

Comme vous le savez, l'affichage de certains éléments dans un navigateur web est déterminé par des balises. Pour formater le texte, le célèbre , basé sur des blocs, est utilisé. Autrement dit, son contenu s'étend sur toute la largeur disponible.

À envelopper les lignes dans le paragraphe P, vous devez utiliser une seule balise BR, avec laquelle vous pouvez le faire. Disons que nous devons insérer dans le texte quelques lignes d'un poème que nous écrivons dans un éditeur de texte :

Malgré le fait que les lignes du verset soient correctement situées et que les traits d'union soient faits aux bons endroits, tout sera différent dans le navigateur :

Pour obtenir le même affichage dans une fenêtre de navigateur Web, vous devez écrire BR à chaque saut de ligne :

Nous avons maintenant accompli la tâche et les lignes poétiques s'afficheront tout à fait correctement dans le navigateur :

Ainsi, les sauts de ligne nécessaires sont complétés. Une autre caractéristique à noter ici est que plusieurs espaces se succédant les uns après les autres sont affichés par le navigateur Web comme un seul. Vous pouvez le vérifier si dans le même éditeur vous essayez de mettre non pas un, mais plusieurs espaces entre deux mots et, en cliquant sur le bouton « Enregistrer », regardez le résultat dans le navigateur.

Espace, tabulation et saut de ligne

En gros, avec ces caractères d'espacement Nous apprenons à nous connaître dès que nous commençons à travailler avec le texte dans l'éditeur et que nous le formatons sous la forme requise. Pour mettre en œuvre une telle tâche, il existe des touches spéciales, dont chacune correspond à son propre caractère espace :

• La barre d'espace est la touche la plus large d'un clavier d'ordinateur (sans étiquette) ;
• Tab - une touche à gauche avec l'inscription « Tab » et deux flèches pointant dans des directions différentes ;
• Saut de ligne - touche "Entrée".

Cependant, comme je l'ai dit plus haut, nous obtenons le résultat final souhaité non seulement dans un éditeur de texte, mais également dans un navigateur, uniquement lorsque nous utilisons la première touche. Les trois touches (y compris la tabulation et le saut de ligne sont utiles lors du formatage du code HTML. Disons que voici à quoi ressemble un fragment de code dans NotePad++ (il y a beaucoup d'informations sur cet éditeur) lors de l'affichage de tous les caractères d'espacement :

Nous obtenons un code facile à lire et à comprendre grâce aux espaces. Les flèches orange indiquent les indentations créées à l'aide de la touche Tab, et les symboles CR et LF indiquent les sauts de ligne créés à l'aide de la touche Entrée.

Les conteneurs imbriqués les uns dans les autres sont visualisés et les balises d'ouverture et de fermeture sont clairement visibles. Sous cette forme, ce code peut être facilement modifié. Comparez-le maintenant avec le même code, qui n'a pas une telle division de texte :

De la même manière, en utilisant des espaces, vous pouvez écrire des règles CSS qui paraîtront visuellement claires et digestes :

Après avoir ramené tous les styles à un dénominateur commun et terminé complètement la modification du fichier de styles, vous pouvez effectuer la modification en supprimant tous les espaces du code. Ceci est nécessaire pour augmenter , ce qui est très important lors de la promotion d'une ressource.

Caractères spéciaux (ou mnémoniques) dans le code HTML

Voyons maintenant les cas dans lesquels il est nécessaire d'utiliser les caractères spéciaux que j'ai évoqués en début d'article. Les caractères spéciaux HTML, parfois appelés mnémoniques, ont été introduits pour résoudre un problème de longue date lié aux encodages survenu dans le langage de balisage hypertexte.

Lorsque vous tapez du texte sur le clavier, les caractères de la langue que vous utilisez sont codés. Dans le navigateur Web, le texte saisi sera affiché en utilisant les polices que vous avez sélectionnées à la suite de l'opération de décodage inverse.

Le fait est qu’il existe de nombreux codages de ce type ; nous n’avons désormais aucun objectif de les analyser en détail. C'est juste qu'il peut manquer à chacun d'eux certains symboles, qui doivent cependant être affichés. Disons que vous ressentez le besoin d'écrire des guillemets simples ou un accent, mais que ces icônes ne sont tout simplement pas incluses dans l'ensemble.

Afin d'éliminer ce problème, un système de symboles spéciaux a été introduit, qui comprend un grand nombre de mnémoniques différents. Ils commencent tous par une esperluette "&" et se terminent généralement par un point-virgule ";". Au début, chaque caractère spécial possédait son propre code numérique. Par exemple, pour un espace insécable, que nous examinerons plus en détail ci-dessous, l'entrée suivante sera valable :

Mais après un certain temps, les symboles les plus courants se sont vu attribuer des lettres analogues (mnémoniques) pour les rendre plus faciles à mémoriser. Disons que pour le même espace insécable, cela ressemble à ceci :

En conséquence, le navigateur affiche le symbole correspondant. La liste des mnémoniques est très volumineuse, caractères spéciaux les plus couramment utilisés en HTML vous pouvez découvrir ci-dessous le tableau suivant :

Cas d'utilisation de certains caractères spéciaux, notamment les espaces insécables et les traits d'union souples

Si vous avez déjà étudié un peu le tableau, vous avez reçu la confirmation de ce que j'ai dit ci-dessus, à savoir que pour afficher tous les caractères spéciaux, un code numérique () ou son analogue alphabétique (mnémoniques symboliques) est utilisé, où au lieu d'un ensemble de hachage des marques et des chiffres, des lettres () sont écrites.

Voyons maintenant quand utiliser ces codes. Disons que dans un article, vous devez indiquer une balise HTML à des fins d'information, par exemple :