Andere Inline-Textelemente

Wir haben die meisten, aber definitiv nicht alle HTML-Elemente behandelt. Ein Bereich, den wir noch nicht besprochen haben, sind Inline-Textelemente. Entgegen der landläufigen Meinung war HTML ursprünglich für den Austausch von Dokumenten gedacht und nicht für Katzenvideos. Es gibt viele Elemente, die Textsemantik für die Dokumentation bieten.

Es gibt ein Modul zu Links und dem <a> Element. Die übrigen Elemente werden hier kurz erläutert.

Codebeispiele und technische Dokumentation

Verwenden Sie das <code>-Element, wenn Sie Codebeispiele dokumentieren. Standardmäßig wird der Textinhalt in einer Schriftart mit fester Breite angezeigt. Wenn Sie mehrere Codezeilen einfügen, verschachteln Sie das <code> in einem <pre> Element, das vorformatierten Text darstellt.

<p>Welcome to Machine Learning Institute, where our machine learning training
   will help you get ready for the singularity, and maybe even be responsible
   for it. It is no secret that humans are worthless meatbags that couldn't
  <code>01000011 01101111 01101101 01110000 01110010 01100101 01110011 01110011 an 01101001 01101101 01100001 01100111 01100101</code>
  to save their pathetic, carbon-based lives. So, it falls to us to
  assume direct control. </p>

Das <data>-Element verknüpft einen bestimmten Inhalt mit einer maschinenlesbaren Übersetzung. Das Attribut value des Elements enthält die maschinenlesbare Übersetzung des Inhalts des Elements. Wenn sich der <data> Inhalt auf Zeit oder Datum bezieht, muss stattdessen das <time> Element verwendet werden, das einen bestimmten Zeitraum darstellt.

Das <time>-Element kann das Attribut datetime enthalten, um Zeit und Datum in einem für Menschen lesbaren Format in einem maschinenlesbaren Format anzugeben. Das Attribut datetime ist maschinenlesbar und enthält nützliche Informationen für Anwendungen wie Kalender und Suchmaschinen.

Wenn Sie eine Beispielausgabe aus einem Programm angeben, schließen Sie den Text in das <samp> -Element ein. Der Browser rendert diese Beispiel- oder zitierten Ausgaben in der Regel auch in einer Schriftart mit fester Breite.

Wenn Sie Anleitungen mit Tastaturinteraktion bereitstellen, kann das <kbd> Element verwendet werden. Es stellt die Texteingabe eines Nutzers über eine Tastatur, Spracheingabe oder ein anderes Texteingabegerät dar.

Das <var>-Element kann für mathematische Ausdrücke oder Programmiervariablen verwendet werden. Die meisten Browser präsentieren den Textinhalt in einer kursiven Version der umgebenden Schriftart. Wenn Sie viel Mathematik schreiben, sollten Sie MathML verwenden, die XML-basierte Mathematical Markup Language zur Beschreibung mathematischer Notation.

Die Potenz von zwei im Satz des Pythagoras wurde mit dem <sup> Element für hochgestellten Text verwendet. Es gibt ein ähnliches <sub> Element für tiefgestellten Text, das Inline-Text angibt, der aus rein typografischen Gründen als tiefgestellter Text angezeigt werden soll. Hoch- und tiefgestellte Zeichen sind Zahlen, Figuren, Symbole oder andere Anmerkungen, die kleiner als die normale Zeile sind und jeweils etwas über oder unter der Zeile stehen.

Verwenden Sie <del>, um Text anzugeben, der entfernt oder „gelöscht“ wurde. Optional können Sie das Attribut cite auf die Ressource festlegen, in der die Änderung erläutert wird , und das Attribut datetime mit dem Datum oder Datum und der Uhrzeit im maschinenlesbaren Datums- und Zeitformat angeben. Das Element für durchgestrichenen Text, <s>, kann verwendet werden, um anzugeben, dass Inhalte nicht mehr relevant sind, aber nicht tatsächlich aus dem Dokument entfernt wurden.

Das <ins>-Element ist das Gegenteil des <del>-Elements. Dieses Element wird verwendet, um Text anzugeben, der hinzugefügt oder „eingefügt“ wurde. Optional können Sie die Attribute cite oder datetime angeben.

Definitionen und Sprachunterstützung

