HTML-Elemente, vereinigt Euch! Der Voltron-wie die Kräfte der Elemente miteinander verbindet.

0
32

Guides, Ressourcen und Diskussionen über Semantisches HTML sind oft konzentrieren sich auf bestimmte Elemente, wie eine überschrift oder ein Schneide-element, oder eine Liste. Es kommt nicht oft vor, dass wir reden genau darüber, wie wir kombinieren können HTML-Elemente Ihre Wirksamkeit zu erhöhen.

Normalerweise, wenn wir einführen, HTML, reden wir darüber, wie es mit dem anwenden von Bedeutung, um Inhalt in einem Dokument, und wir tun dies, indem Sie Beispiele wie:

  • “Es ist ein Absatz?”
  • “Ist das eine überschrift?”
  • “Es ist eine nummerierte Liste”
  • “Ist es eine Schaltfläche”

Wir verwenden diese Beispiele, weil Sie leicht zu verstehen — es ist ein einzelnes Stück oder ein Stück des gleichen Inhalten, die dargestellt werden müssen, in einer bestimmten Weise. Dies ist nützlich, es ist aber nur ein Kratzer an der Oberfläche, wie wir verwenden können, und kombinieren Sie Elemente, um mehr Kontext und Bedeutung.

Sie erinnern Voltron, richtig? Jedes Mitglied der Voltron force war mächtig in Ihrem eigenen Recht, aber es war, wenn Sie kombiniert zusammen, um einen hoch aufragenden Figur, Ihre mächtigen Kräfte war nicht mehr aufzuhalten.

Das gleiche gilt für HTML-Elemente. Ich habe ein paar Lieblings-Kombinationen, nehme ich Sie durch. Sie scheinen dunkel, aber Sie wären überrascht, wie oft Sie kommen, wenn Sie sich die Zeit nehmen, zu denken, außerhalb der divs und Spannweiten.

Abkürzungen und Definitionen

<abbr> und <dfn> sind zwei meiner Lieblings-HTML-Elemente. Ganz besonders mag ich Sie, weil Sie arbeiten wirklich gut zusammen.

Kombinieren Sie die Abkürzung und definition von Elementen zu ermöglichen, Browser -, such-bots und andere Technologien, um zu erkennen, dass etwas definiert wird und, dass die Abkürzung ist im Zusammenhang mit Satz.

<p>
Die <dfn><abbr title=”Internationale Gute
Hund Verein”>IGDA</abbr></dfn> ist eine internationale,
not-for-profit-Organisation, die verantwortlich für die Festlegung
alle Hunde sind gut.
</p>

Im obigen Beispiel habe ich die Definition, dass die Abkürzung “IGDA” als “Gute Internationale Hunde Verband.” Ich Tue dies, indem er die Abkürzung in einem <abbr> – element mit einem title-Attribut zu definieren, den vollen Namen. Durch das hinzufügen der <dfn> element um die Abkürzung zeigt an, dass der umgebende Absatz definiert den Begriff “Gute Internationale Hunde Verband.”

Die <abbr> – element ist nützlich, weil es kann Ihnen sagen-screen-Leserinnen und Leser, was Sie Lesen sollten, während auch bietet eine nützliche grafische Darstellung in form eines Tooltips zu erklären, was die Abkürzung ist.

Visuelle Darstellung von <abbr> und <dfn>.

Tastatur, Stichprobe und Variablen

Wenn Sie noch nicht davon gehört diese Elemente, dann machen Sie sich bereit, Ihre Socken abgeblasen, denn Sie sind genial.

Erstens, die <kbd> – element dient zur Darstellung von text für eine textuelle Benutzereingabe (z.B. eine Tastatur). Sie können auch nest mehrere <kbd> Elemente, um mehrere Tastenanschläge. Ich Liebe das, weil wir als Entwickler uns (hoffentlich) eine Dokumentation zu schreiben, blog-Beiträge und-guides auf einer regelmäßigen basis und HTML bietet uns mit einheimischen Arten zur Darstellung dieser Inhalte direkt aus der box!

Wenn ich wollte, jemandem zu sagen, wie Sie kopieren und einfügen mit der Tastatur konnte ich markieren Sie es sich wie im code unten.

<p>ich mag <kbd><kbd>Strg</kbd>+<kbd>C</kbd></kbd> und <kbd><kbd>Strg</kbd>+<kbd>V</kbd></kbd> eine Menge.</p>

Es sieht ein bisschen Nüsse, aber den oben genannten code, wenn gerendert, sieht wie folgt ohne styling angewendet werden. Wenn Sie sich Fragen, warum kbd geschachtelt innerhalb eines anderen kbd-element, was dieser tut, ist festzulegen, dass der Schlüssel oder Eingang ist Teil eines größeren Eingang. Noch mehr kombiniert Superkräfte!

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

Sie können weiteres Ziel der <kbd> – Elemente mit CSS zu machen, sehen eher aus wie kleine Tastatur steuert. (Hinweis: manche Browser machen das standardmäßig mit einer monospace-schriftart.)

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

