11 ungewöhnliche HTML-Tags zur Verbesserung Ihrer Webentwicklungsfähigkeiten

Die zentralen Thesen

• Verwenden Sie und-Tags, um erweiterbare Abschnitte zu erstellen, die ein benutzerfreundliches Erlebnis bieten und ein klares Design beibehalten.
• Heben Sie wichtige Inhalte mit dem Tag hervor und lenken Sie die Aufmerksamkeit auf Schlüsselwörter, Phrasen oder Suchergebnisse auf Ihrer Webseite.
• Fügen Sie mithilfe des Tags semantische Bedeutung zu Datums- und Uhrzeitangaben hinzu und verbessern Sie so die Zugänglichkeit für Benutzer mit Behinderungen, die Bildschirmlesegeräte verwenden.

Als Webentwickler sollten Sie sich mit gängigen HTML-Tags auskennen, , Und die die Struktur und den Inhalt Ihrer Webseiten darstellen. Die HTML-Sprache bietet jedoch noch viel mehr!

Durch die Erkundung dieser einzigartigen Tags können Sie die Funktionalität Ihrer Web-Apps verbessern und sie so aus der Masse hervorheben.

1.

Und

Stellen Sie sich vor, Sie verfügen über umfangreiche Informationen oder Inhalte, mit denen Sie einen Leser nicht sofort überfordern möchten. Der Und Tags kommen zur Rettung!

Diese Tags arbeiten zusammen, um einen erweiterbaren Abschnitt mit einem Titel oder einer Zusammenfassung zu erstellen, auf den Ihre Website-Benutzer klicken können, um ihn anzuzeigen. Standardmäßig wird der Inhalt des Detailelements nicht angezeigt, sodass Ihre Seite übersichtlich und organisiert bleibt.

Ihre Besucher können einfach auf die Zusammenfassung klicken, um auf die verborgenen Informationen zuzugreifen.

<details>
<summary>Click to reveal more informationsummary>
<p>This content will be hidden by default but will appear when the user
 clicks the summary.p>
details>

Mit diesen Tags können Sie große Abschnitte von Text, Code oder anderen Informationen ausblenden und so ein benutzerfreundliches Erlebnis bieten und gleichzeitig ein klares Design beibehalten. Sie können Ihnen sogar dabei helfen, Ihr Ergebnis zu verfeinern Kenntnisse als Interface-Designer.

2.

Der Mit dem Tag können Sie bestimmte Teile Ihres Inhalts hervorheben und sie optisch hervorheben. Wenn Sie das verwenden Element verwenden Browser normalerweise eine gelbe Hintergrundfarbe auf den darin enthaltenen Text, um die Aufmerksamkeit des Lesers darauf zu lenken.

Diese Funktion ist besonders nützlich, wenn Sie Schlüsselwörter, wichtige Phrasen oder Suchergebnisse auf Ihrer Webseite hervorheben möchten.

<p>
 You can use the <mark>markmark> tag to highlight important words or
 phrases.
p>

Wenn Ihre Website beispielsweise über eine Suchfunktion verfügt, können Sie diese verwenden Tag, um die Übereinstimmungen der Suchanfrage in den Ergebnissen hervorzuheben und es Benutzern so einfacher zu machen, relevante Informationen zu finden.

3.

Sind Sie schon einmal auf Situationen gestoßen, in denen Inhalte veraltet oder nicht mehr relevant sind, Sie sie aber dennoch für historische Zwecke anzeigen oder auf Änderungen im Laufe der Zeit hinweisen möchten?

Geben Sie die ein Etikett! Es steht für durchgestrichen und stellt jeden Inhalt innerhalb des Elements mit einer Linie durch die Mitte dar.

<p>
 This product is <s>out-of-stocks> currently available at a discounted
 price!
p>

In diesem Beispiel ist die ausverkauft Es wird ein durchgestrichener Text angezeigt, der darauf hinweist, dass sich der Lagerstatus des Produkts geändert hat.

4.

Wenn Sie Datums- und Uhrzeitangaben in Ihren Inhalten eine semantische Bedeutung hinzufügen möchten, ist dies der Fall Tag ist praktisch.

Verwendung der Terminzeit Attribut können Sie eine maschinenlesbare Version des Datums oder der Uhrzeit angeben, die Browsern, Suchmaschinen und Bildschirmleseprogrammen hilft, den Kontext zu verstehen.

<p>
 The Declaration of Independence was signed on
<timedatetime="1776-07-04">July 4, 1776time>.
p>

Durch die Verwendung der Mit dem Tag geben Sie Ihren Inhalten mehr Struktur und machen sie einem breiteren Nutzerkreis zugänglich, auch Menschen mit Behinderungen, die Bildschirmlesegeräte verwenden.

5.

Die Verwaltung von Texten in mehreren Sprachen auf Ihrer Webseite kann manchmal eine Herausforderung sein, insbesondere wenn jeder Teil eine andere Formatierung erfordert.

Der -Tag kommt Abhilfe, indem es einen Teil des Textes isoliert, den der Browser aufgrund unterschiedlicher Sprachanforderungen unterschiedlich behandeln sollte.

<p>
<bdi>5,000bdi> people attended the conference.
p>

