Het creëren van spaties en fysieke scheiding van elementen in HTML kan voor de beginnende webontwerper moeilijk te begrijpen zijn. Dit komt omdat HTML een eigenschap heeft die bekend staat als 'witruimte samenvouwen'. of u nu 1 spatie of 100 in uw HTML-code typt, de webbrowser vouwt die spaties automatisch samen in slechts één spatie. Dit is anders dan een programma zoals Microsoft Word, waarmee makers van documenten meerdere spaties kunnen toevoegen aan afzonderlijke woorden en andere elementen van dat document. Dit is niet hoe website-ontwerpruimte werkt.
Dus, hoe voeg je witruimten toe in HTML die op de webpagina verschijnen? Dit artikel onderzoekt enkele van de verschillende manieren.
Spaties in HTML met CSS
De voorkeur manier om spaties toe te voegen in uw HTML is met Cascading Style Sheets (CSS). CSS zou moeten worden gebruikt om visuele aspecten van een webpagina toe te voegen, en aangezien de spatiëring deel uitmaakt van de visuele ontwerpkenmerken van een pagina, is CSS waar u wilt dat dit wordt gedaan.
In CSS kunt u de marge- of padding-eigenschappen gebruiken om ruimte rond elementen toe te voegen. Bovendien voegt de eigenschap text-indent ruimte toe aan de voorzijde van de tekst, bijvoorbeeld voor het inspringen van alinea's.
Hier is een voorbeeld van hoe je CSS kunt gebruiken om ruimte toe te voegen voor al je paragrafen. Voeg de volgende CSS toe aan uw externe of interne stylesheet:
p {tekst-inspringing: 3em;} Als u slechts een extra spatie of twee aan uw tekst wilt toevoegen, kunt u de niet-verbreekruimte gebruiken. Dit karakter gedraagt zich net als een standaard spatie, alleen klapt het niet samen in de browser. Hier is een voorbeeld van hoe u vijf spaties in een regel tekst kunt toevoegen: Deze tekst heeft vijf extra spaties erin Gebruikt de HTML: Deze tekst heeft vijf extra spaties erin U kunt ook de Deze zin heeft aan het einde vijf regeleinden Hoewel deze opties allebei werken - het element voor niet-afbrekende spaties voegt inderdaad ruimte toe aan uw tekst en de regeleinden zullen spaties toevoegen onder de hierboven weergegeven alinea - dit is niet de beste manier om ruimte in uw webpagina te creëren. Als u deze elementen aan uw HTML toevoegt, voegt u visuele informatie toe aan de code in plaats van de structuur van een pagina (HTML) te scheiden van de visuele stijlen (CSS). Volgens best practices moeten deze om verschillende redenen worden gescheiden, waaronder het gemak van bijwerken in de toekomst en de algehele bestandsgrootte en de prestaties van de pagina. Als u een externe stylesheet gebruikt om al uw stijlen en spatiëring te dicteren, dan is het eenvoudig om die stijlen voor de hele site te veranderen, omdat u eenvoudig die ene stylesheet hoeft bij te werken. Bekijk het voorbeeld hierboven van de zin met vijf Gebruik CSS in plaats van deze spacing-elementen toe te voegen aan uw code. p {padding-bottom: 20px;} Die ene regel CSS zou spaties toevoegen aan de paragrafen van je pagina. Als u in de toekomst die afstand wilt wijzigen, bewerkt u deze regel (in plaats van de code van uw hele site) en bent u klaar om te gaan! Als u nu één spatie in een deel van uw website moet toevoegen, gebruikt u a Spaties in HTML: Inside Your Text
tag om extra regeleinden toe te voegen.
Waarom Spacing in HTML een slecht idee is
tags aan het einde ervan. Als u die hoeveelheid ruimte onder aan elke alinea wilt hebben, moet u die HTML-code toevoegen aan elke alinea op uw hele site. Dat is een behoorlijke hoeveelheid extra markup die uw pagina's opzwelt. Als u besluit dat deze tussenruimte te veel of te weinig is en u wilt dit een beetje wijzigen, moet u elke afzonderlijke alinea van uw hele website bewerken. Nee, dank u!
tag of een enkele niet-brekende ruimte is niet het einde van de wereld, maar je moet voorzichtig zijn. Het gebruik van deze inline HTML-spatiëringopties kan een gladde helling zijn. Hoewel een of twee uw site mogelijk geen kwaad doen, zet u problemen in uw pagina's als u dat pad blijft volgen. Uiteindelijk kun je je beter richten op CSS voor HTML-spatiëring en alle andere visuele behoeften van webpagina's.
