HTML hat viele Tags, die viele Menschen täglich verwenden, wie <div>, <p> und <a>. Aber es gibt auch einige versteckte Schätze, die oft unbemerkt bleiben. Diese Tags können helfen, Websites ansprechender, zugänglicher und bedeutungsvoller zu gestalten, ohne viel zusätzlichen Aufwand.
In diesem Artikel werden wir eine Gruppe von einzigartigen HTML-Elementen besprechen, die Ihre Webseiten verbessern können. Sie bieten spezifische Funktionen zur Formatierung von Text, zur Verbesserung der Lesbarkeit und zur Hinzufügung interaktiver Funktionen.
Inhaltsverzeichnis
Das <q> Tag: Kurze Inline-Zitate
Das <q> Tag wird verwendet, um kurze Zitate innerhalb eines Absatzes hinzuzufügen. Es hilft, Zitate anders und leichter erkennbar zu machen, ohne den Fluss des Textes zu unterbrechen. Dieses Tag fügt automatisch Anführungszeichen um den Inhalt hinzu.
Beschreibung und Syntax
Die grundlegende Struktur des <q> Tags ist einfach:
<p>She said, <q>This is amazing!</q></p>
Dies würde angezeigt werden als:
Sie sagte: „Das ist fantastisch!“
Unterschied zum <blockquote> Element
Das <q> Tag ist für kurze Zitate innerhalb eines Satzes. Andererseits wird das <blockquote> Element für längere Zitate verwendet, die normalerweise ihren eigenen Platz oder Absatz benötigen.
Zum Beispiel:
<blockquote>
"This is a long quote that needs its own space. It is different from a short quote."
</blockquote>
Dieser Block wird mit Einrückung angezeigt und soll einen größeren Abschnitt des zitierten Textes hervorheben.
Anwendungsfälle: Hinzufügen von Zitaten innerhalb von Absätzen
Der <q>-Tag ist perfekt für Fälle, in denen Sie ein Zitat in einem Satz erwähnen müssen, ohne es zu stark zu trennen. Zum Beispiel, wenn Sie jemanden in einem Artikel oder Blogbeitrag zitieren:
<p>The professor said, <q>Practice makes perfect</q>, during the class.</p>
In diesem Fall hält der <q>-Tag das Zitat klein und innerhalb desselben Absatzes.
Der Professor sagte, Übung macht den Meister
, während des Unterrichts.
Browserkompatibilität und Styling-Tipps
Die meisten modernen Browser fügen automatisch Anführungszeichen zu dem Inhalt innerhalb eines <q>-Tags hinzu. Aber Sie können das Aussehen mit CSS ändern, wenn nötig. So können Sie es stylen:
q {
quotes: "«" "»";
font-style: italic;
}
Dieser Code ändert die Anführungszeichen in französische Stilzeichen (« und ») und macht das Zitat kursiv.
Die meisten Browser unterstützen den <q>-Tag, sodass Sie sich keine Sorgen über Kompatibilitätsprobleme für moderne Benutzer machen müssen. Aber ältere Browser benötigen möglicherweise zusätzliche Aufmerksamkeit, testen Sie also immer, ob Ihr Publikum ältere Versionen verwendet.
Der <s>-Tag: Durchgestrichener Text
Der <s>-Tag wird verwendet, um Text anzuzeigen, der nicht mehr korrekt, relevant oder entfernt wurde. Er zieht eine Linie durch die Mitte des Textes, was wir „Durchstreichung“ nennen. Dieser Tag wird oft verwendet, um etwas anzuzeigen, das bearbeitet oder aktualisiert wurde.
Erklärung und Verwendung
Der <s>-Tag ist einfach zu verwenden. Wickeln Sie ihn um den Text, den Sie durchstreichen möchten:
<p>This product was <s>$50</s> now only $30!</p>
Dies wird angezeigt als:
Dieses Produkt kostete $50, jetzt nur noch $30!
Häufige Anwendungsfälle: Entfernte oder irrelevante Inhalte anzeigen
Das <s>-Tag ist ideal, um Preisänderungen, Korrekturen oder Inhalte anzuzeigen, die nicht mehr gültig sind. Zum Beispiel:
Preisaktualisierungen:
<p><s>$75</s> $50 (Limited Offer!)</p>
75 $ 50 $ (Limitiertes Angebot!)
Korrekturen oder Änderungen:
<p><s>Old website address</s> New website address</p>
Alte Website-Adresse Neue Website-Adresse
Inhalte, die nicht mehr relevant sind:
<p>This feature is <s>no longer available</s>.</p>
Diese Funktion ist nicht mehr verfügbar.
Gestaltungsmöglichkeiten mit CSS
Sie können anpassen, wie der Durchgestrichen-Look mit CSS aussieht. Zum Beispiel können Sie die Farbe der Linie oder des Textes ändern:
s {
text-decoration: line-through;
color: red;
}
In diesem Fall wird der Text mit einer roten Linie durchgestrichen, was betont, dass er durchgestrichen wurde.
Semantische Bedeutung versus visuelle Dekoration
Das <s>-Tag hat eine semantische Bedeutung. Es repräsentiert normalerweise Inhalte, die einmal gültig waren, aber jetzt falsch oder veraltet sind. Es geht über eine reine Stiländerung hinaus. Es eignet sich perfekt, um Änderungen in rechtlichen Dokumenten, Korrekturen in Blogposts oder Preisaktualisierungen anzuzeigen.
Andererseits, wenn Sie den Durchgestrichen-Look nur aus dekorativen Gründen verwenden, ohne dass der Text falsch ist, ist es besser, CSS direkt zu verwenden, wie hier:
span.strike {
text-decoration: line-through;
}
Und wenden Sie es dann in Ihrem HTML an:
<p>This text is <span class="strike">crossed out</span> just for fun!</p>
Dieser Ansatz dient rein der Gestaltung und hat nicht die gleiche Bedeutung wie das <s>-Tag.
Das <mark>-Tag: Hervorgehobener Text
Das Tag <mark> wird verwendet, um Text hervorzuheben. Es hilft dabei, bestimmte Teile Ihres Inhalts hervorzuheben und Aufmerksamkeit zu erregen. Standardmäßig wird Text mit einem gelben Hintergrund hervorgehoben, wenn das <mark> Tag verwendet wird.
Zweck des <mark> Tags
Das <mark> Tag ist großartig, wenn Sie etwas Wichtiges betonen möchten. Es wird oft verwendet, um Suchergebnisse, kürzliche Änderungen oder jeden Text, der besondere Aufmerksamkeit erfordert, anzuzeigen.
Hier ist ein Beispiel, wie es funktioniert:
<p>This is a <mark>highlighted</mark> word.</p>
Dies wird angezeigt als:
Dies ist ein hervorgehobenes Wort.
Best Practices für die Verwendung von <mark> zur Betonung oder Anzeige von Suchergebnissen
Hervorheben von Schlüsselbegriffen: Wenn Sie wichtige Wörter oder Phrasen in einem Artikel oder Blog-Beitrag hervorheben möchten, ist das <mark> Tag eine einfache Möglichkeit, dies zu tun:
<p>The most important concept here is <mark>efficiency</mark>.</p>
Das wichtigste Konzept hier ist Effizienz.
Suchergebnisse: Wenn auf einer Webseite Suchergebnisse angezeigt werden, erleichtert es den Benutzern, die übereinstimmenden Begriffe zu finden, wenn das <mark> Tag verwendet wird:
<p>Your search for <mark>HTML</mark> found these results:</p>
Ihre Suche nach HTML ergab diese Ergebnisse:
Aktuelle Updates: Sie können das <mark> Tag auch verwenden, um neue Updates oder Änderungen in Ihrem Inhalt anzuzeigen:
<p>We have recently added the <mark>new feature</mark> to the app.</p>
Wir haben kürzlich die neue Funktion zur App hinzugefügt.
Wie man hervorgehobenen Text effektiv gestaltet
Während die Standardfarbe für <mark> gelb ist, können Sie sie mit CSS ändern, um zum Design Ihrer Website zu passen. Hier ist ein Beispiel, wie Sie den hervorgehobenen Text anpassen können:
mark {
background-color: lightblue;
color: black;
padding: 2px;
}
Dadurch erhält der Text einen hellblauen Hintergrund mit schwarzer Schrift.
Wenn Sie möchten, dass der Text noch mehr auffällt, können Sie einen Rahmen hinzufügen oder die Schriftart ändern:
mark {
background-color: yellow;
color: black;
font-weight: bold;
border-radius: 4px;
}
Dadurch wirkt der hervorgehobene Text polierter und auffälliger.
Browserunterstützung und Zugänglichkeitsüberlegungen
Das <mark>-Tag wird von allen modernen Browsern unterstützt, daher treten keine Kompatibilitätsprobleme auf. Stellen Sie einfach sicher, dass die von Ihnen gewählte Hintergrundfarbe genügend Kontrast für die Lesbarkeit bietet, insbesondere für Benutzer mit Sehbeeinträchtigungen.
Die Verwendung eines hellen Hintergrunds mit dunklem Text ist eine gute Faustregel. Durch das Testen des Farbkontrasts wird sichergestellt, dass der hervorgehobene Inhalt für alle zugänglich bleibt, einschließlich derjenigen, die Bildschirmlesegeräte verwenden.
Das <ruby>-Tag: Annotieren von Texten in ostasiatischen Sprachen
Das <ruby>-Tag wird verwendet, um kleinen Anmerkungen zum Text hinzuzufügen, die häufig in ostasiatischen Sprachen wie Japanisch oder Chinesisch zu sehen sind. Diese Anmerkungen helfen Lesern bei der Aussprache oder Bedeutung, insbesondere wenn die Zeichen komplex oder ungewohnt sind.
Definition und Anwendungsfälle für <ruby>
In Sprachen wie Japanisch ist es üblich, einen kleinen Leitfaden über oder neben den Zeichen zu verwenden, um zu zeigen, wie sie ausgesprochen werden sollen. Das <ruby>-Tag paart den Haupttext mit einer kleinen Anmerkung, normalerweise in einer einfacheren Schrift.
Hier ist ein grundlegendes Beispiel:
<ruby>漢 <rt>かん</rt> 字 <rt>じ</rt></ruby>
Dies zeigt die japanischen Kanji-Zeichen 漢字 mit ihrer Aussprache (Furigana) darüber oder daneben als かんじ (Kanji).
漢 字
Die Bedeutung der <rp> und <rt> Unterelemente
Das <rt> Element wird innerhalb des <ruby> Tags verwendet, um die Annotation (wie Aussprache) für den Haupttext zu definieren. Es steht für „Ruby-Text.“
<ruby>漢 <rt>かん</rt></ruby>
Dies zeigt 漢 mit かん (kan) darüber als Annotation.
漢
Das <rp> Element, kurz für „Ruby-Klammer,“ wird als Fallback für Browser verwendet, die den <ruby> Tag nicht unterstützen. Es umschließt zusätzliche Zeichen, wie Klammern, um den Ruby-Text zu kennzeichnen:
<ruby>漢 <rp>(</rp><rt>かん</rt><rp>)</rp></ruby>
Wenn der Browser Ruby-Annotationen nicht unterstützt, wird die Aussprache in Klammern angezeigt, wie hier:
漢 (かん).
Praktische Beispiele: Ruby-Annotationen für das Sprachenlernen
Der <ruby> Tag ist ein hilfreiches Werkzeug für Sprachenlernende. Er kann die Aussprache für unbekannte Wörter oder Zeichen direkt darüber oder daneben anzeigen. Dies erleichtert es Anfängern, neue Vokabeln zu lesen und zu lernen.
Zum Beispiel, wenn Sie jemandem helfen möchten, das chinesische Wort für „Person“ zu lernen:
<ruby>人 <rt>rén</rt></ruby>
Dies würde 人 mit der Aussprache rén darüber zeigen.
人
Für längere Sätze:
<p><ruby>我 <rt>wǒ</rt></ruby> <ruby>是 <rt>shì</rt></ruby> <ruby>学生 <rt>xuéshēng</rt></ruby>.</p>
Dies hilft den Schülern, sowohl die Zeichen als auch die korrekte Aussprache zu sehen.
Ich bin ein .
Cross-Browser-Kompatibilität und Rendering-Überlegungen
Das <ruby>-Tag wird von den meisten modernen Browsern unterstützt, aber ältere Versionen rendern es möglicherweise nicht korrekt. Hier kommt das <rp>-Element ins Spiel, das sicherstellt, dass die Anmerkungen auch dann lesbar sind, wenn der Browser keinen Ruby-Text unterstützt.
Für die Barrierefreiheit sollten Sie sicherstellen, dass um die Anmerkungen genügend Platz vorhanden ist, damit sie leicht zu lesen sind. Sie können auch CSS verwenden, um das Aussehen der Anmerkungen anzupassen:
ruby rt {
font-size: 0.75em;
color: gray;
}
Dies macht den Ruby-Text kleiner und in einer anderen Farbe, um ihn visuell vom Hauptinhalt zu trennen.
Die Verwendung von <ruby> ist eine großartige Möglichkeit, die Lesbarkeit für Sprachlerner oder Leser, die mit bestimmten Schriften nicht vertraut sind, zu verbessern. Vergessen Sie nur nicht, die Browserunterstützung zu überprüfen und Rückfalloptionen für ein besseres Benutzererlebnis auf verschiedenen Geräten hinzuzufügen.
Das <time>-Tag: Semantische Zeit und Datum
Das <time>-Tag wird verwendet, um Daten oder Zeiten in einem maschinenlesbaren Format zu kennzeichnen. Es hilft Suchmaschinen, Browsern und anderen Tools, zeitbezogene Informationen klarer zu erkennen, was nützlich ist, um die Sichtbarkeit in den Suchergebnissen zu verbessern oder eine bessere Datenanalyse zu ermöglichen.
Verwendung des <time>-Tags für maschinenlesbare Daten und Zeiten
Wenn Sie das <time>-Tag verwenden, ermöglicht es Ihnen, Daten oder Zeiten bereitzustellen, die sowohl für Menschen als auch für Computer leicht lesbar sind. Dies ist besonders hilfreich auf Blogs, Nachrichtenartikeln oder Veranstaltungsseiten.
Hier ist ein Beispiel:
<p>Published on <time datetime="2024-10-01">October 1, 2024</time></p>
Der Text „1. Oktober 2024“ ist das, was Benutzer sehen werden, aber das datetime-Attribut bietet eine maschinenlesbare Version des Datums. Suchmaschinen können dieses Datum jetzt leicht interpretieren.
Veröffentlicht am
Sie können auch das <time>-Tag verwenden, um Zeiten anzuzeigen:
<p>The event starts at <time datetime="13:00">1:00 PM</time>.</p>
Dies macht sowohl Benutzern als auch Maschinen klar, wann das Ereignis stattfindet.
Das Ereignis beginnt um .
Wie <time> die SEO und die Datenanalyse für Ereignisdetails verbessert
Suchmaschinen verlassen sich auf strukturierte Daten, um Inhalte besser zu verstehen. Das <time>-Tag gibt ihnen eine klarere Vorstellung davon, wann Ereignisse, Veröffentlichungen oder Fristen stattfinden, was die Relevanz der Suchergebnisse verbessert. Beispielsweise können Suchmaschinen das Veröffentlichungsdatum eines Blogbeitrags oder die Uhrzeit eines Ereignisses besser anzeigen.
Für eine Veranstaltungsseite liefert das folgende Beispiel sowohl benutzerfreundliche als auch maschinenfreundliche Zeitinformationen:
<p>Join us for the workshop on <time datetime="2024-12-15">December 15, 2024</time> at <time datetime="15:30">3:30 PM</time>.</p>
Suchmaschinen und Webcrawler können diese Daten extrahieren und verwenden, um in den Suchergebnissen reiche Snippets zu erstellen, die dazu beitragen, dass das Ereignis bemerkt wird.
Beispiele für die Verwendung in Artikeln, Blogs und Veranstaltungsseiten
Hier sind einige praktische Beispiele, wie Sie das <time>-Tag verwenden können:
-
Blogbeiträge: Sie können anzeigen, wann ein Artikel veröffentlicht oder zuletzt aktualisiert wurde:
<p>Zuletzt aktualisiert am <time datetime="2024-09-28">28. September 2024</time>.</p> -
Veranstaltungshinweise: Veranstaltungs-Websites können das
<time>Tag verwenden, um aufzulisten, wann eine Veranstaltung stattfinden wird:<p>Unser nächstes Treffen findet am <time datetime="2024-11-10">10. November 2024</time> um <time datetime="18:00">18:00 Uhr</time>.</p> -
Fristen: Bei der Angabe wichtiger Fristen verwenden Sie das
<time>-Tag für mehr Klarheit:<p>Reichen Sie Ihren Antrag vor <time datetime="2024-10-30T23:59">30. Oktober 2024, 23:59 Uhr</time>.</p>
In all diesen Beispielen stellt das datetime-Attribut sicher, dass Computer die Zeitinformationen korrekt lesen können, während Benutzer eine lesbarere Version sehen.
Browser-Unterstützung und Barrierefreiheit
Das <time>-Tag wird in modernen Browsern weitgehend unterstützt. Es verbessert auch die Barrierefreiheit, da Screenreader das Datum und die Uhrzeit genauer interpretieren können, was eine bessere Erfahrung für Benutzer mit Behinderungen bietet.
Der <bdi> Tag: Bi-direktionale Textisolierung
Der <bdi> Tag steht für „bi-direktionale Isolation“ und wird verwendet, um Probleme mit der Textausrichtung auf mehrsprachigen Websites zu verhindern. Dieser Tag ist besonders hilfreich, wenn man mit Inhalten arbeitet, die sowohl von links nach rechts (LTR) als auch von rechts nach links (RTL) verlaufende Sprachen enthalten.
<bdi> Rolle des Tags auf mehrsprachigen Seiten
Beim Mischen von Sprachen mit unterschiedlichen Textrichtungen, wie Englisch (LTR) und Arabisch (RTL), kann der natürliche Fluss des Textes manchmal unübersichtlich werden. Der <bdi> Tag hilft, das Layout des Textes sauber zu halten, und stellt sicher, dass jeder Textabschnitt korrekt angezeigt wird, unabhängig von der Richtung der Sprache.
Wenn Sie beispielsweise Benutzereingaben (wie einen Benutzernamen) neben anderem Text anzeigen möchten und nicht wissen, in welcher Sprache der Benutzername sein wird, können Sie <bdi> verwenden, um sicherzustellen, dass es den Fluss nicht stört.
Wie man <bdi> zur Vermeidung von Problemen mit der Textausrichtung verwendet
Der <bdi> Tag umschließt den Teil des Textes, den Sie isolieren möchten, und verhindert, dass die Textausrichtung von umgebenden Inhalten beeinflusst wird.
Hier ist ein einfaches Beispiel:
<p>User <bdi>اسم</bdi> has logged in.</p>
Wenn der Benutzername auf Arabisch ist (was RTL gelesen wird), stellt der <bdi> Tag sicher, dass der Rest des Satzes (der auf Englisch ist und LTR gelesen wird) nicht gestört wird. Ohne den <bdi> Tag könnte der Satz aufgrund der Mischung der Textrichtungen falsch angezeigt werden.
Ein weiteres Beispiel mit Zahlen:
<p>Invoice number: <bdi>#1234</bdi></p>
Wenn die Rechnungsnummer Text oder Zahlen in verschiedenen Richtungen enthält, stellt das <bdi>-Tag sicher, dass die Formatierung korrekt bleibt.
Beispiele für <bdi>
Das <bdi>-Tag wird häufig in mehrsprachigen Anwendungen, benutzergenerierten Inhaltsplattformen und Websites verwendet, die gleichzeitig mit mehreren Sprachen umgehen. Beispielsweise könnten Websites, die Benutzern die Eingabe von Daten wie Namen oder Adressen ermöglichen, <bdi> verwenden, um eine ordnungsgemäße Textausrichtung sicherzustellen.
Hier ist ein Beispiel in einem Forum:
<p><bdi>مستخدم</bdi> liked your post!</p>
Ohne <bdi> könnte der Text ungeschickt angezeigt werden, aber damit werden sowohl der arabische Benutzername als auch der englische Text ordnungsgemäß angezeigt.
Browserkompatibilität
Das <bdi>-Tag wird in allen modernen Browsern unterstützt, einschließlich Chrome, Firefox, Safari und Edge. Es ist eine leichtgewichtige Lösung, erfordert keine spezielle Gestaltung und hilft, das Layout Ihres Inhalts ordentlich zu halten, wenn es um mehrsprachigen Text geht.
Das <dfn>-Tag: Begriffe definieren
Das <dfn>-Tag wird verwendet, um die erste Instanz eines Begriffs zu kennzeichnen, der innerhalb einer Webseite definiert wird. Es hilft den Lesern, schnell zu erkennen, dass ein bestimmtes Wort oder eine bestimmte Phrase eine Definition ist, was die Klarheit Ihres Inhalts verbessert, insbesondere bei technischen Texten.
Wie man <dfn> zum Markieren von Definitionen verwendet
Das <dfn>-Tag ist einfach zu verwenden. Sie umschließen damit das Wort oder die Phrase, die Sie definieren möchten. Typischerweise erscheint der Begriff in der Nähe der Erläuterung seiner Bedeutung.
Beispiel:
<p>The <dfn>DOM</dfn> (Document Object Model) is a programming interface for web documents.</p>
Hier hebt das <dfn>-Tag hervor, dass „DOM“ der zu definierende Begriff ist.
Das DOM (Document Object Model) ist eine Programmierschnittstelle für Webdokumente.
Best Practices für die Bereitstellung von Erklärungen im Artikel
Wenn Sie das <dfn>-Tag verwenden, stellen Sie sicher, dass der Begriff, den Sie definieren, eng gefolgt von seiner Erklärung kommt. Dies sorgt für Klarheit und hilft den Lesern, den Begriff sofort mit seiner Bedeutung zu verbinden.
Es ist auch eine gute Idee, das <dfn>-Tag nur beim ersten Auftreten eines Begriffs zu verwenden, da wiederholte Verwendung den Leser verwirren kann.
Zum Beispiel in einem technischen Artikel über HTML:
<p>The <dfn>API</dfn> (Application Programming Interface) allows different software applications to communicate with each other. Once defined, an API can simplify many web development tasks.</p>
In diesem Fall wird „API“ definiert, wenn es zum ersten Mal erwähnt wird, und spätere Verwendungen von „API“ benötigen das <dfn>-Tag nicht mehr.
Wie <dfn> die Klarheit technischer Inhalte verbessert
Die Verwendung des <dfn>-Tags in technischen Texten ist eine großartige Möglichkeit, Inhalte leichter verständlich zu machen. Es signalisiert den Lesern klar, wann Sie einen neuen Begriff einführen, was besonders nützlich ist, wenn komplexe Ideen erklärt werden. Dies verbessert die Lesbarkeit und ermöglicht es den Nutzern, wichtige Konzepte schneller zu erfassen.
Durch das Markieren von Definitionen mit <dfn> können Suchmaschinen und andere Tools auch in der Lage sein, Ihre Inhalte besser zu interpretieren, was sie zugänglicher macht. Zum Beispiel können technische Glossare oder Bildungswebsites <dfn> verwenden, um ihre Begriffe hervorzuheben.
Beispiel für <dfn>
<p>The <dfn>URL</dfn> (Uniform Resource Locator) is the address used to access a resource on the web.</p>
In diesem Satz wird der Leser in den Begriff „URL“ eingeführt, gefolgt von einer klaren Erklärung. Diese Methode, Begriffe mit dem <dfn>-Tag einzuführen, hilft, technische Inhalte viel leichter lesbar und verständlich zu machen, insbesondere für diejenigen, die mit dem Thema nicht vertraut sind.
Das <wbr>-Tag: Zeilenumbruchmöglichkeiten
Das <wbr>-Tag wird verwendet, um anzugeben, wo ein Wort oder eine URL getrennt werden kann, um einen Zeilenumbruch zu erzeugen, wenn dies erforderlich ist. Dies ist nützlich, wenn man es mit langen Wörtern, URLs oder jeglichem Text zu tun hat, der das Layout einer Webseite stören könnte.
Was das <wbr>-Tag ist und warum es für lange Wörter oder URLs unerlässlich ist
Manchmal können lange Wörter oder URLs das Design einer Webseite durcheinanderbringen, indem sie horizontales Scrollen verursachen oder das Layout brechen. Das <wbr>-Tag gibt dem Browser einen Hinweis, wo das Wort getrennt werden kann, jedoch nur, wenn es notwendig ist. Dies hilft, den Text lesbar zu halten und Überlauf zu verhindern.
Zum Beispiel, wenn Sie eine lange URL haben, können Sie das <wbr>-Tag platzieren, um dem Browser zu sagen, wo er den Text trennen kann:
<p>Visit our website at https://www.example<wbr>.com/super/long-url-that-might-break-layout</p>
Wenn der Browser die URL trennen muss, wird er dies nach dem <wbr> tun, um sicherzustellen, dass das Design intakt bleibt.
Best Practices zur Steuerung des Zeilenumbruchs und Textüberlaufs
Das <wbr>-Tag sollte an Stellen verwendet werden, an denen Text Überlaufprobleme verursachen könnte, wie z. B. bei langen Fachbegriffen, E-Mail-Adressen oder URLs. Aber verwenden Sie es nicht übermäßig, da unnötige Trennungen den Text schwerer lesbar machen können.
Hier ist ein weiteres Beispiel mit einem langen Wort:
<p>This word is too long: anti<wbr>disestablishmentarianism.</p>
Wenn das Wort zu lang für die Zeile wird, wird der Browser es nach „anti-“ aufteilen, ohne die Lesbarkeit zu beeinträchtigen.
In Kombination mit CSS können Sie auch die Wortumbrüche und den Textüberlauf für bessere Ergebnisse steuern:
p {
word-wrap: break-word;
overflow-wrap: break-word;
}
Dieses CSS stellt sicher, dass der Text ordentlich umgebrochen wird, wenn nötig, und durch die Verwendung von <wbr> können Sie mehr Kontrolle darüber haben, wo diese Umbrüche stattfinden.
Browserunterstützung für <wr> und potenzielle Herausforderungen
Das <wbr>-Tag wird in allen wichtigen Browsern unterstützt, einschließlich Chrome, Firefox, Safari und Edge. Es ist leichtgewichtig und benötigt keine spezielle Gestaltung, um zu funktionieren.
Aber achten Sie darauf, dass der übermäßige Einsatz des Tags dazu führen kann, dass Textumbrüche unnatürlich erscheinen, wenn der Inhalt vergrößert oder auf verschiedenen Bildschirmgrößen angezeigt wird.
Zum Beispiel:
<p>Contact us at longemail<wbr>@example<wbr>.com for more information.</p>
In diesem Fall können Sie vermeiden, dass lange E-Mail-Adressen Layoutprobleme verursachen, aber die E-Mail könnte an verschiedenen Stellen je nach Bildschirmbreite zerbrochen erscheinen.
Verwenden Sie <wbr>, wenn Sie lange Textzeichenfolgen erwarten, die sich nicht natürlicherweise umbrechen, um Ihr Design sauber und funktional über verschiedene Geräte hinweg zu halten.
Das <ins>-Tag: Eingefügter Text
Das <ins>-Tag wird verwendet, um Text anzuzeigen, der einem Dokument hinzugefügt wurde. Dies ist oft hilfreich, wenn Änderungen, Aktualisierungen oder Änderungen in Dokumenten nachverfolgt werden. Es kommt auch mit einer Standardunterstreichung, um den neuen Inhalt hervorzuheben.
Was ist das <ins>-Tag und wie vergleicht es sich mit dem <s>-Tag?
Der <ins>-Tag ist für das Markieren von eingefügtem Inhalt vorgesehen, während der <s>-Tag für Text verwendet wird, der entfernt wurde oder nicht mehr relevant ist. Beide Tags sind nützlich, wenn Sie Änderungen in einem Dokument anzeigen müssen, wie Updates oder Überarbeitungen.
Beispiel:
<p>This is the <ins>new text</ins> that was added.</p>
<p>This is the <s>old text</s> that is no longer valid.</p>
Hier hebt der <ins>-Tag das Hinzugefügte hervor, und der <s>-Tag zeigt an, was als veraltet durchgestrichen wurde.
Dies ist der neue Text, der hinzugefügt wurde.
Dies ist der alte Text, der nicht mehr gültig ist.
Verwendung zur Verfolgung von Dokumentbearbeitungen oder Versionierung
Der <ins>-Tag wird häufig verwendet, wenn Dokumente verwaltet werden müssen, die einer Versionierung bedürfen oder bei denen Bearbeitungen sichtbar sein sollen. Sie können ihn beispielsweise in kollaborativen Schreibplattformen oder rechtlichen Dokumenten verwenden, um anzuzeigen, welche Teile hinzugefügt wurden.
Beispiel eines Dokuments mit Änderungen:
<p>The contract was updated to include <ins>an extra clause</ins> on data privacy.</p>
Dies macht dem Leser deutlich, dass der Abschnitt über „Datenschutz“ kürzlich hinzugefügt wurde.
In der Softwareentwicklung oder im Content-Management könnten Sie den <ins>-Tag verwenden, um Text anzuzeigen, der in versionierten Dateien neu eingeführt wurde, um Bearbeitungen und Überarbeitungen im Laufe der Zeit leichter nachverfolgen zu können.
Gestaltungsoptionen zur Hervorhebung von Änderungen
Die Standardansicht des <ins>-Tags ist unterstrichen, aber Sie können sie mit CSS anpassen, um eine bessere Hervorhebung zu erzielen, insbesondere wenn Sie möchten, dass die Änderungen stärker auffallen.
So können Sie den <ins>-Tag mit verschiedenen visuellen Effekten gestalten:
ins {
background-color: #d4edda;
color: green;
text-decoration: none; /* Entfernt die standardmäßige Unterstreichung */
}
Dies gibt dem eingefügten Text eine grüne Farbe und einen hellgrünen Hintergrund, wodurch er auffälliger wird.
Sie können auch verschiedene Stile hinzufügen, wie eine fette Schriftart oder einen Rahmen:
ins {
font-weight: bold;
border-bottom: 2px solid green;
}
Diese Formatierungsoptionen erleichtern es den Benutzern, zu erkennen, was hinzugefügt oder geändert wurde, und verbessern die Lesbarkeit und Transparenz von Dokumentenänderungen.
Insgesamt ist das <ins>-Tag eine einfache, aber effektive Möglichkeit, eingefügte Inhalte nachzuverfolgen, was es sehr nützlich für technische Dokumente und kollaborative Plattformen macht, auf denen Überarbeitungen klar sichtbar sein müssen.
Das <del>-Tag: Gelöschter Text
Das <del>-Tag wird verwendet, um Text anzuzeigen, der aus einem Dokument gelöscht oder entfernt wurde. Dieses Tag streicht den Text standardmäßig durch, was es einfach macht, zu erkennen, was entfernt wurde. Es ist besonders hilfreich in Situationen, in denen Änderungen oder Überarbeitungen nachverfolgt werden müssen.
Zweck und Verwendung des <del>-Tags für durchgestrichenen Text
Die Hauptaufgabe des <del>-Tags besteht darin, visuell zu zeigen, dass ein Inhalt entfernt wurde. Es ist in Dokumenten, Artikeln oder Code üblich, wo Änderungen für den Leser sichtbar gemacht werden müssen. Der gelöschte Text wird normalerweise durchgestrichen, was anzeigt, dass er nicht mehr relevant oder gültig ist.
Beispiel:
<p>This product costs <del>$50</del> $40 now.</p>
In diesem Beispiel ist die Preisänderung deutlich. Der alte Preis (50 $) ist durchgestrichen, und der neue Preis (40 $) folgt sofort danach.
Wie es mit <ins> zur Nachverfolgung von Überarbeitungen kombiniert werden kann
Der <del>-Tag kann mit dem <ins>-Tag kombiniert werden, um sowohl entfernte als auch neu hinzugefügte Inhalte anzuzeigen, was ihn perfekt für die Nachverfolgung von Änderungen oder Überarbeitungen macht. Dies ist sehr nützlich beim kollaborativen Schreiben, in rechtlichen Dokumenten oder in jeder Situation, in der Änderungen klar dokumentiert werden müssen.
Beispiel zur Nachverfolgung von Überarbeitungen:
<p>The meeting has been moved <del>Monday</del> <ins>Tuesday</ins>.</p>
Hier ist es leicht zu erkennen, dass „Montag“ durch „Dienstag“ ersetzt wurde, und der Leser weiß genau, was sich geändert hat.
Best Practices für die Anzeige und Gestaltung gelöschter Inhalte
Standardmäßig wendet der <del>-Tag einen Durchstreich auf den Text an, aber Sie können ihn mit CSS weiter gestalten, um ihn auffälliger zu machen oder Ihren Designbedürfnissen anzupassen.
Hier ist ein Beispiel zur Anpassung des Erscheinungsbilds gelöschter Texte:
del {
color: red;
text-decoration: line-through;
}
Dies lässt gelöschten Text rot erscheinen, was mehr Aufmerksamkeit darauf lenkt. Sie können es auch mit zusätzlichem Formatieren kombinieren, wie z.B. das Ausblenden des Textes:
del {
color: gray;
opacity: 0.7;
}
Dieser Stil verringert die Betonung auf gelöschte Inhalte, wodurch sie weniger ablenkend, aber dennoch für die Leser sichtbar bleiben.
Der <del>-Tag bietet eine einfache und effektive Möglichkeit, Änderungen zu verfolgen und anzuzeigen, insbesondere in Kombination mit dem <ins>-Tag. Er ist entscheidend, um Dokumente transparent und klar für jeden zu halten, der Änderungen oder Aktualisierungen überprüft.
Fazit
Die Nutzung dieser einzigartigen HTML-Elemente erweitert die Möglichkeiten im Web, was dazu beiträgt, bedeutungsvollere und zugänglichere Inhalte zu erstellen. Tags wie <q>, <s>, <mark>, <ruby>, <time>, <bdi>, <dfn>, <wbr>, <ins> und <del> bringen jeweils ihre eigenen Vorteile für spezifische Aufgaben mit sich. Diese Elemente tun mehr als nur Text zu gestalten; sie fügen Kontext hinzu, verbessern die Benutzererfahrung und optimieren die Dokumentstruktur.
Die korrekte Anwendung dieser Tags macht nicht nur Ihre Webseiten klarer, sondern erhöht auch die Kompatibilität über Geräte und Suchmaschinen hinweg. Wenn Sie diese Elemente verwenden, denken Sie darüber nach, wie jedes einzelne sowohl die visuelle Präsentation als auch die Informationsstruktur unterstützt. Sie bieten einfache, aber wirkungsvolle Möglichkeiten, Websites reichhaltiger und verständlicher zu gestalten und kommen einer breiten Palette von Nutzern zugute.
Wenn Sie Fragen oder Vorschläge haben, zögern Sie nicht, mich auf LinkedIn zu kontaktieren. Wenn Ihnen dieser Inhalt gefallen hat, ziehen Sie in Betracht, mir einen Kaffee zu kaufen, um die Erstellung weiterer entwicklerfreundlicher Inhalte zu unterstützen.
Source:
https://www.freecodecamp.org/news/less-common-html-elements-and-how-to-use-them/