Hoe en wanneer een nadruktag in HTML gebruiken?

click fraud protection

Een van de tags die je vroeg in je leert webdesign onderwijs is een paar tags die bekend staan ​​als de 'emphasis-tags'. Laten we eens kijken wat deze tags zijn en hoe ze tegenwoordig in webdesign worden gebruikt.

Terug naar XHTML

Als je jaren geleden HTML hebt geleerd, ruim voor de opkomst van HTML5, hebt u waarschijnlijk zowel de vetgedrukte als de cursieve tag gebruikt. Zoals je zou verwachten, hebben deze tags elementen omgezet in respectievelijk vetgedrukte of cursieve tekst. Het probleem met deze tags, en waarom ze terzijde werden geschoven ten gunste van nieuwe elementen (waar we binnenkort naar zullen kijken), is dat het geen semantische elementen zijn. Dit komt omdat ze bepalen hoe de tekst eruit moet zien in plaats van informatie over de tekst. Onthoud dat HTML (waar deze tags zouden worden geschreven) draait om structuur, niet om visuele stijl! Visuals worden afgehandeld door: CSS en best practices voor webdesign hebben lang geoordeeld dat u een duidelijke scheiding van stijl en structuur in uw webpagina's moet hebben. Dit betekent dat u geen elementen gebruikt die niet-semantisch zijn en die eerder op detail lijken dan op structuur. Dit is de reden waarom de gedurfde en

instagram viewer
cursief tags zijn over het algemeen vervangen door sterk (voor vet) en nadruk (voor cursief).

en

De sterke en nadrukelementen voegen informatie toe aan uw tekst en geven details weer die anders moeten worden behandeld en benadrukt wanneer die inhoud wordt uitgesproken. U gebruikt deze elementen ongeveer op dezelfde manier als u in het verleden vet en cursief zou hebben gebruikt. Omring uw tekst eenvoudig met de openings- en sluitingstags ( en voor nadruk en en voor sterke nadruk) en de bijgevoegde tekst wordt benadrukt.

U kunt deze tags nesten en het maakt niet uit welke de externe tag is. Hier zijn enkele voorbeelden.

Deze tekst is benadrukt en de meeste browsers zouden het cursief weergeven. 
Deze tekst wordt sterk benadrukt en de meeste browsers zouden het vetgedrukt weergeven. 

In beide voorbeelden dicteren we de visuele look niet met de HTML. Ja, de standaardweergave van de tag zou cursief zijn en de zou vet zijn, maar die looks kunnen gemakkelijk worden gewijzigd in CSS. Dit is het beste van twee werelden. U kunt gebruikmaken van de standaard browserstijlen om cursieve of vetgedrukte tekst in uw document te krijgen zonder de grens te overschrijden en structuur en stijl te mengen. Zeg dat je dat wilde tekst niet alleen vet maar ook rood moet zijn, kunt u dit toevoegen aan de SCS.

sterk {
kleur rood;
}

In dit voorbeeld hoeft u geen eigenschap toe te voegen voor het vetgedrukte lettertype, aangezien dat de standaardinstelling is. Als je dat echter niet aan het toeval wilt overlaten, kun je het altijd toevoegen aan:

sterk {
lettergewicht: vet;
kleur rood;
}

Nu zou je bijna gegarandeerd een pagina hebben met vetgedrukte (en rode) tekst waar de label wordt gebruikt.

Verdubbel de nadruk

Een ding dat we in de loop van het jaar hebben opgemerkt, is wat er gebeurt als je probeert de nadruk te verdubbelen. Bijvoorbeeld:

Deze tekst moet beide hebben vet en cursief tekst erin.

Je zou denken dat deze regel een gebied zou opleveren met tekst die vet EN cursief is. Soms gebeurt dit inderdaad, maar we hebben gezien dat sommige browsers alleen de tweede van de twee nadrukstijlen respecteren, degene die het dichtst bij de eigenlijke tekst in kwestie ligt, en deze alleen cursief weergeven. Dit is een van de redenen waarom we niet dubbel zoveel nadruk-tags gebruiken.

Een andere reden om deze "verdubbeling" te vermijden, is voor stilistische doeleinden. Eén vorm van nadruk is meestal voldoende om de toon die u wilt zetten over te brengen. U hoeft tekst niet vet te maken, cursief te maken, in te kleuren, te vergroten en te onderstrepen om op te vallen. Die tekst, met al die verschillende accenten, zou opzichtig worden. Wees dus voorzichtig bij het gebruik van nadruktags of CSS-stijlen om nadruk te leggen en overdrijf het niet.

Een opmerking over vet en cursief

Een laatste gedachte - terwijl de vetgedrukte () en cursief () tags worden niet langer aanbevolen om te worden gebruikt als accentelementen, er zijn enkele webontwerpers die deze tags gebruiken om inline tekstgebieden op te maken. Kortom, ze gebruiken het als een element. Dit is leuk omdat de tags erg kort zijn, maar het gebruik van deze elementen op deze manier wordt over het algemeen niet aanbevolen. We vermelden het voor het geval je het op sommige sites ziet die niet worden gebruikt om vetgedrukte of cursieve tekst te maken, maar om een ​​CSS-haak te maken voor een ander soort visuele styling.

instagram story viewer