Sollte ich nicht standardmäßige Tags in einer HTML-Seite zum Hervorheben von Wörtern verwenden?

Ich würde gerne wissen, ob die Verwendung von Nicht-Standard-Tags in einer HTML-Seite für bestimmte benutzerdefinierte Zwecke empfehlenswert oder zulässig ist.

Beispielsweise:

Lorem ipsum dolor sitzt amet, consectetur adipiscing elit. Nullam consequat, felis sit amet suscipit laoreet, nisi arcu accumsan arcu, vel pulvinar odio magna suscipit mi.

Ich möchte "consectetur adipiscing elit" als wichtig und "nisi arcu accumsan arcu" als hervorgehoben markieren.

Also in den HTML würde ich setzen:

Lorem ipsum dolor sit amet, <important> consectetur adipiscing elit </ important>. Nullam consequat, felis sit amet suscipit laoreet, <highlighted> nisi arcu accumsan arcu </ highlighted>, vel pulvinar odio magna suscipit mi.

und im CSS:

important {
 background: red
 color: white;
}

highlighted {
 background: yellow;
 color: black;
}

Da dies jedoch keine gültigen HTML-Tags sind, ist dies in Ordnung?

Nein, das ist keine gute Praxis. Sie sollten bereits semantische, aussagekräftige Tags verwenden - vielleicht <em>in diesem Fall - und CSS-Stile anwenden, um Ihre Designanforderungen zu erfüllen.

Ihre Frage wurde gestellt, ob es sich um " bewährte oder legale Verfahren " handelt.

Erstens: Es ist irgendwie legal - zumindest wird es toleriert. Browser wurden immer so programmiert, dass sie mit Tags umgehen, die sie nicht verstehen, auch wenn sie diese einfach ignorieren. Dieser HTML-Code:

Some <b>bold</b> and some <slanted>italic</slanted>.

Wird so aussehen, ist jeder einzelne Browser:

Einige fett und einige kursiv.

Darüber hinaus können Sie dieses Element in den meisten Browsern in CSS formatieren. Wenn Sie also die folgende CSS-Definition hinzufügen:

slanted { font-style: italic; }

Die meisten Browser werden jetzt wie folgt gerendert:

Einige fett und einige kursiv .

Wirklich: Probieren Sie es aus . Dies ist übrigens ein Trick, mit dem Webentwickler versuchen, sicherzustellen, dass neue HTML5-Tags in älteren Browsern korrekt angezeigt werden.

Das ist jedoch nicht das ganze Bild. Die vollständige Antwort lautet Nein, es ist keine gute Praxis . Vielleicht haben Sie bemerkt, dass ich den Ausdruck "die meisten Browser" verwende. Leider können alle Versionen von Internet Explorer vor IE9 dieses Verhalten nicht implementieren. In IE8 und früheren Versionen sieht der obige Code immer noch so aus:

Einige fett und einige kursiv.

Es gibt eine exzellent detaillierte Beschreibung des Problems bei Dive Into HTML5 , wo Sie auch Details einer Problemumgehung finden. Die Problemumgehung erfordert jedoch JavaScript, sodass es sich nicht um eine reine HTML-Lösung handelt und nicht in allen Szenarien funktioniert.

Also, kurze Antwort: Halten Sie sich nur an Standard-HTML-Elemente und gestalten Sie sie so, wie Sie es in Ihrem CSS möchten.

Wenn Sie die Semantik aus <important/>bestimmten Gründen beibehalten müssen, können Sie Ihre benutzerdefinierten Tags mithilfe von XSL in gültiges HTML umwandeln. Mehr zu diesem Thema können Sie hier lesen:

http://www.w3.org/Style/XSL/WhatIsXSL.html

http://www.4guysfromrolla.com/webtech/081300-2.shtml

http://www.ibm.com/developerworks/xml/library/x-tiphtml/index.html

http://www.siteexperts.com/tips/xml/ts01/page5.asp

http://www.htmlgoodies.com/beyond/xml/converting-xml-to-html-using-xsl.html

Sie können <important/>die endgültige HTML-Ausgabe immer noch nicht haben , aber Sie können sie automatisch in so etwas wie transformieren lassen <span class="important"....

