web-dev-qa-db-fra.com

Devrais-je utiliser des balises non standard dans une page HTML pour mettre en évidence les mots?

J'aimerais savoir si c'est une bonne pratique ou légale d'utiliser des balises non standard dans une page HTML à certaines fins personnalisées.

Par exemple:

Lorem Ipsum Dolor Sit Amet Amet, Consectetur Adipiscing Elit. Nullam Cays, Felis Sit Amet Suscipit Laoreet, Nisi Arcu Accumsan Arcu, Vel Pulvinar Odio Magna Suscicipit MI.

Je tiens à mettre en évidence "Consectetur Adipiscing Elit" comme important et "Nisi Arcu Accumsan Arcu" comme en surbrillance.

Donc, dans le HTML, je voudrais mettre:

Lorem Ipsum Dolor Sit Amet Amet, <IMPORTANT> CONSELETUR ADIPISCING ELIT </ IMPORTANT>. Nullam Cays, Felis Sit Amet-Suscipit Laoreet, <en surbrillance> Nisi Arcu Accumsan Arcu </ En surbrillance>, Vel Pulvinar ODIO MAGNA SUSCIPIT MI.

et dans le CSS:

important {
 background: red
 color: white;
}

highlighted {
 background: yellow;
 color: black;
}

Cependant, étant donné que ce ne sont pas des balises HTML valides, est-ce correct?

20
rcs20

Non, ce n'est pas une bonne pratique. Vous devriez utiliser des étiquettes déjà sémantiques et significatives - peut-être <em> Dans ce cas - et appliquez des styles CSS pour atteindre vos besoins de conception.

50
Wyatt Barnett

Votre question posée si c'est " bonne pratique ou légale ".

Premièrement: C'est une sorte de légalité - au moins, il est toléré. Les navigateurs ont toujours été programmés pour faire face aux tags qu'ils ne comprennent pas, même si cela signifie qu'ils les ignorent. Ce code HTML:

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

Apparaîtra comme si ceci est chaque navigateur:

Certains audacieux et certains italiques.

En outre, la plupart ​​navigateurs vous permettra de styler cet élément dans CSS. Donc, si vous ajoutez la définition CSS suivante:

slanted { font-style: italic; }

la plupart ​​navigateurs rendront maintenant comme suit:

Certains audacieux et certains italique.

Vraiment: Essayez-le pour vous-même . Incidemment, il s'agit d'un astuce que les développeurs Web utilisent pour essayer de vous assurer que les nouvelles balises HTML5 s'affichent correctement dans les navigateurs plus anciens.

Cependant, ce n'est pas tout à fait la photo complète. La réponse complète est non, ce n'est pas une bonne pratique . Vous avez peut-être remarqué mon utilisation de la phrase "la plupart ​​navigateurs". Malheureusement, toutes les versions d'Internet Explorer avant IE9 ne parviennent pas à mettre en œuvre ce comportement. Dans IE8 et plus tôt, le code ci-dessus ressemblera toujours à ceci:

Certains audacieux et certains italiques.

Il y a une description excellemment détaillée du problème sur plongée dans HTML5 , où vous trouverez également des détails sur une solution de contournement. Cependant, la solution de contournement nécessite JavaScript, ce n'est pas une solution HTML pure et ne fonctionnera pas dans tous les scénarios.

SO, Réponse courte: Stick to éléments HTML standard seulement et les styez-les, mais vous aimez dans votre CSS.

14
Mark Whitaker

Si vous avez besoin de garder la sémantique de <important/> Pour des raisons spécifiques, vous pouvez utiliser XSL pour transformer vos balises personnalisées en HTML valide. Vous pouvez lire plus sur ce sujet ici:

http://www.w3.org/style/xsl/whattisxsl.html

http://www.4guysfromrolla.com/wtbtech/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-utilisant-xsl.html

Vous ne pouvez toujours pas avoir <important/> Dans la sortie HTML finale, mais vous pouvez l'avoir automatiquement transformé en quelque chose comme <span class="important"....

Il y a plusieurs réponses ici expliquant pourquoi vous ne devez jamais créer vos propres étiquettes personnalisées. Sans doute, ils sont tous incorrects.

Analyse de WhaTWG des balises personnalisées conclut qu'elles sont acceptables, conformes aux normes (car le traitement des balises non reconnues est bien définie) et plus accessible que, par exemple, coiffant une DIV générique.

<x-accordéon> </ x-accordéon> n'est pas pire que <div la classe = "accordéon"> </ div> dans chaque sens mécanique. En l'absence de définition de "x-accordéon" (ou de support de modèle de composant), les deux signifient la même chose, les deux peuvent être stylés de la même manière. L'un est HTMLunknownElement, l'autre est HTMLDivelement et leur surface de l'API est identique.

