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 allgemeinen Meinung war HTML ursprünglich für die Freigabe von Dokumenten gedacht und nicht für Katzenvideos. Es gibt viele Elemente, die Textsemantik für die Dokumentation bereitstellen. Es gibt ein Modul, in dem Links und das <a>-Element behandelt werden. Die übrigen Elemente werden hier kurz erläutert.

Codebeispiele und technisches Schreiben

Verwenden Sie für die Dokumentation von Codebeispielen das Element <code>. Standardmäßig wird der Textinhalt in Festbreitenschrift angezeigt. Wenn Sie mehrere Codezeilen angeben, verschachteln Sie <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 Element <data> verknüpft einen bestimmten Inhalt mit einer maschinenlesbaren Übersetzung. Das Attribut value des Elements liefert die maschinenlesbare Übersetzung des Inhalts des Elements. Wenn der <data>-Inhalt zeit- oder datumsbezogen ist, muss stattdessen das Element <time> verwendet werden, das einen bestimmten Zeitraum darstellt.

Das <time>-Element kann das Attribut datetime enthalten, um Uhrzeit und Datum in einem maschinell lesbaren Format anzugeben. Das Attribut datetime ist maschinell lesbar und liefert nützliche Informationen für Anwendungen wie Kalender und Suchmaschinen.

Wenn Sie eine Beispielausgabe eines Programms bereitstellen, verwenden Sie das Element <samp>, um den Text einzuschließen. Der Browser rendert diese Beispielausgabe oder die Ausgabe in Anführungszeichen im Allgemeinen auch in Festbreitenschrift.

Für Anweisungen für eine Tastaturinteraktion kann das Element <kbd> verwendet werden. Sie stellt eine Texteingabe durch den Nutzer über eine Tastatur, eine Spracheingabe oder ein anderes Texteingabegerät dar.

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

Für die Zweierpotenz wurde im Satz des pythagorasischen Satzes das hochgestellte Element <sup> verwendet. Es gibt ein ähnliches tiefgestelltes <sub>-Element, das Inline-Text angibt, der ausschließlich aus typografischen Gründen als tiefgestellt angezeigt werden sollte. Hoch- und Tiefstellungen sind Zahlen, Ziffern, Symbole und andere Anmerkungen, die kleiner als die normale Schriftlinie und jeweils etwas über oder unter der Linie stehen.

Verwenden Sie <del>, um Text anzugeben, der entfernt oder gelöscht wurde. Fügen Sie optional den cite auf die Ressource, die die Änderung erläutert, und das datetime-Attribut mit dem Datum oder Datum und Uhrzeit im maschinenlesbaren Datums- und Uhrzeitformat ein. Mit dem durchgestrichenen Element <s> kann angegeben werden, dass Inhalte nicht mehr relevant sind, aber nicht aus dem Dokument entfernt wurden.

Das <ins>-Element ist das Gegenteil des <del>-Elements. Es wird verwendet, um eingefügten oder „eingefügten“ Text anzugeben, wobei optional auch die Attribute cite oder datetime einbezogen werden.

Definitionen und Sprachunterstützung

Wenn Sie Abkürzungen oder Akronyme verwenden, geben Sie bei der ersten Verwendung immer die vollständige erweiterte Version des Begriffs im Nur-Text an, da Sie die gekürzte Darstellung des Begriffs zwischen öffnenden und schließenden <abbr>-Tags einführen – es sei denn, der Begriff ist dem Leser gut bekannt, z. B. „HTML“ und „CSS“ in dieser Reihe. Nur beim ersten Auftreten, bei dem die Abkürzung oder das Akronym definiert werden soll, ist <abbr> erforderlich. Das Attribut title ist weder erforderlich noch hilfreich.

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

Wenn der Begriff, der definiert wird, nicht in der Sprache des umgebenden Textes verfasst ist, fügen Sie das Attribut lang hinzu, um die Sprache zu identifizieren.

Beim Schreiben von Sprachen in verschiedene Richtungen stellt HTML das Element <bdi> bereit, mit dem potenziell bidirektionalen Text isoliert vom umgebenden Text behandelt werden kann. Dieses Internationalisierungselement ist besonders nützlich, wenn Inhalte mit unbekannter Ausrichtung dynamisch in die Seite eingefügt werden. Das Element <bdo> überschreibt die aktuelle Textrichtung und rendert den Text in eine andere Richtung. Das W3C bietet eine Einführung in bidirektionale Algorithmen.

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

Die runde 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 alle Evergreen-Browser unterstützen, werden die Inhalte von <rp>-Elementen nicht angezeigt. Das Ruby-Textelement (<rt>) enthält die eigentlichen Annotationen. Beide sind im <ruby> verschachtelt.

Hinweis: Die Klammer wird nicht angezeigt, wenn dein Browser <ruby> unterstützt.

Text hervorheben

Es gibt mehrere Elemente, mit denen sich Text basierend auf dem semantischen Grund für die Hervorhebung des Textes hervorheben lässt (anstatt aus Darstellungsgründen, da dies eine Aufgabe für CSS ist).