Hier finden Sie einige Antworten, die erklären, warum Sie niemals Ihre eigenen benutzerdefinierten Tags erstellen sollten. Sie sind wohl alle falsch.

WHATWGs Analyse von benutzerdefinierten Tags kommt zu dem Schluss, dass diese akzeptabel, standardkonform (da der Umgang mit nicht erkannten Tags klar definiert ist) und zugänglicher sind als beispielsweise das Gestalten eines generischen Div.

<x-accordion> </ x-accordion> ist in jeder mechanischen Hinsicht nicht schlechter als <div class = "accordion"> </ div>. In Ermangelung einer Definition für "X-Akkordeon" (oder Unterstützung für Komponentenmodelle) bedeuten beide dasselbe, beide können auf die gleiche Weise gestaltet werden. Eines ist HTMLUnknownElement, das andere HTMLDivElement und die API-Oberfläche ist identisch.

Was Sie tun sollten, was das OP nicht getan hat, ist, allen benutzerdefinierten Tags das Präfix 'x-' gemäß Konvention voranzustellen. Dies weist eindeutig darauf hin, dass dieses Tag für Ihr Dokument lokal sein soll, und vermeidet Konflikte mit zukünftigen Spezifikationselementen.

Einige argumentieren, dass bestimmte gängige Browser keine standardkonformen benutzerdefinierten Tags verarbeiten und daher nicht verwendet werden sollten. Das Verhalten von nicht kompatiblen Browsern ist jedoch ein eigenes Problem und zwingt Sie vorzugsweise nicht zum Schreiben von nicht semantischem Markup. Es gibt sowohl Javascript- als auch Nicht-Javascript-Lösungen für dieses Problem, die nur für die nicht kompatiblen Browser angewendet werden sollten, die Sie speziell unterstützen möchten.

Wenn jedoch ein Tag in der Spezifikation (<mark>) vorhanden ist, das die semantische Bedeutung des von Ihnen erstellten Tags (<highlight>) klar abdeckt, ist es sicherlich vorzuziehen, das vorhandene Tag zu verwenden.

Sie können <em />und <strong />mit benutzerdefiniertem CSS verwenden, um die Darstellung zu ändern.

Stark, bezieht sich auf eine stärkere Bedeutung.

Betonung bezieht sich auf erhöhte Betonung.

Auf der praktischen Seite ist es nicht erforderlich , neue Tags zum Hervorheben zu verwenden. Sie können verwenden emoder iTags , wenn Sie es vorziehen , kursiv als Standard (nicht-CSS) Rendering und strongoder bwenn Sie es vorziehen , Bolding als Standard. Wenn Sie aus irgendeinem Grund das Standard-Rendering als normalen Text bevorzugen, dh keine Hervorhebung, verwenden Sie span. In jedem Fall können Sie ein classAttribut verwenden, um diese Verwendung von einer anderen Verwendung zu unterscheiden, die Sie möglicherweise für das Markup haben.

HTML-Spezifikationen und (HTML5-) Entwürfe sind in Bezug auf die Semantik dieser Elemente unklar, dies muss jedoch keine größeren Kopfschmerzen verursachen.

Nein, obwohl in XHTML neue Tags aus einem anderen Namespace hinzugefügt werden dürfen, wird von der Verarbeitung nicht angegebener HTML-Tags dringend abgeraten.

Nun, es ist legal, dass Sie nicht dafür verhaftet werden. Aber wenn Attentäter vom W3C an Ihrer Tür auftauchen, wundern Sie sich nicht.

Zunächst einmal werden andere Entwickler nicht wissen, was sie bedeuten. Im Fall von <important>und ist dies der Fall <highlight>, aber wenn Sie so etwas wie sagen, <set>wissen Sie vielleicht, dass Sie sich auf eine mathematische Menge beziehen, aber jemand anderes, der Ihren Code liest, könnte ihn für etwas anderes halten. Ohne die Spezifikation, um eine Antwort zu geben, könnte es viel Verwirrung geben.

