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

20

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?

rcs20
quelle
56
<span class=..>?
Jake Berger
12
Per Definition handelt es sich bei benutzerdefinierten Tags nicht um standardisierte HTML-Tags. Sie sind nur Elemente, die keine spezifische Bedeutung haben.
Oded
14
<em>ist im Grunde dein <important>und <mark>ist dein <highlight>.
Peter C
3
Du hast recht. Die HTML5-Spezifikation besagt, dass <strong>sie für die Wichtigkeit besser geeignet ist als sie <em>ist. Mein Fehler.
Peter C

Antworten:

50

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.

Wyatt Barnett
quelle
3
Vermutlich kennt er sich im Unterricht nicht aus. Die Syntax lautet: HTML <em class="myclass">sample text</em>CSS .myclass: { background: red; etc. } Sie können den meisten Tags Klassen zuweisen, nicht nur em. Normalerweise divoder spanfür Text. Siehe auch
BlueRaja - Danny Pflughoeft
@ BlueRaja-DannyPflughoeft - Klassen, die im gesamten Code verstreut sind, sind auch der falsche Weg, damit umzugehen. Sie könnten wahrscheinlich bessere Ergebnisse erzielen, wenn Sie untergeordnete Selektoren mit einer oder zwei Klassen für Container verwenden.
Wyatt Barnett
14

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.

Mark Whitaker
quelle
Es ist nicht legal. Die Spezifikation definiert, welche Elemente erlaubt sind. Die Fähigkeit von Browsern, sich von Autorenfehlern zu erholen, macht Autorenfehler nicht richtig.
Quentin
Wo finde ich, dass es nicht legal ist? Ich habe versucht, in den HTML-Spezifikationen zu suchen, konnte jedoch keine gute Referenz finden.
Dibbeke,
2
@ DavidDorward Ja, ich verstehe deinen Standpunkt. Was ich damit meinte war, dass Browser garantieren, dass sie nicht kaputt gehen, wenn sie ein unbekanntes Tag sehen - im Gegensatz zu der fehlenden Garantie beispielsweise für ein nicht geschlossenes Tag. Vielleicht ist der richtige Begriff hier eher "toleriert" als legal. Ich habe die Antwort entsprechend aktualisiert.
Mark Whitaker
@ DavidDorward es ist absolut legal. W3C ging in der HTML5-Spezifikation sogar so weit, dass festgelegt wurde, dass die HTMLUnknownElement-Schnittstelle für HTML-Elemente verwendet werden muss, die in dieser Spezifikation nicht definiert sind. Wenn es nicht legal wäre, hätten sie dies angegeben. Ich denke, eine Entstaubung baut sich auf, ob UnknownElement oder Microformats der bessere semantische Ansatz für das Web sind. Unabhängig davon, was besser ist, sind beide legal.
Hanf
1
Aus der Spezifikation : Im Gegensatz zu früheren Versionen der HTML-Spezifikation definiert diese Spezifikation detailliert die erforderliche Verarbeitung für ungültige Dokumente sowie gültige Dokumente. Obwohl die Verarbeitung ungültiger Inhalte in den meisten Fällen genau definiert ist, sind die Konformitätsanforderungen für Dokumente immer noch wichtig
Quentin
8

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"....

FrustratedWithFormsDesigner
quelle
8

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.

Hanf
quelle
Wenn man einen Text markieren möchte (zB "Dm7"), damit ein animiertes Akkordeon einen d-Moll-Septakkord spielt, wäre der "x-Akkordeon" -Ansatz ein guter Weg? Wenn das Javascript für das Akkordeon zusätzliche Informationen benötigen würde, wie sollte das am besten notiert werden? Wie <x-accordion data-notes="D2 D3 F3 A3 C4">Dm7</x-accordion>?
Superkatze
5

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.

CaffGeek
quelle
4

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.

Jukka K. Korpela
quelle
7
-1 Das ist ein schlechter Rat. Die Tags emund strongsollten verwendet werden, wenn dies semantisch korrekt ist, und nicht, wenn fett oder kursiv gedruckt werden soll. Sie können die Darstellung mit CSS ändern.
DisgruntledGoat
2

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.

Dibbeke
quelle
2

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.

Peter C
quelle
2

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.

zhao
quelle
1
Dies ist der Beginn einer großartigen Antwort. Um jedoch großartig zu sein, wäre es hilfreich, einige der Gründe hinzuzufügen, warum der Leitfaden geschrieben wurde. Auch die Hinzufügung alternativer Strategien, die den gleichen Effekt ermöglichen, aber zur Richtlinie passen, wird häufig positiv bewertet.
JustinC
1

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.

Nicht ich
quelle
0

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.

Ryathal
quelle
0

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.

Andy Hunt
quelle