Hoe tekst in HTML te onderstrepen

Schrijver: Tamara Smith
Datum Van Creatie: 28 Januari 2021
Updatedatum: 1 Juli- 2024
Anonim
HTML Underline - How to underline text in HTML and CSS
Video: HTML Underline - How to underline text in HTML and CSS

Inhoud

De oude HTML-onderstrepingsmethode is om u> / u>-tags te gebruiken, maar nu wordt een moderne, op CSS gebaseerde methode gebruikt. Onderstrepen wordt beschouwd als een slechte manier om de aandacht op tekst te vestigen, omdat het gemakkelijk is om onderstreepte tekst te verwarren met een link.

Stappen

Methode 1 van 2: Moderne methode

  1. 1 Gebruik de eigenschap "text-decoration" in CSS. Momenteel wordt de u>-tag niet gebruikt om tekst te onderstrepen.
    • Door deze eigenschap toe te voegen, hoeft u uw code in de toekomst niet te wijzigen wanneer oude tags worden verwijderd.
  2. 2 Gebruik de span> tag om een ​​specifiek stuk tekst te onderstrepen. Voer een starttag in samen met de eigenschap "text-decoration" voor de tekst die u wilt onderstrepen. Voer aan het einde van de tekst de afsluitende tag / span> in.

    span style = "text-decoration: underline;"> Deze tekst wordt onderstreept. / span>

  3. 3 Geef HTML-elementen op in de sectie style> om het onderstrepen gemakkelijker te maken. Het kan ook worden gedaan met behulp van een CSS-stylesheet. Om bijvoorbeeld alle koppen van niveau 3 te onderstrepen, voegt u de volgende code toe aan de sectie "stijl":

    html> head> style> h3 {text-decoration: underline; } / style> / head> body> h3> Deze kop wordt onderstreept / h3> / body> / html>

  4. 4 Maak een CSS-klasse om snel tekst te onderstrepen. U kunt klassen maken in uw stylesheet of stijl> sectie om ze later te bellen. De klasse kan elke naam krijgen.

    html> head> style> .underline {text-decoration: underline; } / style> / head> body> Gebruik deze klasse voor div> snel onderstrepen / div> verschillende div> elementen / div> / body> / html>

  5. 5 Bedenk andere manieren om tekst te markeren. We raden u aan onderstrepingen te vermijden om verwarring bij gebruikers te voorkomen. Het is beter om de em> tag te gebruiken om de tekst cursief te maken. Gebruik CSS om andere stijlopties aan deze tag toe te voegen.

    html> head> style> em {kleur: rood; } / style> / head> body> Alles in het "em" -element wordt cursief weergegeven (standaard) en ook rood gekleurd / em> dankzij de extra stijlopties. / body> / html>

Methode 2 van 2: Oude methode

  1. 1 Vermijd het gebruik van de oude u> / u>-tags. Ze zijn verouderd, wat betekent dat deze tags nog steeds werken, maar worden ontmoedigd of ontmoedigd. Dit komt omdat HTML niet bedoeld is om de stijl van inhoud aan te passen. De u>-tag werkt nog steeds, maar moet tekst vertegenwoordigen die verschilt van andere tekst, zoals verkeerd gespelde woorden of Chinese eigennamen.
  2. 2 Gebruik de tags u> / u> om elementen te onderstrepen (alleen voor demonstratie). Er is bijna geen enkel geval waarin u deze tags moet gebruiken. Mogelijk moet u de oude site bewerken, dus u kunt het beste weten wat de tags zijn.

    html> body> De oude HTML u>-tag maakte het mogelijk om snel / u>-elementen te onderstrepen, maar als andere stijlelementen werden aangeraakt, werd het chaotisch. Daarom gebruiken ze tegenwoordig het CSS-element "text-decoration" om te onderstrepen. / body> / html>

Tips

  • Er is bijna altijd een betere manier om inhoud op een webpagina te markeren dan te onderstrepen. Onderstrepen kan gebruikers in verwarring brengen. Denk na over hoe u tekst kunt markeren met CSS.