Zweitens, was ist, wenn das W3C entscheidet, dass ein <important>Element eine gute Idee ist, aber der Meinung ist, dass dies eine dringende Benachrichtigung bedeuten sollte, wie z

<important>This site is going to be down for maintenance 2/29/2012.</important>

Dann bist du fertig. Browser und Ihre Kollegen Entwickler werden ziemlich verwirrt sein. Sie werden Sie wahrscheinlich zwingen, Ihren Code mit regulären Ausdrücken zu analysieren, bis Sie verrückt werden. Und wir alle wissen, wie sich das herausstellt.

Drittens können Sie mit IE <9 unbekannte Elemente nicht ohne einen kleinen Hack formatieren. Keine große Sache, aber nervig.

Zuletzt in diesem Fall <important>und <highlight>bereits vorhanden! <strong>und <mark>sind was du suchst. Entsprechend der HTML5-Spezifikation

Das starke Element ist für seinen Inhalt von großer Bedeutung.

und

Das mark-Element repräsentiert eine Textfolge in einem Dokument, das zu Referenzzwecken markiert oder hervorgehoben ist ...

Wenn Sie es nicht für "Referenzzwecke" verwenden, wäre ein <span>mit einer Klasse in Ordnung.

http://www.w3.org/TR/html5/elements.html

Dies ist Revision 1.5612.

Autoren dürfen keine Elemente, Attribute oder Attributwerte verwenden, die von dieser Spezifikation oder anderen anwendbaren Spezifikationen nicht zugelassen sind, da dies die zukünftige Erweiterung der Sprache erheblich erschwert.

Ignorieren jeder anderen Meinung hier.

Es ist aus zwei sehr wichtigen Gründen keine gute Übung:

Erstens ist es durchaus möglich, dass das Normungskomitee irgendwann beschließt, ein Tag mit dem Namen aufzunehmen <important>, das Ihre Verwendung dafür verfälscht. Sicher, es könnte eine Weile dauern. Aber es ist möglich, dass Sie Zeit damit verschwenden, es danach herauszureißen.

Zweitens (dies ist der eigentliche Grund) wird der Programmierer, der Ihren Code erbt, entweder ständig "wtf" sagen, während er all das herauszieht, oder, ebenso gut möglich, völlig verwirrt sein von dem, was Sie sind habe getan und einfach frustriert gekündigt.

Also sei nett. Man weiß nie, vielleicht bittet man eines Tages einen von ihnen um einen Job.

Nein, Sie können keine eigenen HTML-Tags erstellen, da Sie dann alle gängigen Browser zum Implementieren dieser Tags veranlassen müssten. Wenn Browser derzeit ein nicht erkanntes Tag finden, ignorieren sie alle darin enthaltenen Tags. Sofern Sie also nicht möchten, dass Ihr eigener Browser ein neues erstellt Tags sind sinnlos und funktionieren auch dann nur in Ihrem Browser.

Sie könnten versuchen, einen Anwendungsfall für sie beim w3c einzureichen, aber ich bezweifle, dass es irgendwohin kommen würde.

Nein, es ist keine gute Praxis aus allen Gründen, die von allen anderen Antworten geliefert werden. Anstatt diese Punkte zu wiederholen, möchte ich eine Option vorstellen, die ich in diesen Antworten nicht gesehen habe!

Für den Fall, dass keine Tags vorhanden sind, deren semantische Bedeutung Ihren Zielen entspricht, können Sie eine Kombination aus CSS und dem neuen data-*Attribut in der HTML 5-Spezifikation verwenden. Dies funktioniert natürlich mit den meisten Tags, die Sie auswählen.

Beispiel:

Lorem ipsum dolor sit amet, 
<span class="important" data-type="important">consectetur adipiscing elit</span>. 
Nullam consequat, felis sit amet suscipit laoreet, 
<span class="highlighted" data-type="highlighted">nisi arcu accumsan arcu</span>, 
vel pulvinar odio magna suscipit mi.

Dies ist zwar keine perfekte Lösung, da es keine genau definierte semantische Bedeutung für data-*Attribute gibt, aber Sie können zumindest denjenigen zusätzliche Informationen bereitstellen, die die Bedeutung Ihres data-typeAttributs kennen.