Entwicklertools · HTML-WYSIWYG-Editor
strong vs b und em vs i: Warum semantisches Inline-HTML für Redakteure wichtig ist
· Warum es wichtig ist
html Barrierefreiheit inhaltsbearbeitbar
Erklärt den praktischen Unterschied zwischen semantischen und präsentationsbezogenen Inline-Elementen, was unterstützende Technologien und Suchmaschinen damit machen und wie Sie überprüfen können, was Ihr Editor ausgibt.
Fett ist nicht immer wichtig – wählen Sie die Bedeutung vor dem Aussehen
Ein Produktcode darf nur fett gedruckt sein, damit die Leser ihn schnell finden können; Eine Warnung kann stark sein, weil ihre Bedeutung mit der Bedeutung des Satzes zusammenhängt. Diese beiden Absichten können in einem Standard-Stylesheet gleich aussehen. Wenn Sie sich ausschließlich für das Erscheinungsbild entscheiden, wird das Markup mehrdeutig, wenn sich CSS ändert oder ein anderer Leser die Struktur nutzt.
Die Symbolleiste von ToolAcre beschriftet ihre Aktionen mit Fett und Kursiv, während der Sanitizer die alten b- und i-Elemente in stark und em normalisiert. Das ist eine nützliche Vorgabe für betonte Prosa, aber ein Redakteur muss dennoch entscheiden, ob die ausgewählten Wörter wirklich Bedeutung oder Betonung und nicht Zierde haben.
Was die HTML-Spezifikation heute sagt – fasst die aktuelle Bedeutung von strong, em, b und i zusammen
Stark steht für starke Bedeutung, Ernsthaftigkeit oder Dringlichkeit; em stellt eine Betonung dar, deren Platzierung die Interpretation beeinflussen kann. Das b-Element kann Aufmerksamkeit erregen, ohne Bedeutung hinzuzufügen, während ich Text markieren kann, der von der umgebenden Prosa abweicht, beispielsweise einen Begriff, eine Stimme oder eine Konvention, ohne die Betonung hervorzuheben.
Die praktische Lektion ist nicht, dass zwei Tags verboten sind. Es geht darum, dass visuelle Gleichheit semantische Unterschiede nicht auslöscht. Die schmale Ausgabe von ToolAcre wählt stark und em aus, sodass Inhalte, die lediglich eine stilistische Abwechslung erfordern, möglicherweise eine Überprüfung oder einen anderen Ziel-Workflow anstelle einer erfundenen Symbolleistenfunktion benötigen.
Unterstützende Technologien können die Semantik anders darstellen; Dieses Repository beweist keine Ankündigung
Assistive Technologien können Elementsemantik nutzen, die genaue gesprochene Behandlung variiert jedoch je nach Produkt, Modus und Benutzerkonfiguration. Das Repository enthält keine Screenreader-Kompatibilitätssuite, daher verspricht dieser Artikel nicht, dass „strong“ immer mit einer bestimmten Stimme angesagt wird oder dass „b“ immer stumm ist.
Die Struktur ist immer noch wichtig, da sie Softwareinformationen bereitstellt, die einem formatierten Bereich fehlen. Testen Sie repräsentative Seiten mit den unterstützenden Technologien in Ihrer Support-Richtlinie. Ein semantisches Element schafft die Möglichkeit einer sinnvollen Interpretation; es garantiert nicht einen universellen hörbaren Effekt in jeder Umgebung.
Sucheffekte liegen außerhalb der Beweise dieses Herausgebers; Die Semantik verbessert weiterhin die Dokumentstruktur
Suchmaschinen können die Dokumentstruktur analysieren, aber keine lokale Quelle belegt Ranking-Änderungen durch den Austausch von „b“ gegen „stark“. Vermeiden Sie es, semantisches HTML in eine SEO-Formel umzuwandeln. Die Sichtbarkeit der Suche hängt von Inhalten, Links, technischer Zugänglichkeit und vielen Systemen außerhalb dieses Editors ab.
Der vertretbare Grund für die Verwendung von Semantik ist Klarheit und Interoperabilität. Autoren, Browser und nachgelagerte Transformationen können die beabsichtigte Wichtigkeit oder Hervorhebung erkennen, ohne eine Stildeklaration zurückzuentwickeln. Jede Suchkonsequenz sollte nur mit Beweisen der entsprechenden Plattform beschrieben werden und nicht aus einer lokalen Formatierungsschaltfläche abgeleitet werden.
Listen, die tatsächlich Listen sind – erweitert das Argument auf <ul> und <ol> im Gegensatz zu Bindestrichen und manueller Nummerierung
Das gleiche Prinzip gilt auch für Listen. Drei mit Bindestrichen beginnende Zeilen sind normaler Text, während ul und li eine Sammlung von Peer-Elementen darstellen. Vor Absätzen eingegebene Zahlenzeichen entsprechen nicht ol, dessen Reihenfolge und optionaler Startwert Teil der Struktur sind.
ToolAcre macht Aufzählungs- und nummerierte Listenbefehle verfügbar und lässt ul, ol und li durch seinen Filter zu. Das Verhalten von Browserbefehlen kann variieren, insbesondere bei der Verschachtelung. Überprüfen Sie daher die Quelle, nachdem Sie eine Liste erstellt haben. Eine korrekte Listensemantik entschuldigt nicht fehlende Beschriftungen, verwirrende Reihenfolge oder nicht unterstützte Tiefe im Ziel.
Arbeitsbeispiel: ToolAcre ordnet b während der Filterung stark und i em zu
Geben Sie „Bereitstellung stoppen, bevor Sie das Schema ändern“ ein, wählen Sie „Bereitstellung stoppen“ und drücken Sie Fett. Der Browserbefehl erstellt möglicherweise zunächst b, aber die Alias-Map des Sanitizers sendet starke Signale. Kursivschrift folgt dem gleichen Muster von i bis em. Der Quellmodus zeigt das normalisierte Ergebnis an.
Wählen Sie nun ein Produktlabel aus, das nur optisch hervorgehoben wird. ToolAcre verfügt über keine B-only- oder klassenbasierte Aufmerksamkeitskontrolle und die Markierung wird nur durch direkte Quellbearbeitung und nicht durch einen Symbolleistenanspruch auf die Zulassungsliste gesetzt. Entscheiden Sie, ob stark genau ist; Wenn nicht, verwenden Sie zielspezifisches Styling außerhalb dieses eingeschränkten Workflows.
Was dies nicht abdeckt – ARIA-Attribute, vollständige Barrierefreiheitsprüfungen oder Überschriftenstruktur, die separat behandelt wird
Dieser Artikel behandelt nicht ARIA, die vollständige Prüfung der Barrierefreiheit, die Überschriftenhierarchie oder das genaue Suchmaschinenverhalten. Es wird auch nicht behauptet, dass jedes auf der Zulassungsliste stehende Inline-Element über ein Symbolleisten-Steuerelement verfügt. Der Quellmodus kann u, s, sub, sup, mark, small, code, kbd, samp, var und abbr beibehalten, wenn sie gültig sind, aber visuelle Befehle bieten weniger Auswahlmöglichkeiten.
Durch das Filtern semantischer Tags wird beliebiges schädliches HTML nicht für die Veröffentlichung bereinigt. Der Tokenizer von ToolAcre weist eine explizite Parser-Differential-Einschränkung auf. Ein Server, der nicht vertrauenswürdige Übermittlungen wiedergibt, benötigt eine geeignete Parser-basierte Bereinigung und Richtlinie, während die Überprüfung der Barrierefreiheit das endgültige Ziel und nicht nur diese isolierte Vorschau untersuchen muss.
Takeaway: Bedeutung formatieren, dann prüfen – fasst die Gewohnheit zusammen und wie der HTML-WYSIWYG-Editor von ToolAcre die genauen erzeugten Elemente verfügbar macht
Format auf Bedeutung prüfen, dann prüfen. Strong und em sind wertvoll, wenn die Prosa wirklich Wichtigkeit und Betonung enthält; Sie sind kein universeller Ersatz für jede fette oder kursive Darstellung. ToolAcre macht seine Auswahl sichtbar, indem es den gefilterten HTML-Code nach jeder Aktion verfügbar macht.
Verwenden Sie die visuelle Steuerung für den Entwurf, den Quellmodus für die Überprüfung und das Ziel-CSS für das Erscheinungsbild. Wenn die gewünschte Präsentation kein genaues semantisches Element enthält, erzwingen Sie kein irreführendes Tag, nur weil es dem Design ähnelt. Bewahren Sie die Absicht des Autors in einem System, das sie darstellen kann.