In diesem Beispiel ist die Element umschließt die Zahl 5,000. Dadurch wird sichergestellt, dass die Nummer nicht beeinträchtigt wird, wenn der umgebende Text in einer anderen Sprache ist oder eine andere Formatierung erfordert.

6. , ,

Für die ostasiatische Typografie, in der häufig Aussprachehilfen, Furigana oder andere Anmerkungen über oder unter den Zeichen verwendet werden, ist die, , Und Tags kommen ins Spiel.

<p>
 I'm learning
<ruby>漢<rt>かんrt>ruby>字<rp>(rp><rt>Kanjirt><rp>)rp>.
p>

In diesem Beispiel ist die Element enthält das Zeichen 漢 (Kanji) und die Das Element enthält die Aussprache かん (Kan). Der -Elemente bieten Fallback-Klammern für Browser, die Ruby-Annotationen nicht unterstützen.

7.

Wenn Sie lange Wörter haben, die Ihr Layout stören könnten, ist die Tag ist hier, um zu helfen. Es schlägt eine Möglichkeit für einen Zeilenumbruch (Wortumbruchmöglichkeit) in einem langen Wort vor, wobei der Browser den Text möglicherweise umbrechen möchte.

<p>
 This is an example of a long url: https://www.example.org/<wbr>with/a/long/path/and/a? query=string.
p>

Im obigen Beispiel enthält die lange URL a Element, das es dem Browser ermöglicht, es bei Bedarf in zwei Zeilen aufzuteilen und dabei das Layout des umgebenden Inhalts beizubehalten.

8. _Und

Für wissenschaftliche oder mathematische Notationen, chemische Formeln oder Fußnoten können Sie die verwenden Und Tags für tiefgestellten bzw. hochgestellten Text.

<p>
 The chemical formula for water is H<sub>2sub>O,
 and the Pythagorean theorem is
 a<sup>2sup> + b<sup>2sup> = c<sup>2sup>.
p>

In diesem Beispiel wird die verwendet Tag, um die anzuzeigen 2 In H2O als Index, während die Tags zeigen die Exponenten im Satz des Pythagoras an.

9.

Müssen Sie skalare Messungen innerhalb eines bekannten Bereichs darstellen, z. B. Festplattennutzung, Bewertungen oder Prüfungsergebnisse? Der Tag ist für Sie da.

Verwendung der Wert, Mindest, Und max Mit den Attributen können Sie jeweils den aktuellen Wert, den Minimalwert und den Maximalwert der Messung definieren.

<metervalue="75"min="0"max="100">75%meter>

In diesem Beispiel ist die Das Element stellt eine Prüfungspunktzahl von dar 75%.

10.

Wenn Sie es brauchen Erstellen Sie ein Dialogfeld oder eine Fensterüberlagerung für Modalitäten oder Wohlerzogene modale Popup-Interaktionen, Die Tag ist der richtige Weg. Du kannst den... benutzen offen Attribut, um das Dialogfeld standardmäßig anzuzeigen.

<dialogopen>
<p>This is a dialog box!p>
<button>Closebutton>
dialog>

In diesem Beispiel wird in einem einfachen Dialogfeld mit einem Absatz und einer Schaltfläche zum Schließen angezeigt, wann die Seite geladen wird offen Attribut. Für erweiterte Interaktionen können Sie den Inhalt und das Verhalten des Dialogfelds mithilfe von JavaScript anpassen.

11.

Benutzen Sie die Tag, um verwandte Optionen innerhalb eines zu gruppieren Dropdown-Element. Es ermöglicht Ihnen, Optionen zu organisieren und zu kategorisieren, um die Navigation und Auswahl zu erleichtern.

• DerTag ist ein Containerelement, das verwandte Gruppen gruppiert Tags innerhalb eines Element.
• Es hilft bei der Organisation von Optionen, indem es innerhalb des Dropdown-Menüs eine visuelle Gruppierung oder Kategorisierung erstellt.
• Der Tag erfordert ein Label-Attribut, das den Namen oder Titel der Optionsgruppe angibt.
• Es kann einen oder mehrere enthalten Tags als untergeordnete Elemente, die die einzelnen Optionen innerhalb der Gruppe darstellen.

Zum Beispiel:

<select>
<optgrouplabel="Asia">
<optionvalue="kr">South Koreaoption>
optgroup>
<optgrouplabel="Europe">
<optionvalue="de">Germanyoption>
optgroup>
select>

In diesem Beispiel wird das Auswahl-Dropdown in zwei Abschnitte gruppiert: Asien, Und Europa. Jede Gruppe enthält Tags, die verschiedene Länder innerhalb dieser Region repräsentieren.

Verbessern Sie Ihre Kenntnisse in der Webentwicklung

Das Erlernen dieser weniger bekannten HTML-Tags kann Ihre Webentwicklungsfähigkeiten erheblich verbessern. Trotz ihrer mangelnden Anerkennung bieten sie wertvolle Funktionen für bestimmte Kontexte.

Das Hinzufügen dieser Tags zu Ihren Fähigkeiten verbessert die Interaktivität und Zugänglichkeit und rationalisiert den Webentwicklungsprozess. Denken Sie daran, dass sie, auch wenn sie vielleicht unbekannt sind, einen erheblichen Einfluss auf Ihren Weg als Webentwickler haben.