Eine Single-Purpose-Website von Alexander Vishnyakov, um zu testen, ob es zulässig ist, ein bestimmtes HTML-Element in einen anderen Typ von HTML-Element zu setzen. Ziemlich praktisch, dafür eine Kurzhilfe zu haben.
Manche Kombinationen erscheinen ziemlich offensichtlich: Kann man ein <video> in ein <input> einfügen? Äh, nein. Manche sind kniffliger: Kann man ein <div> in ein <h1> einfügen? Nö — das hat mich diese Woche erwischt (derp). Manche sind ein wenig verwirrend, z. B. ist <div> ein ungültiges Kind von <ol>, aber ein gültiges Kind von <dl>.
Auf die Gefahr hin, dumm zu klingen, was genau meinen wir mit „Man kann keinen Div in einen H1-Tag einfügen“?
Ich habe versucht, einen Div in einen H1-Tag einzufügen, und es scheint genau so zu funktionieren, wie ich es erwartet hätte. Ich habe keine unerwarteten Verhaltensweisen oder bemerkenswerten Probleme festgestellt.
Was genau sind also die Konsequenzen davon?
Schadet es der Barrierefreiheit? Schadet es dem SEO? Verursacht es seltsames Verhalten in bestimmten Browsern? Oder ist es einfach nur eine Art „Das ist die Regel“.
So definiert die Spezifikation den Inhalt jedes Elements. Wenn Sie sich für h1 (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements) interessieren, können Sie lesen, dass der „erlaubte Inhalt“ „Phrasing Content“ ist (https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#phrasing_content). Ein Div gehört nicht zur Kategorie „Phrasing Content“, daher ist Ihr HTML-Markup ungültig, auch wenn Sie in diesem Fall keine unerwarteten Verhaltensweisen haben. Verwenden Sie einen Validator, um die Fehler zu sehen, die Sie erhalten: https://validator.w3.org/nu/#textarea
Wenn Sie zum Beispiel versuchen, einen Div in ein p einzufügen, erhalten Sie seltsames Verhalten: https://jsfiddle.net/c15q24x7/ (inspizieren Sie den Code, um zu verstehen, warum Sie keine rote Einfärbung haben)
Das gesagt, Sie sollten immer versuchen, ein gültiges Markup zu haben, um potenzielle Probleme zu vermeiden, auch wenn einige ungültige Markups in einigen Fällen funktionieren.
In meinem Fall ist bei der Verwendung eines HTML-zu-PDF-Konvertierungstools das gesamte Ding wegen Divs in Headern, die ich ohne Besseres Wissen verwendet hatte, abgestürzt.
Ein Div in einem h1 ist kein gültiges HTML. Es wird einen Validator fehlschlagen lassen
Betrachten Sie Ihr Web als gedrucktes Medium. Wäre es sinnvoll, irgendeinen Absatz aus dem Inhalt selbst in eine Überschrift einzufügen? Ich schätze nicht – Semantik, deshalb fügt man
<div>nicht in<h1>ein.So etwas sollte wirklich ein Linter sein, um Ihren Code tatsächlich zu überprüfen und sicherzustellen, dass Sie sich nicht vertun.
Manuelles Überprüfen scheint nicht gut genug zu sein.
Der Grund, warum eine Art „Das ist die Regel“ wichtig ist, auch wenn Ihr Browser es scheinbar wie erhofft verarbeitet, ist, dass Sie es nicht in allen Browsern, auf allen Geräten, in allen Umgebungen und nach allen Ereignissequenzen testen können – ganz zu schweigen von der Unfähigkeit, zukünftige Browser- oder System-Upgrades vorherzusehen. Browser-Designer können schlechten Code nach Belieben interpretieren, und das gibt uns keine Garantie, wie er interpretiert wird.
Auf der verwirrenden Seite ist div nicht gültig innerhalb von ol, aber gültig innerhalb von ol's li-Tag. Kann einschließen, schöne Spezifikation
OMG, das ist großartig. Ich meine, ich sollte definitiv ein besseres Verständnis von HTML haben, als ich es habe (ich habe kürzlich beschlossen, dass ich „HTML lernen“ muss), aber ein solches Werkzeug zu haben, ist äußerst nützlich.