HTML biedt verschillende opmaakopties voor de tekst. Het onderstrepen van de HTML-tekst is er een van. Door simpelweg te onderstrepen, wordt een rechte lijn onder de tekst getekend zonder de lijn eronder te bezetten. In deze zelfstudie leren we hoe u de HTML-tekst kunt onderstrepen met < u > -tag, CSS-code, CSS-klasse en stel de onderstrepende eigenschappen en alternatieven in.

Tekst onderstrepen met < u > Tag

HTML levert de < u > -tag om de gegeven tekst in HTML te onderstrepen. < u > is de starttag voor onderstrepen en < / u > wordt gebruikt om het einde van de onderstreping in te stellen. Onderstreeptags kunnen probleemloos worden gebruikt voor verschillende teksttypen, zoals hyperlinks, vetgedrukte tekst, enz. In het volgende voorbeeld onderstrepen we een enkel woord of een volledige zin of een hyperlink. De < u > of onderstreep HTML-tag wordt ondersteund door alle grote browsers zoals Google Chrome, Mozilla Firefox, Microsoft Edge, Safari of Opera .

Tekst onderstrepen met CSS-tekstdecoratie-attribuut

CSS biedt het text-decoration -attribuut om verschillende HTML-elementen te onderstrepen. We kunnen het kenmerk text-decoration gebruiken om HTML-tekst te onderstrepen. Het tekstdecoratiestijlkenmerk kan worden gebruikt met verschillende HTML-tags of elementen. In het volgende voorbeeld hebben we de tag < span > -tag gebruikt om de tekst te selecteren en te onderstrepen.

Kleur en stijl voor onderstrepen van tekst instellen

In sommige gevallen is het onderstrepen van de HTML-tekst niet voldoende. We kunnen ook de stijl van de onderstreping kleuren of wijzigen. CSS-kenmerk text-decoration kan worden gebruikt om de onderstreping op te maken en te kleuren met de < u > tag of zonder. Hieronder geven we de HTML-tekst onderstreepte kleuren als rood, groen en de stijl als golvend, onderbroken, gestippeld en dubbel.

wavy style zal de niet-rechte lijn creëren waar de lijn golvend zal zijn als golven.

dashed stijl zal een onderbroken onderstreping creëren.

dotted stijl is vergelijkbaar met de gestreepte maar de punten zullen kleiner zijn.

double style zal twee onderstrepingen plaatsen waar standaard enkele onderstreping is.

De rode kleur en de gestreepte onderstreping kan worden gebruikt voor het uitdrukken van spelling, syntaxis of algemene fouten. Ook dotted

Gebruik CSS-klasse voor HTML-tekst onderstrepen

Het steeds weer opnieuw schrijven van elke onderstreepte CSS-code is geen goed werk. Een CSS-klasse kan worden gemaakt voor verschillende gebruiksscenario’s voor onderstrepen en deze klasse kan worden gebruikt voor HTML-tekst onderstrepen met andere HTML-tags. In het volgende voorbeeld zullen we verschillende CSS-klassen maken, zoals onderstrepen-rood, onderstrepen-groen om gemakkelijk tekst te onderstrepen.