Wanneer u tekst aan de HTML-code voor een webpagina toevoegt, bijvoorbeeld in een alineanummer, hebt u weinig of geen controle over waar die tekstregels breken of welke afstand wordt gebruikt. Dit komt omdat de webbrowser de tekst naar behoefte doorstuurt op basis van het gebied dat de tekst bevat. Dit omvat responsieve websites met een zeer vloeiende lay-out die verandert op basis van de grootte van het scherm dat wordt gebruikt om de pagina te bekijken. HTML-tekst zal een regel verbreken waar het nodig is om het einde van zijn gebied te bereiken. Uiteindelijk speelt de browser meer een rol bij het bepalen hoe de tekst breekt dan jij.
In termen van het toevoegen van spatiëring om een bepaald formaat of een bepaalde lay-out te maken, herkent HTML de ruimte die aan de code is toegevoegd, inclusief spatiebalk, tab of carriage returns niet. Als u twintig spaties tussen één woord en het volgende woord plaatst, geeft de browser daar slechts één enkele spatie weer. Dit staat bekend als de instorting van de witte ruimte en het is eigenlijk een van de concepten van HTML waarmee veel nieuwkomers in de industrie eerst worstelen. Ze verwachten dat HTML-witruimte net zo werkt als in een programma als Microsoft Word, maar zo werkt HTML-witruimte helemaal niet.
In de meeste gevallen is de normale verwerking van tekst in een HTML-document precies wat u nodig hebt, maar in andere gevallen wilt u misschien juist meer controle over hoe de tekst precies eruit springt en waar lijnen worden verbroken. Dit staat bekend als vooraf opgemaakte tekst (met andere woorden, u dicteert het formaat). U kunt vooraf geformatteerde tekst toevoegen aan uw webpagina's met behulp van de HTML
De … gebruiken Label
Vele jaren geleden was het gebruikelijk om webpagina's te zien met blokken vooraf geformatteerde tekst. De … gebruiken
pre tag om secties van de pagina te definiëren zoals deze zijn opgemaakt door het typen zelf, was een snelle en gemakkelijke manier voor webontwerpers om de tekst weer te geven zoals ze wilden. Dit was vóór de opkomst van CSS voor lay-out, toen webontwerpers echt vast zaten te proberen de opmaak te forceren met behulp van tabellen en andere HTML-only methoden. Dit werkte (nogal) terug omdat voorgeformatteerde tekst is gedefinieerd als tekst waarin de structuur wordt gedefinieerd door typografische conventies in plaats van door de HTML-weergave.
Tegenwoordig wordt deze tag niet zo veel gebruikt omdat CSS ons in staat stelt om visuele stijlen op een veel efficiëntere manier te dicteren dan te proberen verschijning in onze HTML te forceren en omdat webstandaarden een duidelijke scheiding van structuur (HTML) en stijlen (CSS) voorschrijven. Toch kunnen er gevallen zijn waarin vooraf opgemaakte tekst logisch is, zoals voor een postadres waar u de regeleinden wilt forceren of voor voorbeelden van poëzie waarbij regeleinden essentieel zijn voor het lezen en de algehele stroom van de inhoud.
Hier is een manier om de HTML te gebruiken
label:
Twas brillig en de slithey toven
GYRE en MOGELIJK
in
de
wabe
Typische HTML vouwt de witruimte in het document samen. Dit betekent dat de carriage-returns, spaties en tab-tekens die in deze tekst worden gebruikt, allemaal in één ruimte zijn samengevouwen. Als u het citaat hierboven in een typische HTML-tag zoals de p (alineatje) tag hebt getypt, zou u eindigen met één regel tekst, zoals deze: Twas brillig en de slithey toven. Gaat en wuift in de wabe Het voorlabel laat de witruimtetekens zoals ze zijn. Regelafbrekingen, spaties en tabbladen worden dus allemaal onderhouden in de weergave van die inhoud door de browser. Het citaat in een pre tag voor diezelfde tekst zou resulteren in deze weergave: Twas brillig en de slithey toven GYRE en MOGELIJK in de wabe De pre tag doet meer dan alleen de spaties en pauzes behouden voor de tekst die u schrijft. In de meeste browsers is het geschreven in een monospace-lettertype. Hierdoor zijn de tekens in de tekst allemaal even breed. Met andere woorden, de letter i neemt evenveel ruimte in als de letter w. Als u liever een ander lettertype gebruikt in plaats van de standaardmonospace die de browser weergeeft, kunt u dit nog steeds wijzigen met stijlpagina's en een ander lettertype selecteren waarin u de tekst wilt weergeven. Eén ding om op te letten is dat in HTML5 het kenmerk "width" niet langer wordt ondersteund voor de Bewerkt door Jeremy Girard op 2/2/17 Betreffende lettertypen
HTML5
element. In HTML 4.01 specificeerde de breedte het aantal tekens dat een regel zou bevatten, maar dit is weggelaten voor HTML5 en hoger.
