3 nützliche HTML-Tags, von deren Existenz Sie vielleicht gar nichts wussten

Front-End-Entwickler müssen eng vertraut sein mit HTML-Tags denn dies ist ihre natürliche Umgebung, in der sie täglich leben. Ich wette, Sie alle kennen einige grundlegende Begriffe wie , , und so weiter. Aber wussten Sie zum Beispiel, dass Sie eine Wortpause vorschlagen können, indem Sie einfach HTMLohne CSS?

WBR

Nehmen wir an, Sie arbeiten an einer Website oder App für einen deutschen Kunden. Wie Sie wissen, können deutsche Wörter gaaanz schön lang sein. Sie haben also ein Design mit einigen Textinhalten, die Sie auf Deutsch wiedergeben müssen. Code und dieser Inhalt muss in ganz bestimmten Momenten aufbrechen. Hier kommt die Tag, um Ihnen zu helfen.

Geburtstagskuchen

Das war's! Mit einem so einfachen Tag können Sie Textinhalte nach Belieben manipulieren.

Aber wie sieht es mit der Browserunterstützung aus? Nun, um ehrlich zu sein, ist sie ziemlich gut. Die meisten Browser werden dieses Tag verstehen, aber Opera auf Android und Safari auf iOS könnten Probleme haben.

METER

Stellen Sie sich vor, Sie bauen eine App zur Verwaltung von Festplattenspeicher. Sie müssen irgendwie in der UI zeigen, wie viel Speicherplatz noch verfügbar ist, und Sie wollen es wirklich so zugänglich wie möglich zu machen. Dies ist ein perfekter Anwendungsfall für die <meter> Tag. Es zeigt dir nur den Wert innerhalb eines bestimmten Bereichs an. Eine weitere coole Sache über dieses Tag sind seine Attribute:

• niedrig → wenn der aktuelle Wert niedriger ist als der eingestellte niedrige Wert, wird der Balken des Messgeräts rot;
• optimal → wenn die aktuellen Werte höher als der optimale Attributwert sind, wird der Balken des Messgeräts grün;
• hoch → wenn der hohe Wert niedriger als der Maximalwert und höher als der optimale Wert ist, ist der Balken des Messgeräts orange. Andernfalls wird er grün sein.

Vielleicht kennen Sie auch einen ähnlichen Begriff, nämlich Fortschritt. Was ist eigentlich der Unterschied zwischen den beiden? Das Fortschritts-Tag sollte für laufende Aufgaben verwendet werden. Mit anderen Worten: Verwenden Sie das Fortschritts-Tag, wenn Sie mit einer bestimmten Aufgabe beschäftigt sind. Das meter-Tag sollte verwendet werden, um die Festplatten- oder Speichernutzung anzuzeigen. Ein weiterer Unterschied besteht darin, dass das meter-Tag nicht vom IE unterstützt wird, und das ist eigentlich der einzige Nachteil dieses Tags.

DEL und INS

Haben Sie sich jemals gefragt, wie man einen zugänglichen Indikator für gelöschte und hinzugefügte Teile von Inhalten erstellen kann (Diff in GitHub oder E-Mail-Benachrichtigungen von Jira, wenn das Ticket aktualisiert wurde)? Sie müssen nur den gelöschten Inhalt mit demTag. Zum Beispiel: <del><p>Einfach gelöschter Inhalt</p></del>. Um nur den hinzugefügten Teil des Inhalts anzuzeigen, können Sie die Tag auf genau die gleiche Weise. Dieses Tag bietet auch zwei Attribute:

• cite → uri einer Ressource, die erklärt, warum dieser Teil hinzugefügt wurde;
• datetime → Daten und Zeitpunkt der Änderung.

Es gibt natürlich noch viel mehr nützliche Tags in HTML . Ich empfehle dringend, alle diese Möglichkeiten zu nutzen, wenn es möglich und sinnvoll ist. Ihre Kunden und App-Nutzer werden Ihnen für diesen Ansatz danken. Seien Sie jedoch vorsichtig, denn einige Tags könnten veraltet sein. Sie können sich immer vergewissern, dass ein weniger gebräuchliches Tag, das Sie verwenden möchten, noch gültig ist und in MDN-Dokumentation.