• Mit dem Element <em> können Sie eine Spanne von Inhalten hervorheben oder betonen. Das <em>-Element kann verschachtelt werden, wobei jede Verschachtelungsebene eine größere Betonung angibt. Dieses Element hat eine semantische Bedeutung und kann verwendet werden, um akustische User-Agents wie Screenreader, Alexa und Siri zu unterstützen und zu betonen.
• Verwenden Sie das Element <mark>, um Text zu identifizieren oder hervorzuheben, der relevant ist, z. B. das Vorkommen von Suchbegriffen in den Suchergebnissen hervorgehoben (oder „markiert“). So können markierte Inhalte schnell identifiziert werden, ohne sie zu betonen oder zu betonen.
• Das Element <strong> gibt Text mit hoher Wichtigkeit an. Browser stellen den Content in der Regel mit einer höheren Schriftstärke dar.
• Das Element <cite>, das im Abschnitt Textgrundlagen behandelt wird, wird verwendet, um Titel von Büchern, Artikeln oder anderen kreativen Werken oder verkürzte Referenz- oder Zitationsmetadaten dafür zu kennzeichnen, z. B. die ISBN eines Buchs.

Es gibt drei Elemente, die vorübergehend eingestellt wurden, aber wieder in HTML eingefügt wurden. Sie sollten sparsam oder gar nicht eingesetzt werden, da sie wenig oder keinen semantischen Wert bieten und CSS immer für Stile über HTML-Elementen verwendet werden.

<i>

Die <i>-Elemente können für Fachbegriffe, Fremdwörter (wieder mit dem lang-Attribut zur Identifizierung der Sprache), Gedanken oder Schiffsnamen verwendet werden. Das Element wird verwendet, um Inline-Inhalte aus einem bestimmten Grund vom umgebenden Text zu unterscheiden, z. B. idiomatischer Text, technische Begriffe undtaxonomische Bezeichnungen. Dieses Element sollte nicht nur verwendet werden, um Text kursiv zu markieren.

MLW verwendet ein <span>-Element für den seltsamen Text am Ende der Workshop-Rezension von Toasty McToastface. Das Element <span> stellt einen generischen Inline-Container ohne Semantik bereit und stellt nichts dar. Dies wäre auch eine angemessene Verwendung von <i> gewesen.

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

<u>

Das Element <u> ist für Inhalte mit nicht textbasierten Anmerkungen vorgesehen. Sie können beispielsweise wissentlich falsch geschriebene Wörter mit Anmerkungen versehen. Standardmäßig ist der Inhalt unterstrichen. Dies kann jedoch mit CSS gesteuert werden, z. B. indem Sie eine geschwungene Unterstreichung rot hinzufügen, um Grammatikfehler in Textverarbeitungsprogrammen nachzuahmen.

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

<b>

Mit dem Element <b> kann die Aufmerksamkeit auf Text gelenkt werden, der ansonsten nicht wichtig ist. Dieses Element enthält keine speziellen semantischen Informationen und sollte nur verwendet werden, wenn keines der anderen Elemente in diesem Abschnitt dem Zweck entspricht. Es wird kein Beispiel genannt, da ich keinen gültigen Anwendungsfall finden konnte. Das ist die letzte Option.

Leerraum

Wenn Sie Zeilenumbrüche verwenden möchten, z. B. beim Schreiben von Gedichten oder einer Postadresse, wird das selbstschließende Zeilenumbruchelement <br> verwendet, um einen Zeilenumbruch hinzuzufügen.

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

Du kannst ein <hr>-Element einfügen, um zwischen Abschnitten tangentialer Inhalte, z. B. zwischen den Kapiteln eines Buchs oder zwischen dem Monolog mit 5.000 Wörtern und dem Rezept, nach dem die Nutzer suchen, ein Trennzeichen oder eine thematische Unterbrechung einzufügen. Die HR steht für „Horizontale Regel“. Während Browser im Allgemeinen eine horizontale Linie darstellen, hat dieses Element eine semantische Bedeutung. Die Standardrolle ist separator.

HTML verfügt auch über ein -Element, mit dem Wörter umgebrochen werden können. Das selbstschließende Element <wbr> macht dem Browser den Hinweis, dass ein Wort, bei dem es möglicherweise aus seinem Container überläuft, an dieser Stelle einen Zeilenumbruch auslösen kann. Es wird häufig verwendet, um Wörter in langen URLs zu trennen, und fügt keinen Bindestrich hinzu.

In der Hal-Biografie wird beispielsweise Text in Bytecode ausgeschrieben, wobei jedes Byte durch ein Leerzeichen getrennt ist. Bytecode hat keine Leerzeichen. Damit ein langer Bytecode-String nur dann zwischen Bytes bricht, wenn die Zeile umgebrochen werden muss, fügen wir bei jeder Unterbrechungsmöglichkeit das Element <wbr> 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 leere Elemente. Das heißt, sie können keine untergeordneten Knoten haben – weder verschachtelte Elemente noch Text. Da keine dieser Elemente ein „Insiden“-Element zum Speichern von Inhalten haben, gibt es auch kein End-Tag.

Wissen testen

Testen Sie Ihr Wissen über Inline-Text.