HTML-Elemente, vereinigt euch! Die Voltron-ähnlichen Kräfte der kombinierten Elemente.

Anleitungen, Ressourcen und Diskussionen über semantisches HTML konzentrieren sich oft auf spezifische Elemente, wie eine Überschrift, ein Abschnittselement oder eine Liste. Selten sprechen wir speziell darüber, wie wir HTML-Elemente kombinieren können, um ihre Wirksamkeit zu erhöhen.

Normalerweise, wenn wir HTML einführen, sprechen wir darüber, wie es verwendet wird, um einem Dokument Bedeutung zu verleihen, und das tun wir mit Beispielen wie

• „Ist es ein Absatz?“
• „Ist es eine Überschrift?“
• „Ist es eine nummerierte Liste?“
• „Ist es ein Button?“

Wir verwenden diese Beispiele, weil sie leicht verständlich sind – es ist ein einzelnes Stück oder ein Klumpen *derselben* Inhalte, der auf eine bestimmte Weise dargestellt werden muss. Das ist nützlich, kratzt aber nur an der Oberfläche dessen, wie wir Elemente verwenden *und kombinieren* können, um mehr Kontext und Bedeutung zu bieten.

Sie erinnern sich an Voltron, richtig? Jedes Mitglied der Voltron-Streitmacht war für sich genommen mächtig, aber erst als sie sich zu einer turmhohen Gestalt vereinten, wurden ihre mächtigen Kräfte unaufhaltsam.

https://www.youtube.com/watch?v=1uS5b8aQ6z8&t=1m25s

Dasselbe gilt für HTML-Elemente. Ich habe ein paar Lieblingskombinationen, die ich Ihnen vorstellen werde. Sie mögen obskur erscheinen, aber Sie werden überrascht sein, wie oft sie vorkommen, wenn Sie sich die Zeit nehmen, über divs und spans hinauszudenken.

Abkürzungen und Definitionen

<abbr> und <dfn> sind zwei meiner Lieblings-HTML-Elemente. Ich mag sie besonders, weil sie wirklich gut zusammenarbeiten.

Sie können die Elemente für Abkürzungen und Definitionen kombinieren, damit Browser, Suchmaschinen-Bots und andere Technologien erkennen, dass etwas definiert wird und dass das Akronym mit diesem Satz verbunden ist.

<p>
  The <dfn><abbr title="International Good
  Dog Association">IGDA</abbr></dfn> is an international,  
  not-for-profit organization responsible for determining
  that all dogs are good.
</p>

Im obigen Beispiel definiere ich, dass das Akronym „IGDA“ für „International Good Dogs Association“ steht. Dies tue ich, indem ich das Akronym in ein <abbr>-Element mit einem title-Attribut einschließe, das den vollständigen Namen definiert. Durch Hinzufügen des <dfn>-Elements um die Abkürzung herum wird angezeigt, dass der umgebende Absatz den Begriff „International Good Dogs Association“ definiert.

Das <abbr>-Element ist nützlich, da es eine nützliche visuelle Darstellung in Form eines Tooltips bieten kann, der erklärt, was die Abkürzung ist.

Tastatur, Beispiel und Variable

Wenn Sie von diesen Elementen noch nichts gehört haben, dann machen Sie sich bereit, denn sie sind fantastisch.

Zuerst einmal wird das <kbd>-Element verwendet, um Text für eine textbasierte Benutzereingabe (z. B. von einer Tastatur) darzustellen. Sie können auch mehrere <kbd>-Elemente verschachteln, um mehrere Tastenanschläge darzustellen. Das liebe ich, denn als Entwickler finden wir uns (hoffentlich) regelmäßig beim Schreiben von Dokumentationen, Blogbeiträgen und Anleitungen wieder, und HTML bietet uns native Möglichkeiten, diese Inhalte sofort darzustellen!

Wenn ich jemandem erklären wollte, wie man mit der Tastatur kopiert und einfügt, könnte ich es wie im folgenden Code markieren.

<p>I like to <kbd><kbd>Ctrl</kbd>+<kbd>C</kbd></kbd> and <kbd><kbd>Ctrl</kbd>+<kbd>V</kbd></kbd> a lot.</p>

Das sieht etwas verrückt aus, aber der obige Code sieht, wenn er gerendert wird, ohne jegliches Styling wie folgt aus. Wenn Sie sich fragen, warum kbd in einem anderen kbd-Element verschachtelt ist, dann bedeutet dies, dass die Taste oder Eingabe Teil einer größeren Eingabe ist. Noch mehr kombinierte Superkräfte!

Siehe den Stift rZpNPy von CSS-Tricks (@css-tricks) auf CodePen.

Sie können die <kbd>-Elemente mit CSS weiter ansprechen, um sie mehr wie kleine Tastatursteuerungen aussehen zu lassen. (Hinweis: Browser rendern dies standardmäßig mit einer Monospace-Schrift.)

Siehe den Stift gdoOqE von CSS-Tricks (@css-tricks) auf CodePen.

