PDF herunterladen PDF herunterladen

Um Text in HTML zu unterstreichen, hat man ihn bisher mit den Tags <u> und </u> umschlossen, aber diese Methode wird zugunsten der deutlich vielseitigeren CSS nicht mehr eingesetzt. Das Unterstreichen wird im Allgemeinen ohnehin als schlechte Möglichkeit angesehen, Aufmerksamkeit auf den Text zu lenken. Dies liegt daran, dass der unterstrichene Text leicht mit einem Link verwechselt wird.

Methode 1
Methode 1 von 2:

Aktuelle Methode

PDF herunterladen
  1. Die Verwendung des Tags <u> ist nicht mehr die richtige Art zum Unterstreichen von Text. Verwende stattdessen CSS und die Eigenschaft "text-decoration".
    • Dies trägt dazu bei, dass dein Code zukunftssicher ist, so dass du keine Änderungen mehr vornehmen musst, wenn der alte Code unbrauchbar wird.
  2. Setze an der Stelle, an der die Unterstreichung beginnen soll, ein öffnendes Tag mit der Eigenschaft "text-decoration". Setze das schließende Tag </span> dort, wo sie aufhören soll. [1]
     < 
     span 
     style 
     = 
     "text-decoration: underline;" 
     > 
    Dies wird unterstrichen. </ 
     span 
     > 
    
  3. Du kannst dies auch im CSS Stylesheet machen. Du kannst das Unterstreichen viel einfacher machen, indem du HTML-Elemente deklarierst und einen oder mehrere Stile auf diese anwendest. Um z. B. alle deine Überschriften der dritten Ordnung unterstrichen darzustellen, füge dies deinem Abschnitt mit den CSS-Stilen hinzu:
     < 
     html 
     > 
     < 
     head 
     > 
     < 
     style 
     > 
     h3 
     { 
     text-decoration 
     : 
     underline 
     ; 
     } 
     </ 
     style 
     > 
     </ 
     head 
     > 
     < 
     body 
     > 
     < 
     h3 
     > 
    Diese Überschrift wird unterstrichen </ 
     h3 
     > 
     </ 
     body 
     > 
     </ 
     html 
     > 
    
  4. In deinem Stylesheet oder im <style> Bereich kannst du Klassen erstellen, die du später aufrufen kannst. Der Klasse kannst du einen beliebigen Namen geben.
     < 
     html 
     > 
     < 
     head 
     > 
     < 
     style 
     > 
     . 
     underline 
     { 
     text-decoration 
     : 
     underline 
     ; 
     } 
     </ 
     style 
     > 
     </ 
     head 
     > 
     < 
     body 
     > 
    Du kannst diese Klasse nutzen, um < 
     div 
     class 
     = 
     "underline" 
     > 
    verschiedene Teile </ 
     div 
     > 
    deines Contents < 
     div 
     class 
     = 
     "underline" 
     > 
    schnell zu unterstreichen </ 
     div 
     > 
     </ 
     body 
     > 
     </ 
     html 
     > 
    
  5. Das Unterstreichen sollte vermieden werden, damit du deine Leser nicht verwirrst. Eine beliebte Methode ist das Tag <em>, das Text kursiv darstellt. Du kannst CSS nutzen, um dieses Tag für eine einzigartige Betonung weiter zu definieren.
     < 
     html 
     > 
     < 
     head 
     > 
     < 
     style 
     > 
     em 
     { 
     color 
     : 
     red 
     ; 
     } 
     </ 
     style 
     > 
     </ 
     head 
     > 
     < 
     body 
     > 
    Alles, das dieses Element verwendet, wird < 
     em 
     > 
    kursiv dargestellt (wegen der Standardeinstellungen), 
    und auch in Rot </ 
     em 
     > 
    wegen der zusätzlichen 
    Style-Einstellungen, die wir oben hinzugefügt haben. </ 
     body 
     > 
     </ 
     html 
     > 
    
    Werbeanzeige
Methode 2
Methode 2 von 2:

Veraltete Methode

PDF herunterladen
  1. Diese sind veraltet bzw. überholt, d.h. sie funktionieren noch, werden aber nicht mehr genutzt oder empfohlen. Dies liegt daran, dass HTML nicht zum Gestalten von Content gedacht ist. Das Tag <u> funktioniert noch, soll aber jetzt Text darstellen, der sich von anderem Text unterscheidet, z. B. falsch geschriebene Wörter oder chinesische Eigennamen.
  2. Es gibt praktisch keinen Fall, in dem du diese Methode noch anwenden solltest. Es ist vielleicht gut zu wissen, wie es mal genutzt wurde, falls du eine alte Webseite aktualisieren musst.
     < 
     html 
     > 
     < 
     body 
     > 
    Mit dem alten Tag zum Unterstreichen in HTML ( < 
     u 
     > 
    ) konntest du
    Dinge schnell unterstreichen </ 
     u 
     > 
    , aber wenn zusätzlich andere 
    Stilelemente involviert wurden, entstand hier schnell ein Chaos.
    Deswegen wird das Unterstreichen auf moderne Weise erreicht, 
    indem du das CSS-Element "text-decoration" verwendest. </ 
     body 
     > 
     </ 
     html 
     > 
    
    Werbeanzeige

Tipps

  • Es gibt fast immer eine bessere Möglichkeit, um auf einer Webseite Content zu betonen, als ihn zu unterstreichen. Für deine Leser kann unterstrichener Text sehr verwirrend sein. Erwäge, deinen Text mit CSS aufzuhübschen, damit er hervorsticht.
Werbeanzeige

Über dieses wikiHow

Diese Seite wurde bisher 17.715 mal abgerufen.

War dieser Artikel hilfreich?

Werbeanzeige