Het element <u>

Attributen

Dit element bevat alleen de globale attributen.

Gebruiksnotities

Samen met andere puur stilistische elementen werd het oorspronkelijke HTML Underline-element (<u>) afgekeurd in HTML 4; het werd echter hersteld in HTML 5 met een nieuwe, semantische betekenis: om tekst te markeren als tekst waarop een niet-tekstuele annotatie is toegepast.

Gebruiksscenario's

Geldige gebruiksscenario's voor het <u>-element zijn onder andere het annoteren van spelfouten, het toepassen van een proper name mark om eigennamen in Chinese tekst aan te duiden, en andere vormen van annotatie.

Gebruik <u> niet om tekst te onderstrepen voor presentatiedoeleinden, of om titels van boeken aan te duiden.

Andere te overwegen elementen

In de meeste gevallen kun je beter een ander element dan <u> gebruiken, zoals:

• <em> om nadruk (stress emphasis) aan te duiden
• <b> om de aandacht op tekst te vestigen
• <mark> om kernwoorden of -zinnen te markeren
• <strong> om aan te geven dat tekst van groot belang is
• <cite> om titels van boeken of andere publicaties aan te duiden
• <i> om technische termen, transliteraties, gedachten of namen van schepen in westerse teksten aan te duiden

Gebruik het <ruby>-element om tekstuele annotaties te bieden (in tegenstelling tot de niet-tekstuele annotaties die met <u> worden gemaakt).

Gebruik de waarde underline van de text-decoration-eigenschap om een onderstreepte weergave zonder enige semantische betekenis toe te passen.

Voorbeelden

Een spelfout aangeven

Dit voorbeeld gebruikt het <u>-element en wat CSS om een alinea weer te geven die een spelfout bevat, waarbij de fout wordt aangegeven met een rode golvende onderstreping, een stijl die vrij algemeen voor dit doel wordt gebruikt.

HTML

<p>This paragraph includes a <u class="spelling">wrnogly</u> spelled word.</p>

In de HTML zien we het gebruik van <u> met een klasse, spelling, die wordt gebruikt om de verkeerde spelling van het woord "wrongly" aan te geven.

CSS

u.spelling {
  text-decoration: red wavy underline;
}

Deze CSS geeft aan dat wanneer het <u>-element is gestyled met de klasse spelling, het een rode golvende onderstreping onder de tekst moet hebben. Dit is een veelgebruikte styling voor spelfouten. Een andere veelgebruikte stijl kan worden weergegeven met red dashed underline.

Resultaat

Het resultaat zal bekend voorkomen voor iedereen die weleens een van de populairdere tekstverwerkers heeft gebruikt.

<u> vermijden

In de meeste gevallen wil je eigenlijk geen <u> gebruiken. Hier volgen enkele voorbeelden van wat je in verschillende gevallen in plaats daarvan zou moeten doen.

Niet-semantische onderstrepingen

Gebruik een <span>-element met de text-decoration-eigenschap ingesteld op "underline" om tekst te onderstrepen zonder enige semantische betekenis te impliceren, zoals hieronder getoond.

HTML

<span class="underline">Today's Special</span>
<br />
Chicken Noodle Soup With Carrots

CSS

.underline {
  text-decoration: underline;
}

Resultaat

Een boektitel presenteren

Boektitels moeten worden gepresenteerd met het <cite>-element in plaats van <u> of zelfs <i>.

Het cite-element gebruiken

<p>The class read <cite>Moby-Dick</cite> in the first term.</p>

Het cite-element stylen

De standaardstyling voor het <cite>-element geeft de tekst cursief weer. Je kunt dit overschrijven met CSS:

<p>The class read <cite>Moby-Dick</cite> in the first term.</p>

cite {
  font-style: normal;
  text-decoration: underline;
}

Technische samenvatting

Zie ook

• <span>
• <i>
• <em>
• <b>
• <cite>