Andere Inline-Textelemente

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

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

Codebeispiele und technische Dokumentation

Verwenden Sie beim Dokumentieren von Codebeispielen das Element <code>. Standardmäßig wird der Textinhalt in einer Monospace-Schriftart angezeigt. Wenn Sie mehrere Codezeilen einfügen, verschachteln Sie <code> in einem <pre>-Element, das für vorformatierten Text steht.

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

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

Wenn Sie eine Beispielausgabe eines Programms angeben, verwenden Sie das Element <samp>, um den Text einzuschließen. Der Browser rendert dieses Beispiel oder die zitierte Ausgabe in der Regel auch in einer Schriftart mit fester Breite.

Wenn Sie Anleitungen mit Tastaturinteraktion bereitstellen, können Sie das Element <kbd> verwenden. Sie steht für die Texteingabe des Nutzers über eine Tastatur, Spracheingabe oder ein anderes Gerät zur Texteingabe.

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

Die Potenz 2 im Satz des Pythagoras wurde mit dem hochgestellten Element <sup> dargestellt. Es gibt ein ähnliches <sub>-Tiefstellungselement, das Inline-Text angibt, der aus rein typografischen Gründen als Tiefstellung angezeigt werden soll. Hoch- und Tiefstellungen sind Zahlen, Abbildungen, Symbole oder andere Anmerkungen, die kleiner als die normale Zeile sind und entsprechend leicht über oder unter der Zeile gesetzt werden.

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

<ins> ist das Gegenteil des <del>-Elements. Mit diesem Element wird Text angegeben, der hinzugefügt oder „eingefügt“ wurde. Optional können die Attribute cite oder datetime verwendet werden.

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. Geben Sie dann die abgekürzte Darstellung des Begriffs zwischen dem öffnenden und dem schließenden <abbr>-Tag ein. <abbr> ist nur beim ersten Vorkommen erforderlich, wenn die Abkürzung oder das Akronym definiert wird. Das Attribut title ist weder erforderlich noch hilfreich.

Eine Ausnahme von dieser Regel besteht, wenn der Begriff für den Leser als bekannt vorausgesetzt wird, wie HTML und CSS in dieser Reihe.

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

Wenn der zu definierende Begriff nicht in derselben Sprache wie der umgebende Text ist, müssen Sie das Attribut lang einfügen, um die Sprache zu identifizieren.

Beim Schreiben von Sprachen mit unterschiedlichen Richtungen 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 Richtung dynamisch in die Seite eingefügt werden. Das Element <bdo> überschreibt die aktuelle Textrichtung und 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 den Zeichen platziert sind, um Informationen zur Aussprache zu liefern. 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, werden die Inhalte 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, mit denen Text hervorgehoben werden kann. Die Hervorhebung sollte jedoch auf semantischen Gründen beruhen und nicht auf Gründen der Darstellung, da dies die Aufgabe von CSS ist.

• Verwenden Sie das <em>-Element, um einen Inhaltsbereich zu betonen. Das <em>-Element kann verschachtelt werden. Jede Verschachtelungsebene steht für eine stärkere Hervorhebung. Dieses Element hat eine semantische Bedeutung und kann verwendet werden, um akustische User-Agents wie Screenreader, Alexa und Siri zu informieren, dass der Text hervorgehoben werden soll.
• Mit dem Element <mark> können Sie Text identifizieren oder hervorheben, 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 besonders hervorgehoben werden.
• Das Element <strong> kennzeichnet Text als besonders wichtig. Browser rendern den Inhalt in der Regel mit einer fetteren Schriftstärke.
• Das Element <cite>, das in den Grundlagen für Text behandelt wird, wird verwendet, um die Titel von Büchern, Artikeln oder anderen kreativen Werken oder eine abgekürzte Referenz oder Zitationsmetadaten für solche Werke zu kennzeichnen, z. B. die ISBN-Nummer eines Buchs.

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

<i>

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

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

MLW verwendet ein <span>-Element für den seltsamen Text unten in der Rezension von Toasty McToastface. Das Element <span> ist ein generischer Inline-Container ohne Semantik, der nichts darstellt. <i> wäre auch in diesem Fall eine geeignete Option gewesen.

Standardmäßig wird das Element <i> kursiv gerendert. In diesem Beispiel haben wir font-style: normal festgelegt, da die verwendeten Zeichen nicht in Kursivschrift verfügbar sind.

<u>

Das Element <u> ist für Inhalte mit nicht textuellen Anmerkungen vorgesehen. Beispielsweise können Sie bewusst falsch geschriebene Wörter mit Anmerkungen versehen. Standardmäßig wird der Inhalt unterstrichen. Das lässt sich jedoch mit CSS steuern, z. B. durch Hinzufügen einer roten gewellten Unterstreichung, um die Markierungen für Grammatikfehler in Textverarbeitungsprogrammen nachzuahmen.

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

<b>

Mit dem Element <b> können Sie die Aufmerksamkeit auf Text lenken, der ansonsten nicht wichtig ist. Dieses Element enthält keine besonderen semantischen Informationen und sollte nur verwendet werden, wenn keines der anderen Elemente in diesem Abschnitt dem Zweck entspricht. Es wird kein Beispiel angegeben, da ich keinen gültigen Anwendungsfall finden konnte. Das zeigt, wie selten dieses Element verwendet werden sollte.

Leerzeichen

Wenn Sie Zeilenumbrüche benötigen, z. B. beim Schreiben von Gedichten oder einer Postanschrift, 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>

Wenn Sie eine Trennlinie oder thematische Unterbrechung zwischen Abschnitten mit tangentialen Inhalten einfügen möchten, z. B. zwischen Kapiteln in einem Buch oder zwischen dem 5.000 Wörter umfassenden Monolog und dem Rezept, nach dem Ihre Nutzer tatsächlich suchen, fügen Sie ein <hr>-Element ein. Die Abkürzung „HR“ steht für „horizontal rule“ (horizontale Linie). Browser rendern in der Regel eine horizontale Linie, aber dieses Element hat eine semantische Bedeutung. Die Standard-Rolle ist separator.

HTML hat auch ein Element, mit dem Wörter umgebrochen werden können. Das selbstschließende <wbr>-Element gibt dem Browser einen Hinweis, dass er die Zeile an dieser Stelle optional umbrechen kann, wenn ein Wort seinen Container überläuft. Wird häufig verwendet, um lange URLs zwischen Wörtern umzubrechen. Es wird kein Bindestrich eingefügt.

In der Biografie von Hal gibt es beispielsweise Text, der in Bytecode geschrieben ist, wobei jedes Byte durch ein Leerzeichen getrennt ist. Der Bytecode darf keine Leerzeichen enthalten. Damit ein langer Bytecode-String 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 diese Elemente keine „Innenseiten“ haben, auf denen Inhalte gespeichert werden können, haben sie kein End-Tag.

Wissen testen

Testen Sie Ihr Wissen zu Inline-Text.