5 HTML-Elemente, die Sie wahrscheinlich nicht kennen

In der Vergangenheit haben wir viel über HTML5-Elemente berichtet und ihre Funktionen demonstriert. Neue Elemente wie header, footer, aside, nav und main machen unsere Dokumentenstruktur semantischer oder "sinnvoller". Insbesondere helfen diese Elemente den Maschinen, Abschnitte innerhalb des Dokuments leicht zu verstehen .

Aber HTML-Spezifikationen sind riesig. Wenn Sie W3.org besuchen, wo sich die Dokumentation befindet, finden Sie Hunderte von Seiten, die jedes Element ausführlich dokumentieren. Insofern gibt es möglicherweise einige HTML-Elemente, die Sie übersehen haben, darunter:

1. Beispielelement

Sample Element oder samp definiert die Ausgabe eines Computersystems, eines Programms oder eines Skripts . Es wurde weit zurück in HTML3 eingeführt! . Dieses Element wird für technische Anleitungen oder Computerhandbücher nützlich sein. Dieses Beispiel zeigt, wie wir einen Fehler in Terminal umbrechen.

 Wenn Sie in Terminal "dir" eingeben, wird der Befehl "not found: dir" ausgegeben. 

Alle Browser, einschließlich IE5, unterstützen dieses Element und sie werden es mit Monospace-Schriftarten wie dem code und den pre Elementen anzeigen.

2. Tastatureingabeelement

Tastatureingabeelement oder kbd ist ein Element, das eine Benutzereingabe definiert . Ähnlich wie das samp Element wird kbd üblicherweise in technischen oder computerbezogenen Artikeln verwendet.

Angenommen, Sie möchten Leser anweisen, bestimmte Zeichen in ein Eingabefeld einer Anwendung einzugeben. Sie können die Textzeichen wie folgt mit kbd :

 Geben Sie DELETE ein,  um das Löschen Ihres Kontos zu bestätigen. 

kbd kann auch verwendet werden, um tatsächliche Tastaturtasten darzustellen.

 Drücken Sie die Eingabetaste, um eine neue Zeile zu erstellen. 

Wenn es jedoch zusammen mit dem samp Element verwendet wird, könnte es eine Eingabe darstellen, die über den Anwendungsbildschirm wie die Schaltflächen oder Menüs ausgeführt wird. Hier ist ein Beispiel:

 Klicken Sie zum Fortfahren auf "Zustimmen" 

Obwohl das kbd Element explizit als "Tastatureingabe" bezeichnet wird, können wir es auch für andere Arten von Eingaben verwenden, beispielsweise für eine Spracheingabe. Wenn Sie Tutorials oder Handbücher zu Siri, Google Voice oder Cortana schreiben, die uns die Kommunikation mit dem Gerät mithilfe von Sprachbefehlen ermöglichen, können Sie die Spracheingabe auf diese Weise umschließen.

 ... das Ok Google Hotword ist nicht wirklich regional deaktiviert und kann in nur zwei Schritten einfach aktiviert werden. 

Ähnlich wie samp wird kbd auch mit der Schriftart Monospace kbd .

Stylingvorschlag

Diese Elemente helfen Maschinen, den Inhalt besser zu verstehen. Aber da sie alle mit der Schriftart Monospace gerendert werden, werden die Leser den Unterschied kaum sehen. In diesem Fall können wir etwas Styling hinzufügen, damit sie besser aussehen.

Wir können eine Klasse hinzufügen, zum Beispiel eine Tasteneingabe, wenn sie eine Tastaturtaste oder eine Anwendungsschaltfläche darstellt.

Dann haben wir in CSS die folgenden Stilregeln festgelegt.

 .button-input {Rahmen: 1px einfarbig # 333; Hintergrund: linear-gradient (#aaa 0%, # 555 100%); / * W3C * / Farbe: #fff; Polsterung: 3px 8px; Rand-Radius: 3px; Box-Schatten: 0px 2px 0px 0px # 111; } 

Dadurch wird es wie eine tatsächliche Schaltfläche aussehen.

3. Variables Element

Variable Element oder var, wie der Name impliziert, stellt ein variables Zeichen dar . Dieses Element kann nützlich sein, um Tutorials oder Artikel zu schreiben, die aus mathematischen Gleichungen bestehen, wie zum Beispiel:

 var y = Math.sqrt(16); 

Im obigen Beispiel wird die Gleichung mit dem Codeelement umbrochen, da die Gleichung ein JavaScript-Code ist. Wir umbrechen nur das Zeichen, das eine Variable mit dem Element var ist.

4. Element definieren

Das Definieren von Element oder dfn wird verwendet, um einen Jargon oder einen bestimmten Begriff hervorzuheben, der insbesondere in einer Gemeinschaft oder einer Branche verwendet wird. Die Webentwicklungsbranche zum Beispiel ist voller Fachjargon, der außerhalb der Branche wohl kaum bekannt ist.

Und unten ist ein Beispiel, wo wir das Element dfn verwenden, um das Wort Breadcrumb zu dfn ; Wir haben den folgenden Satz aus Wikipedia genommen.

 Breadcrumbs oder Breadcrumb Trail ist eine Navigationshilfe, die in Benutzerschnittstellen verwendet wird. Es ermöglicht Benutzern, ihre Standorte in Programmen oder Dokumenten zu verfolgen. Der Begriff stammt aus der Spur von Paniermehl, die Hänsel und Gretel im populären Märchen hinterlassen haben. 

Browser zeigen es kursiv an, entsprechend der typografischen Konvention, um eine neue Instanz oder einen Fremdbegriff zu bezeichnen.

5. Markieren Sie Element

Mark ist ein neues Element, das als Teil von HTML5 eingeführt wurde. Kurz gesagt, mark wird verwendet, um Text hervorzuheben, auf den die Leser achten sollen. Daher rendern Browser standardmäßig dieses Element mit einer hellen fluoreszierenden Farbe, wie Sie unten sehen können.

Weitere Informationen finden Sie in der Dokumentation "Text Level Semantic - Mark Element", auf der Sie detaillierte Beispiele zur Verwendung finden.

Letzter Gedanke

Anstatt ein generisches Element wie div oder span, ist es besser, den Inhalt in ein semantischeres Element wie oben aufgeführt zu verpacken, damit der Computer - sei es eine Anwendung, ein Bot oder ein Lesegerät - den Inhalt besser verstehen kann . Hoffentlich kann dieser Artikel eine gute Referenz für den Einstieg sein.