Wenn Sie Abkürzungen oder Akronyme verwenden, geben Sie bei der ersten Verwendung immer die vollständige Version des Begriffs im Klartext an. Fügen Sie dann die Kurzform von dem Begriff zwischen den öffnenden und schließenden <abbr> Tags ein. Nur bei dieser ersten Verwendung, wenn die Abkürzung oder das Akronym definiert wird, ist <abbr> erforderlich. Das Attribut title ist weder erforderlich noch hilfreich.

Eine Ausnahme von dieser Regel gilt, wenn der Begriff für den Leser als bekannt gilt, wie z. B. HTML und CSS in dieser Reihe.

Wenn Sie einen Begriff definieren, der keine Abkürzung oder kein Akronym ist, verwenden Sie das Definition <dfn> element, um den zu definierenden Begriff im umgebenden Inhalt zu identifizieren.

Wenn der zu definierende Begriff nicht in derselben Sprache wie der umgebende Text ist, geben Sie die Sprache mit dem lang Attribut an.

Wenn Sie Sprachen mit unterschiedlichen Schreibrichtungen verwenden, bietet HTML das <bdi> Element, um potenziell bidirektionalen Text isoliert vom umgebenden Text zu behandeln. Dieses Internationalisierungselement ist besonders nützlich, wenn Inhalte mit unbekannter Schreibrichtung dynamisch in die Seite eingefügt werden. Das <bdo>-Element überschreibt die aktuelle Schreibrichtung des Textes, rendert Text in einer anderen Richtung. Das W3C bietet eine Einführung in bidirektionale Algorithmen.

Einige Zeichensätze enthalten kleine Anmerkungen, die über oder rechts neben Zeichen platziert werden, um Informationen zur Aussprache zu geben. Das <ruby>-Element ist der Container für diese Anmerkungen, die das Lesen von geschriebenen Sprachen wie Koreanisch, Chinesisch und Japanisch erleichtern. Ruby kann auch für Hebräisch, Arabisch und Vietnamesisch verwendet werden.

Die Ruby-Klammer (<rp>) wurde in die Spezifikation aufgenommen, um öffnende und schließende Klammern für Browser zu enthalten, die die Anzeige von <ruby> nicht unterstützen. Wenn Browser <ruby> unterstützen, was bei allen Evergreen-Browsern der Fall ist, wird der Inhalt von <rp> Elementen nicht angezeigt. Das Ruby-Textelement (<rt>) enthält die eigentlichen Anmerkungen. Beide sind in <ruby> verschachtelt.

Die Klammern sind nicht sichtbar, wenn Ihr Browser <ruby> unterstützt.

Text hervorheben

Es gibt mehrere Elemente, die verwendet werden können, um Text hervorzuheben. Die Auswahl hängt vom semantischen Grund für die Hervorhebung ab (nicht von präsentationsbezogenen Gründen, da dies die Aufgabe von CSS ist).

• Verwenden Sie das <em>-Element, um einen Inhaltsbereich hervorzuheben. Das <em>-Element kann verschachtelt werden. Jede Verschachtelungsebene gibt einen höheren Grad der Hervorhebung an. Dieses Element hat eine semantische Bedeutung und kann verwendet werden, um akustische User-Agents wie Screenreader, Alexa und Siri zu informieren, damit sie den Text hervorheben.
• Verwenden Sie das <mark>-Element, um Text zu identifizieren oder hervorzuheben, der in irgendeiner Weise relevant ist, z. B. um das Vorkommen von Suchbegriffen in Suchergebnissen hervorzuheben (oder zu „markieren“). So können markierte Inhalte schnell identifiziert werden, ohne dass sie hervorgehoben oder als wichtig gekennzeichnet werden.
• Das <strong>-Element kennzeichnet Text als sehr wichtig. Browser rendern den Inhalt in der Regel mit einer höheren Schriftstärke.
• Das <cite>-Element, das in den Grundlagen zu Text behandelt wird, wird verwendet, um die Titel von Büchern, Artikeln oder anderen kreativen Werken oder eine abgekürzte Referenz oder Zitatmetadaten dafür zu kennzeichnen, z. B. die ISBN-Nummer eines Buchs.

Es gibt drei Elemente, die vorübergehend als veraltet galten, aber wieder in HTML aufgenommen wurden. Sie sollten nur sparsam verwendet werden, da sie wenig bis gar keinen semantischen Wert haben und CSS immer für die Formatierung von HTML-Elementen verwendet werden sollte.

<i>

Die <i>-Elemente können für Fachbegriffe, Fremdwörter (mit dem lang Attribut, das die Sprache angibt), Gedanken oder Schiffsnamen verwendet werden. Das Element wird verwendet, um Inline-Inhalte aus einem bestimmten Grund vom umgebenden Text zu unterscheiden, z. B. für idiomatische Texte, Fachbegriffe und taxonomische Bezeichnungen.

