Pdf downloaden Pdf downloaden

Onderstrepen in HTML was vroeger een zaak van het insluiten van de tekst tussen <u></u> tags, maar deze methode is daarna verouderd ten gunste van het meer veelzijdige CSS. Onderstrepen in webpagina's wordt over het algemeen beschouwd als een onhandige manier om een bepaald tekstgedeelte te benadrukken. Dit omdat onderstreepte tekst gemakkelijk wordt verward met een link.

Methode 1
Methode 1 van 2:

Huidige methode

Pdf downloaden
  1. Het gebruik van de <u> tag is niet langer een geschikte manier om tekst te onderstrepen. In plaats daarvan gebruiken we de CSS-eigenschap 'text-decoration'.
    • Hiermee maak je de code makkelijker om aan te passen, zodat je niet iets hoeft te veranderen aan de oude code, als die onbruikbaar is geworden.
  2. Plaats de begintag samen met de "text-decoration"-eigenschap waar je het onderstrepen wilt beginnen. Plaats de eindtag </span> waar het onderstrepen moet stoppen. [1]
     < 
     span 
     style 
     = 
     "text-decoration: underline;" 
     > 
    Dit wordt onderstreept. </ 
     span 
     > 
    
  3. Je kunt dit ook in het CSS-stijlblad doen. Het onderstrepen kan veel gemakkelijker worden door een stijl te koppelen aan een HTML-element. Om bijvoorbeeld al je level 3 headers te onderstrepen, voeg je er er de volgende CSS-stijl aan toe:
     < 
     html 
     > 
     < 
     head 
     > 
     < 
     style 
     > 
     h3 
     { 
     text-decoration 
     : 
     underline 
     ; 
     } 
     </ 
     style 
     > 
     </ 
     head 
     > 
     < 
     body 
     > 
     < 
     h3 
     > 
    Deze kop wordt onderstreept </ 
     h3 
     > 
     </ 
     body 
     > 
     </ 
     html 
     > 
    
  4. Je kunt in je stijlblad of <style>, klassen creëren om later aan te roepen. De klasse kan elke naam hebben die je wilt.
     < 
     html 
     > 
     < 
     head 
     > 
     < 
     style 
     > 
     . 
     underline 
     { 
     text-decoration 
     : 
     underline 
     ; 
     } 
     </ 
     style 
     > 
     </ 
     head 
     > 
     < 
     body 
     > 
    Je kunt deze klasse gebruiken voor het < 
     div 
     class 
     = 
     "underline" 
     > 
    snel onderstrepen </ 
     div 
     > 
    van verschillende delen < 
     div 
     class 
     = 
     "underline" 
     > 
    van je content </ 
     div 
     > 
     </ 
     body 
     > 
     </ 
     html 
     > 
    
  5. Onderstrepen kan beter worden vermeden om verwarring bij de lezer te voorkomen. Een populaire methode is het gebruik van de <em> tag, waarmee je tekst cursief maakt. Je kunt CSS gebruiken voor het nader specificeren van deze tag, voor een unieke manier van benadrukken.
     < 
     html 
     > 
     < 
     head 
     > 
     < 
     style 
     > 
     em 
     { 
     color 
     : 
     red 
     ; 
     } 
     </ 
     style 
     > 
     </ 
     head 
     > 
     < 
     body 
     > 
    Alles binnen het em-element zal < 
     em 
     > 
    cursief worden (vanwege de standaardinstellingen), 
    en rood </ 
     em 
     > 
    vanwege de 
    hierboven toegevoegde 
    stijl. </ 
     body 
     > 
     </ 
     html 
     > 
    
    Advertentie
Methode 2
Methode 2 van 2:

Verouderde methode

Pdf downloaden
  1. Deze worden 'afgeraden', wat betekent dat het nog steeds werkt, maar niet langer gebruikt of aangeraden. Dit omdat HTML in principe niet ontworpen is als opmaaktaal. De tag <u> zal nog steeds werken, maar is nu bedoeld om tekst aan te geven die anders is dan de andere tekst, zoals een verkeerd gespeld woord of Chinese eigennamen.
  2. In geen geval zou je deze methode nog moeten gebruiken. Het kan goed zijn om te weten hoe het werd gebruik, voor het geval je een oudere website moet updaten.
     < 
     html 
     > 
     < 
     body 
     > 
    Met de oude tag < 
     u 
     > 
    in HTML kon je snel dingen onderstrepen </ 
     u 
     > 
    , maar een en ander wordt dan al snel rommelig wanneer andere stijlelementen werden gebruikt. Daarom onderstrepen we tegenwoordig met het CSS-element "text-decoration". </ 
     body 
     > 
     </ 
     html 
     > 
    
    Advertentie

Tips

  • Er is bijna altijd een betere manier om iets te benadrukken op een webpagina dan met onderstrepen. Het kan bijzonder verwarrend zijn voor de lezers. Maak je tekst mooier met CSS, om die positief op te laten vallen.
Advertentie

Over dit artikel

Deze pagina is 7.375 keer bekeken.

Was dit artikel nuttig?

Advertentie