Aanbevolen methode met CSS & HTML
Voor het inspringen van tekst of een paragraaf, zou de meest gebruikte en aanbevolen methode zijn om CSS te gebruiken. Hieronder volgen verschillende voorbeelden van hoe CSS kan worden gebruikt om tekst te laten inspringen. Elk van deze voorbeelden zou tussen uw HTML-tags worden geplaatst.
In het volgende voorbeeld wordt een stijlklasse met de naam "tabblad" gemaakt die de tekst inspringt en alinea 40 pixels vanaf de linkerkant.
Zodra de bovenstaande code in de sectie staat, kunt u deze op elk gewenst moment gebruiken door deze aan uw alinea toe te voegen (
) tags zoals weergegeven.
Voorbeeld van een tabblad
Het opnemen van CSS in uw HTML-document, zoals hierboven weergegeven, wordt "in-line" CSS genoemd. Het is handig om snel wijzigingen aan te brengen, maar op de lange termijn is het moeilijk om dit later te wijzigen.
In plaats daarvan kunt u al uw CSS-code gebruiken en deze een afzonderlijk bestand plaatsen, met de extensie .css. Vervolgens kunt u vanuit elk HTML-document naar dit ene bestand linken en dat document kan die CSS-eigenschappen gebruiken. Het gebruik van een extern CSS-bestand maakt het later eenvoudiger om de CSS te wijzigen, omdat alle CSS op één plaats is gedefinieerd.
Om te linken naar uw externe CSS-bestand, voegt u de volgende regel toe aan uw HTML-document in het element (na de
Zodra dit .css-bestand is gemaakt, bewerkt u het bestand en voegt u dezelfde CSS-code toe, met uitzondering van de tags en opmerkingen erop, zoals weergegeven.
.tab {margin-left: 40px; }
Eindelijk, als de bovenstaande stappen voltooid zijn, kunt u elke gewenste tekst in een tab weergeven
voorbeeld hebben we hierboven getoond.
Er zijn ook andere vormen van inspringen. Als u bijvoorbeeld alleen de eerste regel van een alinea wilt laten inspringen, gebruikt u in plaats van de bovenstaande CSS-regel de volgende regel.
.tab {text-indent: 40px}
Tip: u kunt ook inspringen met een percentage. In plaats van inspringen met 40 px (pixels), kunt u bijvoorbeeld de inspringing vervangen door 5% om tekst in te tikken met 5% van de huidige weergave. U kunt ook een em-spatie gebruiken bij het bepalen van de breedte van een inspringing.
Bonustip: u kunt ook de van een linkerinspringing naar een rechterinspringing wijzigen door marge-links naar marge-rechts te wijzigen.
Aanbevolen methode met HTML
Het is mogelijk om dezelfde resultaten hierboven te behalen door een inline-stijl te gebruiken in HTML. Hoewel het gebruik van het bovenstaande CSS-voorbeeld het gemakkelijker kan maken om meerdere webpagina's te onderhouden, als u een stijl alleen hoeft te gebruiken als u het volgende voorbeeld kunt gebruiken.
Deze tekst is ingesprongen.
In dit eerste voorbeeld is alle tekst in de alineatags 40 pixels van links ingesprongen. Alle andere alineatags zijn niet ingesprongen.
Deze tekst is ingesprongen.
In dit tweede voorbeeld wordt alleen de eerste regel tekst in de alinea 40 pixels links ingesprongen. Eventuele extra regels tekst in die alinea worden niet ingesprongen.
Tip: u kunt ook inspringen met een percentage. In plaats van inspringen met 40 px (pixels), kunt u bijvoorbeeld de inspringing vervangen door 5% om tekst in te tikken met 5% van de huidige weergave. U kunt ook een em-spatie gebruiken bij het bepalen van de breedte van een inspringing.
Bonustip: u kunt ook de van een linkerinspringing naar een rechterinspringing wijzigen door marge-links naar marge-rechts te wijzigen.
Alternatieve methode
Een andere veelvoorkomende (maar onjuiste) methode voor het inspringen van tekst is het gebruik van de tags, zoals in het volgende voorbeeld. Hoewel dit een veel eenvoudigere oplossing is, zijn er toegankelijkheidsproblemen die kunnen worden veroorzaakt door het gebruik van deze oplossing om uw tekst te laten inspringen. Deze tag is bedoeld voor het citeren van tekst en niet voor inspringen.
Deze tekst zou ingesprongen zijn