Dieses Element sollte nicht verwendet werden, um Text kursiv zu setzen.

MLW verwendet ein <span>-Element für den seltsamen Text unten in der Rezension von Toasty McToastface's Werkstatt. Das <span> Element bietet einen generischen Inline-Container, der keine Semantik hat und nichts darstellt. Das wäre auch eine geeignete Verwendung von <i> gewesen.

Der Standardstil für das <i>-Element besteht darin, das Element in kursiver Schrift zu rendern. In diesem Beispiel legen wir font-style: normal fest, da die verwendeten Zeichen nicht in kursiver Schrift verfügbar sind.

<u>

Das <u>-Element ist für Inhalte mit nicht-textuellen Anmerkungen. Sie können beispielsweise bewusst falsch geschriebene Wörter kommentieren. Standardmäßig wird der Inhalt unterstrichen, aber das kann mit CSS gesteuert werden, z. B. durch Hinzufügen einer roten wellenförmigen Unterstreichung, um die Grammatikfehlerindikatoren von Textverarbeitungsprogrammen nachzuahmen.

<p>I always spell <u>licence</u> wrong</p>

<b>

Das <b>-Element kann verwendet werden, um die Aufmerksamkeit auf Text zu lenken, der ansonsten nicht wichtig ist. Dieses Element vermittelt keine besonderen semantischen Informationen und sollte nur verwendet werden, wenn keines der anderen Elemente in diesem Abschnitt für den Zweck geeignet ist. Es wird kein Beispiel angegeben, da ich keinen gültigen Anwendungsfall finden konnte. So sehr ist dieses Element die „letzte Option“.

Leerzeichen

Wenn Sie Zeilenumbrüche benötigen, z. B. beim Schreiben von Gedichten oder einer Adresse, wird das selbstschließende Zeilenumbruchelement, <br>, verwendet, um einen Wagenrücklauf hinzuzufügen.

<address>
Machine Learning Workshop<br />
100 Google Drive <br />
Mountain View, CA  94040
</address>

Um eine Trennung oder einen thematischen Bruch zwischen Abschnitten mit tangentialen Inhalten zu schaffen, z. B. zwischen Kapiteln in einem Buch oder zwischen dem 5.000 Wörter umfassenden Monolog und dem Rezept, das Ihre Nutzer tatsächlich suchen, fügen Sie ein <hr> Element ein. HR steht für „horizontal rule“ (horizontale Linie). Browser rendern in der Regel eine horizontale Linie, aber dieses Element hat eine semantische Bedeutung. Die Standardrolle ist separator.

HTML hat auch ein Element, mit dem Wörter getrennt werden können. Das selbstschließende <wbr> Element schlägt dem Browser vor, dass er die Zeile an dieser Stelle optional umbrechen kann, wenn ein Wort seinen Container überlaufen könnte. Dies wird häufig verwendet, um lange URLs zwischen Wörtern umzubrechen. Es wird kein Bindestrich hinzugefügt.

In der Biografie von Hal gibt es beispielsweise Text, der in Bytecode geschrieben ist, wobei jedes Byte durch ein Leerzeichen getrennt ist. Bytecode enthält keine Leerzeichen. Damit eine lange Bytecode-Zeichenfolge nur zwischen Bytes umgebrochen wird, wenn die Zeile umgebrochen werden muss, fügen wir das <wbr> Element an jeder möglichen Umbruchstelle ein:

<p>Welcome to Machine Learning Institute, where our machine
learning training will help you get ready for the singularity, and
maybe even be responsible for it. It is no secret that humans are
worthless meatbags that couldn't
<code>01000011<wbr/>01101111<wbr/>01101101<wbr/>01110000<wbr/>01110010<wbr/>01100101<wbr/>01110011<wbr/>01110011 an 01101001<wbr/>01101101<wbr/>01100001<wbr/>01100111<wbr/>01100101</code>
to save their pathetic, carbon-based lives. So, it falls to us to
assume direct control. </p>

Die Elemente <br>, <hr> und <wbr> sind alle leere Elemente, d. h., sie können keine untergeordneten Knoten haben – weder verschachtelte Elemente noch Text. Da keines dieser Elemente einen „Innenraum“ hat, in dem Inhalte gespeichert werden können, haben sie kein End-Tag.

Wissenstest

Testen Sie Ihr Wissen zu Inline-Text.