Wenn Sie sich Fragen, was der Unterschied ist zwischen mit <kbd> gegenüber einer Zeitspanne, ich glaube es kommt auf die Informationen. Ich wiederhole dieses Gefühl viel: wir wissen nicht, wie jemand geht, um zu konsumieren, unsere, HTML, so geben Sie Ihrem Inhalt, es ist die beste chance die es in den meisten sinnvolle und kontextbezogene Art und Weise möglich. Wenn Sie noch nicht an Bord, dann gehen Sie bitte Lesen Sie mein post über HTML, wie gesagt, von Typoskript.

Das <samp> – element ist wirklich cool, weil Sie Schachteln können Sie innerhalb der <kbd> – element und Umgekehrt. WAS? Ich weiß, so vielseitig! Lassen Sie uns einen Blick auf einige Beispiele von MDN.

Der folgende code ist ein Beispiel der Verschachtelung ein <samp> – element in einem <kbd> – element. Diese wird verwendet, um zu Kennzeichnen, Inhalte, stellt die Eingabe auf der Grundlage der text durch das system angezeigt wird (z.B. ein button-Bezeichnungen).

<p>speichern Sie die image-Datei, wählen Sie <kbd><kbd><samp>File</samp></kbd> – <kbd><samp>Speichern als…</samp></kbd></kbd>.
</p>

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

In dem obigen code, definieren wir unsere Tastaturbefehle die gleichen wie die Vorherige, aber wir bestimmen auch, dass das Menü und Menü-Namen (enthalten in <kbd> und <samp>) werden einem Eingang ausgewählt, von etwas, das durch das system angezeigt wird, z.B. einen dialog oder ein widget.

In anderen Worten, dieses Stück text ist eine Nachricht vom system, das hat einige user-Eingänge, die Sie benötigen, zu Folgen (wie Datei und Speichern unter…).

In der Erwägung, dass, wenn wir das nest <kbd> <samp>, wir feststellen, dass der Eingang wurde wieder zurückgegeben wird, um den Benutzer durch das system.

<p><samp>Garn start:theproject existiert nicht, meinten Sie:</p>
<blockquote><samp><kbd>Garn start:die-Projekt</kbd></samp></blockquote>

Schließlich wird das <var> – element! Diese wird verwendet, um den Namen einer variable in der Mathematik oder Programmierung, zum Beispiel:

<var>E</var> = <var>m</var><var>c</var><sup>2</sup>.
<samp>Fehler: <var>Konsole<var> ist nicht definiert.</samp>

Hier können Sie beginnen, um zu sehen, wie die Kombination von <var> durch andere Elemente, wie <pre>, <code>, <kbd> und <samp> beginnt, um Ihre Inhalts-markup mehr explizit durch das hinzufügen von mehr Kontext. Alles, was interpretiert Ihren HTML-markup beginnen können, um daraus mehr Bedeutung aus den Elementen, die Sie verwenden, anstatt nur unter der Annahme, dass es alle standard-text.

Wenn Sie diesen Inhalt in einem Absatz mit etwas spannt, es gibt keine Möglichkeit, mit der Technologie zu unterscheiden diese von allen anderen alten text auf Ihrer Seite. Sie haben nicht zu greifen, <span> oder ein <div> – zur Darstellung dieser Inhalte, da die HTML bietet bereits uns mit mehr semantisch präzise Elemente, die wir verwenden können. HTML ist nicht nur eine Frage der Darstellung; es geht um die Bedeutung. Verschiedene Technologien, die außerhalb von visual rendering-engines verlassen sich auf diese Bedeutung, um Entscheidungen darüber treffen, wie die Kommunikation unserer Inhalte in den meisten sinnvollen Art und Weise (z.B. Screenreader, text-to-voice, lese-apps, bots, oder das nächste große Ding in der Zukunft).

Zahlen

Zahlen (<Zahl>) sind ein großartiges Beispiel für eine power Kombination-element. Leider, ich denke, es ist weit verbreitet missbraucht und unter geschätzt (ähnlich wie <aside>, mit dem ich reden könnte für Stunden). Die offensichtliche Kombination sind Sie wahrscheinlich vertraut mit ist mit <figure> und <figcaption> zusammen. Wir verwenden oft dieses duo zu repräsentieren grafische Inhalte wie Bilder, Illustrationen und Diagramme — aber es kann auch verwendet werden für Dinge wie code, Gedichte und Zitate!

Denn eine Figur ist so flexibel, was die Art der Inhalte, die es repräsentiert, es gibt eine Reihe von verschiedenen HTML-Elemente, die Sie verwenden können, innerhalb einer Figur um mehr Kontext um die Art der Inhalte, die Sie setzen in Ihre Seite ein.

Figcaption

Das <figure> – element ist oft gesehen, mit einem optionalen <figcaption> das ist eine Bildunterschrift oder Legende zu einer Abbildung. Es sollte das erste Kind oder das Letzte Kind der <figure> – element. Sie können aber auch beliebige flow-content (z.B. Absätze, überschriften, etc.) in der <figcaption> mehr Kontext, und Sie können mehrere Bilder innerhalb eines <figure> vertreten durch ein einzelnes <figcaption>.