Ce que vous devriez faire, que l'OP n'a pas fait, préfixe toutes les balises personnalisées avec 'x-' par convention. Cela indique clairement que vous souhaitez que cette balise soit locale à votre document et évite les conflits avec des éléments de spécification futurs.

Certains soutiennent que puisque certains navigateurs populaires ne gèrent pas les étiquettes personnalisées de manière complitive de normes, vous ne devriez pas les utiliser. Cependant, le comportement des navigateurs non conformes est son propre problème et de préférence ne vous guérira pas en écrivant une balise non sémantique. Il existe à la fois des solutions JavaScript et non JavaScript à ce problème, qui ne doit être appliquée que pour les navigateurs non conformes que vous souhaitez spécifiquement à prendre en charge.

Tout ce qui a dit, si une balise existe dans la spécification (<Mark>) qui couvre clairement la signification sémantique de la balise que vous avez créée (<Hight>), il est certainement préférable d'utiliser la balise existante.

8
hemp

Vous pouvez utiliser <em /> et <strong /> avec CSS personnalisé pour modifier comment il est affiché.

Fort, fait référence à une plus grande importance.

L'accent est mis sur l'accent mis.

5
CaffGeek

Sur le côté pratique, c'est inutile d'utiliser de nouvelles balises pour la surbrillance. Vous pouvez utiliser em ou i tags si vous préférez italiques comme défaut (non-CSS) Rendu et strong ou b si vous préférez en gras par défaut. Si, pour une raison quelconque, vous préférez le rendu par défaut en tant que texte normal, c'est-à-dire aucune surbrillance, utilisez span. Dans chaque cas, vous pouvez utiliser un attribut class pour distinguer cette utilisation de l'autre utilisation que vous pourriez avoir pour le balisage.

Les spécifications HTML et les brouillons (HTML5) sont obscurs en ce qui concerne la sémantique de ces éléments, mais cela n'a pas besoin de causer des maux de tête majeurs.

4
Jukka K. Korpela

Eh bien, c'est légal que vous n'allez pas être arrêté pour le faire. Mais si les assassins du W3C apparaissent à votre porte, ne soyez pas surpris.

Tout d'abord, d'autres devs ne vont pas savoir ce qu'ils veulent dire. Dans le cas d <important> et <highlight> ils sont, mais si vous utilisez quelque chose comme, dites, <set>, vous savez peut-être que vous faites référence à un ensemble mathématique, mais que quelqu'un d'autre lisant votre code pourrait la confondre pour autre chose. Sans la spécification pour donner une réponse, il pourrait y avoir beaucoup de confusion.

Deuxièmement, que si le W3C décide qu'un <important> élément est une bonne idée, mais pense que cela devrait signifier un préavis urgent, comme

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

Ensuite, vous êtes foutu. Les navigateurs et vos collègues développeurs seront plutôt confus. Ils vous obligent probablement à analyser votre code avec des regexnes jusqu'à ce que vous soyez fou. et nous savons tous comment cela s'avère.

Troisièmement, IE <9 ne vous permet pas de styler des éléments inconnus sans petit hack. Pas une grande chose, mais ennuyeux.

Enfin, dans ce cas, <important> et <highlight> existe déjà! <strong> et <mark> sont ce que vous cherchez. Selon la SPECT HTML5

L'élément fort représente une forte importance pour son contenu.

et

L'élément Mark représente une série de texte dans un document marqué ou mis en surbrillance à des fins de référence ...

Si vous n'utilisez-vous pas de "fins de référence", un <span> avec une classe irait bien.

2
Peter C

Ignorer l'opinion de tout le monde Elles ici.

Ce n'est pas une bonne pratique pour deux raisons très importantes:

Premièrement, il est tout à fait possible qu'à un moment donné, le Comité des normes décide d'inclure une balise nommée <important> Cela finit par lever votre usage pour cela. Bien sûr, cela pourrait prendre un certain temps .. Mais sa possible, vous allez perdre du temps à la déchirer après.

Deuxièmement, (c'est la raison réelle) Le programmeur qui hérite de votre code est de dire constamment "WTF" à votre approche non standard tout en tirant tout cela, ou, tout aussi possible, être complètement confondu par ce que c'est vous J'ai fait et simplement quitter la frustration.

Alors, sois gentil. Vous ne savez jamais, vous pourriez vous demander d'en demander un emploi un jour.

1
NotMe

Non, vous ne pouvez pas créer vos propres tags HTML, car vous devrez ensuite obtenir tous les navigateurs majeurs pour les implémenter, actuellement lorsque les navigateurs trouvent une balise non reconnue, elles ignorent tout ce qu'elle y ignore, à moins que vous ne souhaitiez créer votre propre navigateur créant un nouveau navigateur. La balise est inutile, et même alors, ils ne travailleraient que dans votre navigateur.

Vous pourriez essayer de soumettre une affaire d'utilisation pour les W3C, mais je doute que cela devienne n'importe où.

0
Ryathal