Dois-je utiliser des balises non standard dans une page HTML pour mettre des mots en surbrillance?

Je voudrais savoir s'il est judicieux ou légal d'utiliser des balises non standard dans une page HTML à certaines fins personnalisées.

Par exemple:

Lorem ipsum dolor sit amet, elect adipiscing consectetur. Nullam conséquat, felis sit amet suscipit laoreet, nisi arcu accumsan arcu, vel pulvinar odio magna suscipit mi.

Je veux souligner "consectetur adipiscing elit" comme important et "nisi arcu accumsan arcu" comme souligné.

Donc dans le HTML je mettrais:

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

et dans le CSS:

important {
 background: red
 color: white;
}

highlighted {
 background: yellow;
 color: black;
}

Cependant, comme ce ne sont pas des balises HTML valides, est-ce correct?

Non, ce n'est pas une bonne pratique. Vous devez utiliser des balises déjà sémantiques et significatives - peut-être <em>dans ce cas - et appliquer des styles CSS pour répondre à vos exigences de conception.

Votre question demandait s'il s'agissait d'une " bonne pratique ou légale ".

Premièrement: c'est en quelque sorte légal - au moins, c'est toléré. Les navigateurs ont toujours été programmés pour faire face aux balises 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 suit pour chaque navigateur:

Certains gras et certains italiques.

De plus , la plupart des navigateurs vous permettront de styliser cet élément en CSS. Donc, si vous ajoutez la définition CSS suivante:

slanted { font-style: italic; }

la plupart des navigateurs s'affichent désormais comme suit:

Certains gras et certains italiques .

Vraiment: essayez par vous-même . Soit dit en passant, c'est une astuce que les développeurs Web utilisent pour essayer de s'assurer que les nouvelles balises HTML5 s'affichent correctement dans les anciens navigateurs.

Cependant, ce n'est pas tout à fait l'image complète. La réponse complète est non, ce n'est pas une bonne pratique . Vous avez peut-être remarqué mon utilisation de l'expression "la plupart des navigateurs". Malheureusement, toutes les versions d'Internet Explorer antérieures à IE9 ne parviennent pas à implémenter ce comportement. Dans IE8 et versions antérieures, le code ci-dessus ressemblera toujours à ceci:

Certains gras et certains italiques.

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

Donc, réponse courte: respectez uniquement les éléments HTML standard et stylisez-les comme vous le souhaitez dans votre CSS.

Si vous devez conserver 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 en savoir plus sur ce sujet ici:

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

Vous ne pouvez toujours pas avoir <important/>dans la sortie HTML finale, mais vous pouvez la transformer automatiquement en quelque chose comme <span class="important"....

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

L'analyse des balises personnalisées par WHATWG conclut qu'elles sont acceptables, conformes aux normes (car la gestion des balises non reconnues est bien définie) et plus accessibles que, par exemple, le style d'un div générique.

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

Ce que vous devez faire, ce que l'OP n'a pas fait, c'est préfixer 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 les futurs éléments de spécification.

Certains soutiennent que, puisque certains navigateurs populaires ne gèrent pas les balises personnalisées conformément aux normes, vous ne devez pas les utiliser. Cependant, le comportement des navigateurs non conformes est son propre problème et ne vous forcera de préférence pas à écrire un balisage non sémantique. Il existe à la fois des solutions Javascript et non Javascript à ce problème, qui ne devraient être appliquées qu'aux navigateurs non conformes que vous souhaitez spécifiquement prendre en charge.

Cela 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 (<highlight>), il est certainement préférable d'utiliser la balise existante.

Vous pouvez utiliser <em />et <strong />avec CSS personnalisé pour modifier la façon dont il est affiché.

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

L'accent est mis sur l'accent accru.

Sur le plan pratique, il n'est pas nécessaire d'utiliser de nouvelles balises pour la mise en évidence. Vous pouvez utiliser emou des ibalises si vous préférez l' italique comme rendu par défaut (non CSS) et strongou bsi vous préférez le gras comme défaut. Si, pour une raison quelconque, vous préférez le rendu par défaut en tant que texte normal, c'est-à-dire sans surbrillance, utilisez span. Dans chaque cas, vous pouvez utiliser un classattribut pour distinguer cette utilisation des autres utilisations 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 ne doit pas causer de casse-tête majeur.

Non, bien qu'il soit autorisé d'ajouter de nouvelles balises à partir d'un autre espace de noms en XHTML, le traitement des balises HTML non spécifiées est fortement déconseillé.

Eh bien, c'est légal dans la mesure où vous n'allez pas vous faire arrêter pour cela. Mais si des assassins du W3C se présentent à votre porte, ne soyez pas surpris.

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

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

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

Alors tu es foutu. Les navigateurs et vos collègues développeurs seront plutôt confus. Ils vous forceront probablement à analyser votre code avec des expressions rationnelles jusqu'à ce que vous deveniez fou. Et nous savons tous comment cela se passe.

Troisièmement, IE <9 ne vous permet pas de créer des éléments inconnus sans un petit hack. Pas grand chose, mais ennuyeux.

Enfin, dans ce cas, <important>et <highlight>existent déjà! <strong>et <mark>êtes ce que vous recherchez. Selon la spécification HTML5

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

et

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

Si vous ne l'utilisez pas à des "fins de référence", un <span>avec une classe conviendrait.

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

Il s'agit de la révision 1.5612.

Les auteurs ne doivent pas utiliser d'éléments, d'attributs ou de valeurs d'attribut qui ne sont pas autorisés par cette spécification ou d'autres spécifications applicables, car cela rendrait considérablement plus difficile l'extension du langage à l'avenir.

Ignorer l'opinion de tout le monde ici.

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

Tout d'abord, il est tout à fait possible qu'à un moment donné, le comité des normes décide d'inclure une balise nommée <important>qui finit par détourner votre utilisation. Bien sûr, cela peut prendre un certain temps .. Mais il est possible que vous perdiez du temps à l'arracher par la suite.

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

Alors, sois gentil. On ne sait jamais, vous pourriez finir par demander à l'un d'eux un emploi un jour.

Non, vous ne pouvez pas créer vos propres balises HTML, car vous devrez alors obtenir tous les principaux navigateurs pour les implémenter, actuellement lorsque les navigateurs trouvent une balise non reconnue, ils ignorent tout ce qu'il contient, donc à moins que vous ne vouliez que votre propre navigateur crée une nouvelle tag est inutile, et même alors, ils ne fonctionneraient que dans votre navigateur.

Vous pouvez essayer de soumettre un cas d'utilisation pour eux au w3c, mais je doute que cela aboutisse.

Non, ce n'est pas une bonne pratique pour toutes les raisons fournies par toutes les autres réponses. Au lieu de réitérer ces points, je voudrais présenter une option que je n'ai pas vue dans ces réponses!

Dans le cas où il n'y a pas de balises existantes dont la signification sémantique correspond à vos objectifs, vous pouvez utiliser une combinaison de CSS et du nouvel data-*attribut dans la spécification HTML 5. Bien sûr, cela fonctionnera avec la plupart des balises que vous choisissez.

Exemple:

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.

Bien que ce ne soit pas une solution parfaite, car il n'y a pas de signification sémantique bien définie pour les data-*attributs, cela vous permettrait au moins de fournir des informations supplémentaires à ceux qui connaissaient la signification de votre data-typeattribut.