<Abbildung>
<img src=”jello.jpg” alt=”Golden Retriever Welpen” />
<figcaption>Jello-der Golden Retriever genießen, nach Hause getragen.</figcaption>
</figure>

Vorformatierten Text

Das <pre> – element wird verwendet, um anzuzeigen, vorformatierten text oder code und ist in der Regel gerendert mit einer monospace-schriftart. Während der <pre> – kann verwendet werden, auf Ihre eigene, es kann auch kombiniert werden mit <figure> und <figcaption>. Dadurch werden die Inhalte innerhalb des <pre> – element wird immer mehr zugänglich für assistive Technologien wie screen-Reader, da es uns ermöglicht, zu verwenden <figcaption> als ein label für den text oder code.

Wir können sogar noch weiter gehen, indem die Kombination der <pre> und <code> – Elemente zu identifizieren, die vor – formatierte Inhalte als code.

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

Da <code> wird als flow Inhalt, es kann auch verwendet werden, in ein <figcaption> markieren inline-Verweise auf code (d.h. einen einzigen Satz oder Zeile).

Cite und Blockquote

Zitate sind etwas, das ich verwenden viel und es ehrlich gesagt nicht auftreten, zu mir, es könnte als Teil einer Figur. Aber es macht immer noch Sinn, zitieren oder Angebot, wenn die Inhalte, die Sie enthalten, ist relevant für den gesamten Inhalt, selbst wenn es ist nicht Teil des Haupt-Belegfluss.

Ich mag das Beispiel mit einer Abbildung für Gedichte, hauptsächlich, damit ich teilen konnte, die erstaunliche Gedicht, das ich schrieb über meinen Hund. Hier verwende ich den <cite> – element innerhalb des <figcaption>:

<Abbildung>
<p>
Jello – Einen kleinen flauschigen Hund.
Hallo!
Squishy Jello – Sie kleinen flauschigen Kerl.
FEDERND gelbe Götterspeise.
Ein sehr mellow fellow.
ESSEN MEIN MARSHMALLOW.
</p>
<figcaption><cite>Essen mein Marshmallow von Mandy Michael</figcaption>
</figure>

Es ist leicht zu fallen in die Falle zu denken, dass die Bild-element ist nur bei Bildern oder Bild-wie die Inhalte, aber Sie können es verwenden, für Inhalte wie audio, video, Grafiken, Gedichte, Zitate oder Tabellen der Statistik. Weil das element ist so vielseitig, Sie können kombinieren Sie es mit so vielen anderen Elementen mehr und mehr Hintergrundinformationen über die Figur, die für assistive Technologie, Browser-und andere Technologien verbrauchen Ihre website.

Zusammenfassung

Dies sind nur einige der Möglichkeiten, HTML-Elemente können kombiniert werden, für besseren Kontext. HTML-Elemente sind in der Tat nützlich und wertvoll auf Ihre eigenen, wenn Sie als isolierte Stücke — und mit Ihnen auf diesem Weg ist ein guter Erster Schritt. Aber, wie Voltron, bei der Kombination von HTML-Elementen zusammen, die einzelnen Teile bilden ein großes ganzes und gewinnen viel mehr Bedeutung und macht. Es ist wichtig, dass wir nicht denken, dass der HTML-Code als einzelne Stücke von code, sondern Teile eines ganzen, denn HTML ist wirklich eine Masse von ganz erstaunlichen Kombinationen.

Sie können kombinieren und verwenden von HTML-Elementen in einer beliebigen Anzahl von Möglichkeiten, um die am besten für Ihre Inhalte. Nicht einfach halten, um die gleichen alten Dinge, die Sie kennen; nehmen Sie sich die Zeit und erkunden Sie HTML-und lernen alles, was es zu bieten hat. Wie jede Sprache, wir sollten das beste daraus zu machen und verwenden Sie es zu seinem vollen potential.

Je genauer Sie sind, markieren Sie Ihre Inhalte, desto besser, dass Inhalte, die vertreten werden über die Technologien, und die eher bereit, es wird für jeden irgendetwas anderes, das verwendet wird, interpretieren die HTML in die Zukunft.

Also, hingehen und HTML-Elementen, vereinigt Euch!

Ressourcen

Meiner Meinung nach, die beste Ressource für das lernen und verstehen, wie man HTML verwenden (außerhalb der Spezifikation) ist die MDN-Web-Docs. Es listet alle HTML-Elemente, die Sie jemals benötigen könnte.

Die folgenden sind unter den Elementen, die unter diesen post:

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

Wenn Sie ein Typoskript-fan und verstehe nicht, warum Semantischem HTML ist wichtig, dass ich diesen post schrieb nur für Sie: Sie Verstehen, warum Semantische HTML-wichtig ist, wie gesagt, von Typoskript.