HTML u-Tag - Learn HTML

Der HTML-Tag  stellt einen Bereich von Inline-Text mit einer nicht artikulierten, nicht textuellen Annotation dar. Das ist eine bewusst weite Definition: Er markiert Text, der aus einem Grund hervorgehoben werden soll, der zu keinem anderen Element passt, ohne dabei im Text selbst zu erklären warum. Der Browser rendert diese Annotation standardmäßig als Unterstreichung – aber die Unterstreichung ist nur ein visueller Hinweis, nicht der eigentliche Zweck des Elements.

Dies ist ein weit verbreiteter Irrtum, der es wert ist, ihn zu klären: In HTML5 ist der -Tag nicht veraltet und bedeutet nicht einfach „diesen Text unterstreichen." Er wurde von seiner alten, rein präsentationellen HTML-4-Bedeutung neu definiert. Wenn Sie lediglich eine Unterstreichung zur Gestaltung wünschen, ist das eine Aufgabe für CSS, nicht für .

Die zwei kanonischen Anwendungsfälle aus der HTML-Spezifikation sind:

Markierung eines falsch geschriebenen Wortes, so wie eine Rechtschreibprüfung eine wellenförmige Linie darunter zieht.
Markierung eines Eigennamens in chinesischem Text (die Eigennamensmarkierung, eine Annotationskonvention in der chinesischen Typografie).

In modernen Anwendungen ist der legitimste Einsatzort für  ein Rich-Text-Editor, der eine Rechtschreib- oder Eigennamens-Annotation als semantisches Markup statt als Stilgestaltung festhalten muss.

Warnung

Unterstrichener Text, der kein Link ist, wird leicht mit einem Hyperlink verwechselt. Die meisten Benutzer lesen Unterstreichungen als „das ist anklickbar." Verwenden Sie  nur, wenn Sie wirklich eine nicht textuelle Annotation meinen, und erwägen Sie, das Erscheinungsbild anzupassen (z. B. mit einer gepunkteten oder wellenförmigen Unterstreichung), damit es nicht wie ein Link aussieht. Unterstreichen Sie Text niemals nur zur Hervorhebung — verwenden Sie dafür  oder . Für rein dekorative Unterstreichungen verwenden Sie stattdessen die CSS-Eigenschaft text-decoration.

In den meisten Situationen kommuniziert ein anderes, spezifischeres Element Ihre Absicht besser als :

 für betonte Hervorhebung,
 für Text von starker Bedeutung,
 zum Hervorheben relevanter Phrasen oder Schlüsselwörter,
<ins> für Text, der in ein Dokument eingefügt wurde,
 um Aufmerksamkeit zu lenken, ohne Wichtigkeit zu vermitteln,
<cite> für den Titel eines zitierten Werks,
 für Fachbegriffe, Fremdsprachige Ausdrücke oder Gedanken.

Wenn Sie eine textuelle Annotation hinzufügen möchten (z. B. eine Ausspracheführung), verwenden Sie stattdessen den <ruby>-Tag.

Syntax

Das -Element wird paarweise verwendet. Der annotierte Inhalt wird zwischen dem öffnenden () und schließenden () Tag geschrieben.

Beispiel: Markierung eines falsch geschriebenen Wortes

Ein häufiger, spezifikationskonformer Anwendungsfall ist das Kennzeichnen eines Rechtschreibfehlers. Eine class ermöglicht es, die standardmäßige Unterstreichung als rote Wellenlinie umzugestalten, so wie Editoren Rechtschreibfehler anzeigen:

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .spelling-error {
        text-decoration: red wavy underline;
      }
    </style>
  </head>
  <body>
    <p>The word <u class="spelling-error">teh</u> is misspelled.</p>
  </body>
</html>

Result

Beispiel: Annotation eines Eigennamens in chinesischem Text

Der andere kanonische Anwendungsfall ist die chinesische Eigennamensmarkierung, bei der  ein Wort als Eigenname annotiert:

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
  </head>
  <body>
    <p><u>李白</u>是著名的诗人。</p>
  </body>
</html>

Result

Beispiel: die Standarddarstellung

Standardmäßig unterstreichen Browser den Inhalt eines -Elements:

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
  </head>
  <body>
    <p>Here we used <u>the &lt;u&gt; element</u>.</p>
  </body>
</html>

Probier es selbst »

Beispiel der CSS-Eigenschaft text-decoration:

Wenn Sie nur eine Unterstreichung zur visuellen Gestaltung wünschen, greifen Sie auf CSS statt auf  zurück:

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document.</title>
    <style>
      span {
        text-decoration: underline;
      }
    </style>
  </head>
  <body>
    <p>Here we used <span> CSS property text-decoration:underline</span>.</p>
  </body>
</html>

Probier es selbst »

Attribute

Der -Tag unterstützt alle globalen Attribute und Ereignis-Attribute.

Übung

Was stellt der HTML u-Tag in HTML5 dar?

Einen Textbereich mit einer nicht artikulierten, nicht textuellen Annotation, z. B. ein falsch geschriebenes Wort.Text, der einfach für visuelle Gestaltung unterstrichen werden soll.Text von starker Bedeutung.Betonter Text, der die Bedeutung eines Satzes verändert.Ein veraltetes Element, das Browser nicht mehr unterstützen.