Lorsque vous ajoutez du texte au code HTML d'une page Web, par exemple dans un élément de paragraphe, vous n'avez que peu ou pas de contrôle sur l'endroit où ces lignes de texte seront interrompues ou sur l'espacement qui sera utilisé. En effet, le navigateur Web diffusera le texte selon les besoins en fonction de la zone qui le contient. Ceci comprend sites Web réactifs qui aura une mise en page très fluide qui change en fonction de la taille de l'écran utilisé pour afficher la page. Le texte HTML coupera une ligne là où il en a besoin une fois qu'il aura atteint la fin de sa zone de contenu. En fin de compte, le navigateur joue un rôle plus important que vous dans la détermination de la rupture du texte.
En termes d'ajout d'espacement pour créer un certain format ou une mise en page, HTML ne reconnaît pas l'espacement ajouté au code, y compris la barre d'espace, la tabulation ou les retours chariot. Si vous mettez vingt espaces entre un mot et le mot qui le suit, le navigateur n'affichera qu'un seul espace à cet endroit. C'est ce qu'on appelle l'effondrement des espaces blancs et c'est en fait l'un des concepts du HTML avec lequel de nombreux nouveaux venus dans l'industrie se débattent au début. Ils s'attendent à ce que les blancs HTML fonctionnent comme dans un programme comme Microsoft Word, mais ce n'est pas du tout comme ça que les blancs HTML fonctionnent.
Dans la plupart des cas, la gestion normale du texte dans n'importe quel document HTML est exactement ce dont vous avez besoin, mais dans d'autres instances, vous voudrez peut-être en fait plus de contrôle sur la façon dont le texte s'espace et où il s'interrompt lignes. C'est ce qu'on appelle du texte préformaté (en d'autres termes, vous dictez le format). Vous pouvez ajouter du texte préformaté à vos pages Web à l'aide du code HTML.
En utilisant le
ÉtiqueterIl y a de nombreuses années, il était courant de voir des pages Web avec des blocs de texte préformaté. En utilisant le
La balise pour définir les sections de la page comme formatées par la saisie elle-même était un moyen rapide et facile pour les concepteurs de sites Web d'afficher le texte comme ils le souhaitaient. C'était avant l'avènement du CSS pour la mise en page, lorsque les concepteurs de sites Web étaient vraiment coincés à essayer de forcer la mise en page en utilisant des tableaux et d'autres méthodes uniquement HTML. Cela (un peu) a fonctionné parce que le texte pré-formaté est défini comme un texte dans lequel la structure est définie par des conventions typographiques plutôt que par le rendu HTML.Aujourd'hui, cette balise n'est pas autant utilisée car CSS nous permet de dicter des styles visuels de manière beaucoup plus efficace que d'essayer pour forcer l'apparence dans notre HTML et parce que les normes Web imposent une séparation claire de la structure (HTML) et des styles (CSS). Pourtant, il peut y avoir des cas où le texte pré-formaté a du sens, comme pour une adresse postale où vous voulez forcer les sauts de ligne ou pour des exemples de poésie où les sauts de ligne sont essentiels à la lecture et au flux global du contenu.
Voici une façon d'utiliser le HTML
étiqueter:Le code HTML typique réduit l'espace blanc dans le document. Cela signifie que les retours chariot, les espaces et les tabulations utilisés dans ce texte seraient tous réduits à un seul espace. Si vous avez tapé la citation ci-dessus dans une balise HTML typique comme la balise p (paragraphe), vous vous retrouveriez avec une ligne de texte, comme celle-ci:
Twas brillig et les toves slithey ont gyre et gimble dans le wabe.
La balise pre laisse les espaces blancs tels quels. Ainsi, les sauts de ligne, les espaces et les tabulations sont tous conservés dans le rendu de ce contenu par le navigateur. Mettre la citation à l'intérieur d'un
tag pour ce même texte se traduirait par cet affichage:Twas brillant et les toves slithey
Est-ce que gyre et gimble
dans
les
wabeConcernant les polices
le
tag fait plus que simplement maintenir les espaces et les pauses pour le texte que vous écrivez. Dans la plupart des navigateurs, il est écrit dans une police à espacement fixe. Cela rend les caractères du texte tous égaux en largeur. En d'autres termes, la lettre i prend autant de place que la lettre w.Si vous préférez utiliser une autre police à la place de la police à espacement fixe par défaut affichée par le navigateur, vous pouvez toujours la modifier avec feuilles de style et sélectionnez tout autre Police de caractère vous souhaitez que le texte soit rendu.
HTML5
Une chose à garder à l'esprit est que, dans HTML5, l'attribut "width" n'est plus pris en charge pour le
élément. Dans HTML 4.01, la largeur spécifiait le nombre de caractères qu'une ligne devait contenir, mais cela a été supprimé pour HTML5 et au-delà.