Het maken van spaties en fysieke scheiding van elementen in HTML kan voor de beginnende webdesigner moeilijk te begrijpen zijn. Dit is zo omdat HTML heeft een eigenschap die bekend staat als 'witruimte instorten'. of u nu 1 spatie of 100 typt in uw HTML-code, de webbrowser vouwt deze spaties automatisch samen tot slechts één enkele spatie. Dit is anders dan een programma als Microsoft Word, waarmee makers van documenten meerdere spaties kunnen toevoegen om woorden en andere elementen van dat document te scheiden. Dit is niet hoe ruimte voor website-ontwerp werkt.
Dus, hoe voeg je spaties toe in HTML die verschijnen op de webpagina die je hebt gemaakt? In dit artikel worden enkele van de verschillende manieren onderzocht.
Spaties in HTML met CSS
De beste manier om spaties in uw HTML toe te voegen is met Cascading Style Sheets (CSS). CSS moet 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 de plaats waar u dit wilt doen.
In CSS kunt u de marge- of opvuleigenschappen gebruiken om ruimte rond elementen toe te voegen. Bovendien voegt de eigenschap text-indent ruimte toe aan de voorkant van de tekst, bijvoorbeeld voor het laten inspringen van alinea's.
Hier is een voorbeeld van hoe u CSS kunt gebruiken om ruimte voor al uw alinea's toe te voegen. Voeg de volgende CSS toe aan uw extern of intern stijlblad:
p {
tekst-inspringing: 3em;
}
Spaties in HTML in uw tekst
Als u alleen een extra spatie of twee aan uw tekst wilt toevoegen, kunt u de vaste spatie gebruiken. Dit teken werkt net als een standaard spatieteken, alleen klapt het niet in de browser in.
Hier is een voorbeeld van hoe u vijf spaties binnen 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
tag om extra regeleinden toe te voegen.
Deze zin heeft aan het einde vijf regeleinden
Waarom spatiëring in HTML een slecht idee is
Hoewel deze opties beide werken, voegt het niet-afbrekende element spaties inderdaad spaties toe aan uw tekst en de regel pauzes voegen spaties toe onder de bovenstaande alinea - dit is niet de beste manier om spaties te creëren in je webpagina. Door deze elementen aan uw HTML toe te voegen, wordt visuele informatie aan de code toegevoegd in plaats van de structuur van een pagina (HTML) te scheiden van de visuele stijlen (CSS). Best practices schrijven voor dat deze om een aantal redenen gescheiden moeten zijn, waaronder het gemak van updates in de toekomst en de algehele bestandsgrootte en paginaprestaties.
Als je een externe stylesheet gebruikt om al je stijlen en spaties te dicteren, dan is het gemakkelijk om die stijlen voor de hele site te wijzigen, omdat je gewoon die ene stylesheet hoeft bij te werken.
Beschouw het bovenstaande voorbeeld van de zin met vijf
tags aan het einde ervan. Als je die hoeveelheid ruimte onder aan elke alinea wilde hebben, zou je die HTML-code aan elke alinea op je hele site moeten toevoegen. Dat is een behoorlijke hoeveelheid extra opmaak die uw pagina's zal doen opzwellen. Bovendien, als u later besluit dat deze afstand te veel of te weinig is, en u wilt deze een beetje veranderen, moet u elke afzonderlijke alinea in uw hele website bewerken. Nee, dank u!
Gebruik CSS in plaats van deze spatiëringselementen aan uw code toe te voegen.
p {
opvulling-bodem: 20px;
}
Die ene regel CSS zou spaties toevoegen onder de alinea's van uw pagina. Als je die afstand in de toekomst wilt wijzigen, bewerk dan deze ene regel (in plaats van de code van je hele site) en je bent klaar om te gaan!
Als u nu een enkele spatie in een deel van uw website moet toevoegen, gebruikt u a
tag of een enkele vaste spatie is niet het einde van de wereld, maar je moet voorzichtig zijn. Het gebruik van deze inline HTML-afstandsopties kan een gladde helling zijn. Hoewel een of twee uw site misschien niet schaden, zult u, als u op dat pad voortgaat, problemen op uw pagina's introduceren. Uiteindelijk kunt u zich beter wenden tot CSS voor HTML-afstand en alle andere visuele behoeften van webpagina's.