Wenn Sie sich fragen, was der Unterschied zwischen der Verwendung von <kbd> und einem span ist, dann geht es meiner Meinung nach um Informationen. Ich werde diesen Gedanken oft wiederholen: Wir wissen nicht, *wie* jemand unseren HTML-Code konsumieren wird, also geben Sie Ihren Inhalten die beste Chance, indem Sie sie auf die bedeutungsvollste und kontextbezogenste Weise darstellen. Wenn Sie immer noch nicht überzeugt sind, dann lesen Sie bitte meinen Beitrag über HTML, erzählt von TypeScript.

Das <samp>-Element ist wirklich cool, weil Sie es in das <kbd>-Element und umgekehrt verschachteln können. WAS? Ich weiß, so vielseitig! Sehen wir uns einige Beispiele von MDN an.

Der folgende Code ist ein Beispiel für das Verschachteln eines <samp>-Elements *innerhalb* eines <kbd>-Elements. Dies wird verwendet, um Inhalte zu markieren, die eine Eingabe darstellen, die auf dem vom System angezeigten Text basiert (z. B. Schaltflächennamen).

<p>To save the image file, select <kbd><kbd><samp>File</samp></kbd> - <kbd><samp>Save as...</samp></kbd></kbd>.
</p>

Siehe den Stift YOYzbJ von CSS-Tricks (@css-tricks) auf CodePen.

Im obigen Code definieren wir unsere Tastenkombinationen wie in unserem vorherigen Beispiel, aber wir legen auch fest, dass die Menü- und Menüpunkt-Namen (enthalten in <kbd> und <samp>) eine Eingabe sind, die aus etwas ausgewählt wurde, das vom System angezeigt wird, z. B. ein Dialogfeld oder ein Widget.

Mit anderen Worten, dieser Text ist eine Nachricht vom System, die einige Benutzereingaben enthält, denen Sie folgen müssen (wie Datei und Speichern unter...).

Wenn wir jedoch <kbd> in <samp> verschachteln, legen wir fest, dass die Eingabe vom System an den Benutzer zurückgegeben wurde.

<p><samp>yarn start:theproject does not exist, did you mean:</p>
<blockquote><samp><kbd>yarn start:the-project</kbd></samp></blockquote>

Zum Schluss noch das <var>-Element! Dies wird verwendet, um den Namen einer Variable in Mathematik oder Programmierung zu markieren, zum Beispiel

<var>E</var> = <var>m</var><var>c</var><sup>2</sup>.
<samp>Error: <var>console<var> is undefined.</samp>

Hier können Sie erkennen, wie die Kombination von <var> mit anderen Elementen wie <pre>, <code>, <kbd> oder <samp> die Markierung Ihres Inhalts expliziter macht, indem mehr Kontext hinzugefügt wird. Alles, was Ihre HTML-Markierung interpretiert, kann mehr Bedeutung aus den von Ihnen verwendeten Elementen ableiten, anstatt einfach anzunehmen, dass es sich um Standardtext handelt.

Wenn Sie diesen Inhalt in einen Absatz mit einigen spans einfügen, gibt es keine Möglichkeit für Technologie, diesen von irgendeinem anderen alten Text auf Ihrer Seite zu unterscheiden. Sie müssen nicht auf <span> oder ein <div> zurückgreifen, um diesen Inhalt darzustellen, denn HTML bietet uns bereits semantisch genauere Elemente, die wir verwenden können. HTML dient nicht nur der Darstellung; es geht um Bedeutung. Verschiedene Technologien außerhalb visueller Rendering-Engines verlassen sich auf diese Bedeutung, um Entscheidungen darüber zu treffen, wie unsere Inhalte auf die bedeutungsvollste Weise kommuniziert werden (z. B. Screenreader, Text-zu-Sprache, Lese-Apps, Bots oder das nächste große Ding in der Zukunft).

Figuren

Figuren (<figure>) sind ein großartiges Beispiel für ein mächtiges Kombinations-Element. Leider denke ich, dass es weit verbreitet falsch genutzt und unterschätzt wird (ähnlich wie <aside>, worüber ich stundenlang reden könnte). Die offensichtliche Kombination, mit der Sie wahrscheinlich vertraut sind, ist die gemeinsame Verwendung von <figure> und <figcaption>. Wir verwenden dieses Duo oft, um grafische Inhalte wie Bilder, Illustrationen und Diagramme darzustellen – aber es kann auch für Dinge wie Code, Gedichte und Zitate verwendet werden!

Da eine Figur bei der Art von Inhalten, die sie darstellt, so flexibel ist, gibt es eine Reihe verschiedener HTML-Elemente, die Sie innerhalb einer Figur verwenden können, um mehr Kontext über die Art der Inhalte zu bieten, die Sie auf Ihrer Seite platzieren.

Bildunterschrift

Das <figure>-Element wird oft mit einer optionalen <figcaption> gesehen, die eine Bildunterschrift oder Legende für eine Figur darstellt. Sie sollte das erste oder letzte Kind-Element von <figure> sein. Sie können auch beliebige Flow-Inhalte (z. B. Absätze, Überschriften usw.) in <figcaption> verwenden, um mehr Kontext zu bieten, und Sie können mehrere Bilder innerhalb einer <figure> haben, die durch eine einzige <figcaption> dargestellt werden.

