Utilisation de balises HTML personnalisées
Dans mon html, j'étais curieux de savoir s'il était sémantiquement correct d'utiliser des identificateurs uniques tels que <toys></toys> pour contenir une image plutôt qu'un <h2>. Par exemple:
Est-il préférable d’avoir: <toys class="grid_4 Push_2"> </toys>
avec le css:
toys {
background: url("toys.png") no-repeat scroll 0 0 transparent;
width: 181px;
height: 93px;
margin-top: -8px;
}
au lieu de: j'ai actuellement: <h1 class="grid_4 Push_2"> </h1>
avec le css:
h1 {
background: url("toys.png") no-repeat scroll 0 0 transparent;
width: 181px;
height: 93px;
margin-top: -8px;
}
L'utilisation d'identificateurs uniques tels que <toys> est-elle sémantiquement correcte?
Il est préférable d'éviter d'utiliser des balises personnalisées, car vous ne savez jamais quand ces balises peuvent être normalisées et avoir un usage spécial dans le futur.
La meilleure chose à faire pour votre exemple, si vous souhaitez éviter d'utiliser les balises d'en-tête, est la suivante:
<div class="toys grid_4 Push_2"> </div>
.toys {
background: url("toys.png") no-repeat scroll 0 0 transparent;
width: 181px;
height: 93px;
margin-top: -8px;
}
En outre:
Si vous n'utilisez pas de balises HTML standard lors de la conception de pages, elles n'apparaîtront pas de manière organisée lorsque les styles sont désactivés. Ce n'est pas un problème pour les années à venir, mais si pour une raison quelconque vous deviez afficher une liste de "jouets" sans styles, vous n'auriez aucune chance à moins d'utiliser <ul> ou <ol> avec des balises <li>.
METTRE À JOUR:
Comme Flimzy l'a souligné dans les commentaires, les éléments HTML personnalisés ont maintenant leur propre spécification W3C. Cependant, ils ne sont pas encore totalement pris en charge.
- Spécification: https://www.w3.org/TR/custom-elements/
- Support: http://caniuse.com/#feat=custom-elements
La plupart de ces réponses sont de bons conseils généraux, mais pas des réponses appropriées à la question, ce qui me semble parfaitement légitime.
HTML5 est déjà une cible mobile. les navigateurs implémentent les spécifications et innovent à des rythmes différents. Il n'y a pas une seule chose appelée "HTML valide", du moins pas intéressante à utiliser. Si vous construisez une page publique pour chaque personne et chaque robot/robot de la planète, vous devez déjà soit A) détecter le client et le personnaliser en conséquence, pour les pages complexes/avancées ou B) le rendre vraiment simple et clair. Si, par contre, vous le mettez sur un réseau local ou le cachez derrière un mur de connexion ou développez sur le tranchant et planifiez quand même des mises à jour fréquentes, vous devriez alors pouvoir innover un peu, en toute discrétion. Les développeurs de navigateur et les rédacteurs de spécifications répondent à leurs besoins, vous pouvez faire de même.
Donc, si vous voulez une balise personnalisée, choisissez avec soin (dans ce cas, je ferai remarquer que les chances de devenir une partie d'une spécification formelle d'implémentation de navigateur sont totalement négligeables), alors foncez. Pour que votre CSS fonctionne dans IE, vous devrez faire comme html5shim et appeler document.createElement ("jouets") dans votre javascript.
Je devrais également ajouter que les éléments personnalisés obtiennent leurs propres normes et leur propre soutien, mais le consensus actuel est qu’ils devraient tous avoir un '-' dans le nom. Je recommanderais donc quelque chose comme "x-toys" ou "my-toys" au lieu de "jouets". Personnellement, je ne suis pas ravi de la convention, mais je comprends les raisons.
Vous avez certainement can; Cependant, il est généralement pas une bonne idée de le faire. À bien des égards, HTML5 est en train de passer à quelque chose comme ça mais générique; avoir des balises spécifiques, bien que supporté, peut avoir des résultats très différents selon les navigateurs.
UPDATE (parce que toutes les réponses sont anciennes):
En ce qui concerne les composants Web, l'API est implémentée dans tous les principaux navigateurs. À mon avis, vous ne pourrez plus éviter d'utiliser des balises personnalisées. Je pense que les composants Web deviendront facilement grand public. Toute la théorie repose sur elle: balises personnalisées, attributs personnalisés JS personnalisés attachés à ces éléments.
Donc, ce que je dis: ce n’est pas une mauvaise chose d’utiliser vos propres balises de nos jours, mais vous devez toujours tenir compte du bâtiment lié au référencement.
Je suis d'accord avec @superUntiled, vous devriez faire bon usage des sélecteurs CSS (classes et ID). Donc, si vous avez un objet de type "jouet", vous devez créer une classe pour cet objet. Ensuite, vous pouvez sélectionner tous vos cars en utilisant CSS en utilisant simplement le sélecteur .toy.
Quelque chose comme ça:
<style>
.toy {
color: red;
}
</style>
<p class="toy">My little car</p>
Si vous définissez un tag et définissez également dans votre feuille de style ce qu'il doit faire, cela devrait le lier? Même si votre nouvelle balise devient normalisée par la suite, votre feuille de style remplacera la norme. Après tout, c'est à quoi servent les feuilles de style.
Par exemple, j'ai souvent besoin de contrôler les sauts de ligne sur mes pages. Plutôt que d'utiliser un maladroit
<span style="white-space:nowrap">bla bla bla</span>
à chaque fois, j'insère mon texte non brisé dans mes propres balises et définit dans ma feuille de style:
nbr {
white-space:nowrap;
}
alors
<p> This is some text. <nbr>This is some more text.</nbr></p>
apparaîtra sur une ligne s'il y a de la place, sinon la deuxième phrase apparaîtra sur la ligne suivante. Ou, pour être précis, dans tous les navigateurs, à l'exception des anciennes versions d'IE. Pour être fondu, j'ai ajouté ce qui suit à chaque section de page [head] (dans Wordpress, il suffit d'ajouter à l'en-tête du thème:)
<!--[if lt IE 9]>
<script> document.createElement('nbr'); </script>
<![endif]-->
Ou est-ce que je manque quelque chose?
Oui, ce serait sémantiquement correct.
Cependant, sa syntaxe n'est pas valide car HTML a un ensemble défini de balises.
Vous pouvez contourner cela dans certains navigateurs.
Cela dit, quel est l'avantage de le faire? Cela ne profiterait vraiment qu'à la personne qui doit gérer le code source.
Pour votre information, ce que vous proposez est à peu près ce que XML est.
Je suis également d'accord avec l'affiche originale pour dire que les éléments personnalisés pourraient être un meilleur moyen que les classes et les identifiants CSS. Par exemple, j'ai un ami qui gère son inventaire et le contenu de son site Web dans Google Sheets. La sortie du tableau google sheets est juste du texte brut. (Le HTML frontend utilise JS pour récupérer le contenu de GSheets). Par conséquent, j'ai défini des balises personnalisées, telles que <sale>, pour changer la couleur et le style de la police. Mon ami, qui ne connaît pas le codage, peut simplement insérer ces balises dans la feuille Google pour personnaliser la police. C'est génial.
Si votre doctype est défini sur XHTML, tout devrait bien se passer. Mais ce n'est généralement pas valable pour les doctypes HTML.
Vous ne voulez pas créer vos propres balises.
Les balises HTML sont définies dans la spécification HTML.
Au lieu de:
<h1 class="grid_4 Push_2"> </h1>
Vous devriez faire quelque chose comme:
<h1 class="toys"> </h1>
Cependant, vous pouvez créer vos propres balises si XML.
Toutefois, veuillez noter que tous les navigateurs ne prennent pas en charge votre tag et que vous ne pourrez pas les styler à l'aide de CSS.
La même chose se passe avec les nouveaux balises HTML5