[X] HTML benutzerdefinierten Tags: Vor-und Nachteile

Question

Ich mag würde einige semantische [X] HTML-Tags statt <div> s verwenden: <article>, <product>, <footer> usw. Einige von ihnen sind bereits in der kommenden HTML5 vorgestellt, aber Es wird nicht vollständig unterstützt.

Welche sind die möglichen Nachteile, denen ich beim Rendern gegenüberstehen könnte? Mit CSS, JS?

Die eine, an die ich mich erinnere, ist: IE6 kann Tags nicht klonen, die es nicht kennt.

Answer 1

Durch Hinzufügen des folgenden JavaScript-Updates werden benutzerdefinierte HTML5-Tags in IE ausgeführt. Tatsächlich arbeiten sie in jedem anderen Browser, den ich ausprobiert habe. Ich habe meine Website mit HTML5 erstellt, und obwohl es in IE6 & 7 nicht gut aussieht, funktioniert es immer noch. Hier ist der Code, der Sie in Ihren Template-Header setzen:

<!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <style type="text/css"> .clear { zoom: 1;display: block;} </style> <![endif]--> 

Mit HTML5-Tags gibt erhöhen Sie die Kontrolle mit Hilfe von CSS aufgrund ihrer semantischen Natur. Es ist viel einfacher Websites zu erstellen, da sie einfacher zu verstehen sind, wenn Sie die Tags korrekt verwenden.

Die Verwendung von Divs überall ist in Ordnung, denn wenn sie entsprechende IDs und Klassen haben, sind sie immer noch semantisch, aber mit den HTML5-Tags können Sie die Seitenstruktur viel schneller erkennen.

Answer 2

Wenn Sie nicht für einen sehr begrenzten Satz von Browsern entwickeln, klingt das wie eine schlechte Idee. Wenn es in älteren Browsern überhaupt funktioniert, wird es nicht gut funktionieren; Es wird Jahre dauern, bis wir von allen gängigen Browsern eine gute HTML 5-Unterstützung erwarten können.

Answer 3

Auch wenn Sie JS verwenden, um IE 6 HTML5-Tags "erkennen" zu lassen, haben Sie immer noch Probleme, da IE 6 solche Tags nicht verschachteln lässt.

Auf der anderen Seite, wenn Ihre Webseite nicht anwendungsorientiert ist, sondern nur zur Präsentation, können Sie auch einfach altes XML mit Styling verwenden. Es unterscheidet sich ein wenig von der herkömmlichen Art, Seiten zu erstellen, aber in XML gibt es keine "alten" oder "neuen" Tags.

Sehen Sie diese Seite - http://feeds.feedburner.com/blogspot/MKuf (Googles Blog-Feed) - als ein Beispiel für gestylt XML. JS und DOM API funktionieren genauso gut.

Answer 4

Dies spricht nicht ganz mit Ihrer Frage, aber <product> ist nicht semantisch, was die Computer betrifft.

Ein Mensch kann es lesen und denken: "Aha, das muss ein Produkt sein, das im Zusammenhang mit dieser Shopping-Website etwas bedeutet, das ich kaufen kann, und daher nicht" eine durch Multiplikation von Mengen erhaltene Menge "bedeutet könnte auf mathoverflow.com tun ". Das ist wirklich nützlich für jeden Menschen, der den Code liest, also ist es in diesem Sinne semantisch.

Aber so weit wie ein Computer Ihre Seite als HTML analysiert (oder ein Mensch, der Ihre HTML-Seite in einem Browser ansieht, anstatt den Code zu lesen), ist es nur ein unbekanntes Tag und wird daher keinen nützlichen Standard bekommen Styling (im Gegensatz zum <p> Tag, das schöne Ränder bekommt, um die Dinge lesbar auf dem Bildschirm zu machen) oder Verhalten (im Gegensatz zum <a> Tag, das anklickbar ist, wenn Sie ihm ein href Attribut geben).

Computer erhalten nur Semantik, wenn Leute sich einig sind, was Tags bedeuten, über Spezifikationen wie HTML5.

Answer 5

Die Frage erwähnt "Klonen", also ob IE6 ein benutzerdefiniertes Element stylen kann (es kann), ist nicht wirklich die Frage, ob JS verwendet werden soll, um benutzerdefinierte Elemente zu klonen, wenn IE6 das nicht verwalten kann (was ich nicht weiß).

Wenn die Idee ist, nur benutzerdefinierte Elemente zu stylen, dann kann jeder Browser es tun. Wegen IE6 müssen Sie Ihre benutzerdefinierten Elemente also < Präfix: Benutzerdefiniert /> Namespace und geben Sie den Namespace in das HTML-Element < html xmlns: Präfix = "http: // Domäne/Pfad">.

Um alles in allen Browsern genau richtig zu machen (und so Javascript auf benutzerdefinierte Elemente aufgreift) müssen Sie auch eine benutzerdefinierte DTD bereitstellen, damit der Namespace von benutzerdefinierten Elementen einheitlich funktioniert <! DOCTYPE html SYSTEM "http: //domain/path/custom.dtd "> und schreibe dann die DTD, die leider nicht trivial ist und einen vollständigen Ersatz für die HTML-DTD enthalten muss, die sie ersetzt. > </style;: custom {roten Hintergrund:}

So nach einer benutzerdefinierten DTD, die Angabe eines benutzerdefiniertes Namespace und Anwenden von benutzerdefinierten Elemente anwenden können sie in jedem Browser < style> Präfix \ gestylt werden somit.

Dies funktioniert konsistent über alle Browser, ist aber im Wert debattierbar. Es ermöglicht die Verwendung eines konsistenten, sinnvollen Markups mit Elementen, die klar durch den Namensraum abgegrenzt sind und keine Verschmutzung des Stylings durch Kaskadierung und Vermeidung von Divisionen riskieren.

Es ist jedoch ein bisschen wie ein Ghetto in Web-Entwicklung mit Komplexität, die möglicherweise nicht ausreichend belohnt werden.