<figure>
  <img src="jello.jpg" alt="Golden Retriever Puppy" />
  <figcaption>Jello the Golden Retriever enjoying being carried home.</figcaption>
</figure>

Vorformatierter Text

Das <pre>-Element wird verwendet, um vorformatierten Text oder Code anzuzeigen und wird normalerweise mit einer Monospace-Schriftart gerendert. Während <pre> allein verwendet werden kann, kann es auch mit <figure> und <figcaption> kombiniert werden. Dadurch wird der Inhalt innerhalb des <pre>-Elements für assistierende Technologien wie Screenreader zugänglicher, da wir <figcaption> als Beschriftung für den Text oder Code verwenden können.

Wir können noch weiter gehen, indem wir die Elemente <pre> und <code> kombinieren, um den vorformatierten Inhalt als Code zu identifizieren.

Siehe den Stift QVaWVW von CSS-Tricks (@css-tricks) auf CodePen.

Da <code> als Flow-Inhalt betrachtet wird, kann es auch innerhalb einer <figcaption> verwendet werden, um Inline-Referenzen auf Code zu markieren (d. h. eine einzelne Phrase oder Zeile).

Zitat und Blockquote

Zitate sind etwas, das ich viel benutze, und ehrlich gesagt ist mir nicht eingefallen, dass es als Teil einer Figur verwendet werden könnte. Aber es ist trotzdem sinnvoll, ein Zitat oder eine Blockquote zu verwenden, wenn der Inhalt, den sie enthalten, für den Gesamtinhalt relevant ist, auch wenn er nicht Teil des Hauptflusses des Dokuments ist.

Ich mag das Beispiel, eine Figur für Gedichte zu verwenden, hauptsächlich damit ich das erstaunliche Gedicht teilen kann, das ich über meinen Hund geschrieben habe. Hier benutze ich das <cite>-Element innerhalb der <figcaption>

<figure>
  <p>
    Jello - A little fluffy dog.
    Hello! 
    Squishy Jello - you little fluffy fellow.
    BOUNCY yellow Jello.
        A very mellow fellow.
    EATING MY MARSHMALLOW.
  </p>
  <figcaption><cite>Eating my Marshmallow by Mandy Michael</cite></figcaption>
</figure>

Man kann leicht in die Falle tappen zu denken, dass das figure-Element nur für Bilder oder bildähnliche Inhalte ist, aber Sie können es für Inhalte wie Audio, Video, Diagramme, Gedichte, Zitate oder sogar Statistiktabellen verwenden. Da das Element so vielseitig ist, können Sie es mit so vielen anderen Elementen kombinieren, um assistierenden Technologien, Browsern und anderen Technologien, die Ihre Website konsumieren, mehr Kontext über die Figur zu geben.

Zusammenfassend

Dies sind nur einige der Möglichkeiten, wie HTML-Elemente für besseren Kontext kombiniert werden können. HTML-Elemente sind für sich genommen nützlich und wertvoll, wenn sie als isolierte Stücke verwendet werden – und sie so zu verwenden ist ein guter erster Schritt. Aber wie Voltron bilden die einzelnen Teile, wenn Sie HTML-Elemente kombinieren, ein größeres Ganzes und gewinnen viel mehr Bedeutung und Kraft. Es ist wichtig, dass wir HTML nicht als einzelne Code-Stücke betrachten, sondern als Teile eines Ganzen, denn HTML ist wirklich eine Masse von absolut erstaunlichen Kombinationen.

Sie können HTML-Elemente auf jede erdenkliche Weise kombinieren und verwenden, um Ihre Inhalte am besten darzustellen. Bleiben Sie nicht einfach bei den alten Dingen, die Sie kennen; nehmen Sie sich die Zeit, HTML zu erkunden und zu lernen, was es alles zu bieten hat. Wie jede Sprache sollten wir das Beste daraus machen und es voll ausschöpfen.

Je genauer Sie Ihre Inhalte markieren, desto besser werden diese Inhalte über verschiedene Technologien hinweg dargestellt und desto besser sind sie für alles andere vorbereitet, das Ihre HTML in Zukunft interpretiert.

Also, geht hinaus und HTML-Elemente, vereinigt euch!

---

Ressourcen

Meiner Meinung nach ist die beste Ressource zum Erlernen und Verstehen der Verwendung von HTML (außerhalb des Standards selbst) die MDN Web Docs. Sie listet alle HTML-Elemente auf, die Sie jemals brauchen könnten.

Die folgenden Elemente sind unter anderem in diesem Beitrag behandelt

• <abbr>
• <cite>
• <code>
• <dfn>
• <figure>
• <figcaption>
• <kbd>
• <samp>
• <var>

Wenn Sie ein TypeScript-Fan sind und nicht verstehen, warum semantisches HTML wichtig ist, habe ich diesen Beitrag speziell für Sie geschrieben: Understanding why Semantic HTML is important as told by TypeScript.