class et id

[Dinostrate]

Bonjour à Tous,

Lorsque j'ai commencé en css, il n'y a pas si longtemps, j'ai commencé par commettre des grosses boulettes, mon raisonnement était inversé par rapport à la définition des normes et j'avais tendance à utiliser id au lieu de class et vice et versa...

Avec l'aide du validateur, les conseils et les tutoriels que j'ai pu étidier de ci de là, je me suis aperçu que je faisais fausse route et j'ai corrigé le tout. Donc maintenant, j'utilise id pour les grandes subdivisions et chaque fois que je suis certain de n'avoir à utiliser la règle définie qu'une fois... par page, et le validateur est content... et moi aussi parceque c'est satisfaisant logiquement.

Mais je ne comprends pas encore tout.... Pourquoi cette règle ? Quel est l'intérêt technique (strictement technique) ?. J'étais conforté dans mon erreur de départ (confusion de class et d'id) parceque tout fonctionnait dans tous les navigateurs.... je n'ai pas été foutu de trouver un endroit ou les explications soient suffisamment claires pour moi.... mais après tout, je suis peut être dur du comprenoir....

Dino

[K-ZimiR]

A mon sens il n'y a pas d'intérêt purement technique, mais plustôt de compréhension.

La même réponse s'applique à, par exemple, pourquoi dans la norme XHTML remplace-t-on le <b> par <strong> ?

Je pense que c'est purement pour une meilleure compréhension du code.

[Monique]

Bonjour,

id est un identificateur d'élément, il permet d'assigner un nom à l'instance d'élément où il apparaît.

Il peut être utilisé pour appliquer un style CSS à un élément particulier mais aussi pour désigner une destination (ancre) à un hyperlien, pour servir de référence dans un script, pour identifier une déclaration de l'élément <OBJECT>.

[jd_]

C'est marrant comme question car, pour ma part, j'ai été tout chamboulé par ces . et # quand je m'y suis mis - j'ai trouvé ça génial.

<perso>

Une classe me permet de définir une seule fois plein de bidule récurrents, c'est très pratique et ça se comprend. Je me sers des id principalement pour créer mes blocs de mise en page, car je sais qu'ils seront uniques.

</perso>

Mais contrairement aux éléments classifiés, un élément identifié est manipulable via le DOM, par exemple. C'est là que les choses vraiment intéressantes commencent, je pense. C'est avoir une très grande souplesse que de pouvoir, aussi simplement, définir des objets manipulables au niveau de sa feuille de style, pour ensuite les récupérer dans un script JS (les récupérer étant à ce jour toute une histoire, compte tenu des méthodes proprio ).

Techniquement parlant, il n'y a pas de différences flagrantes entre un éléments rattaché à une classe ou à un id : c'est toujours un élément, quelque soit son nom ou sa famille. Mais le fait que l'élément fasse parti d'une famille (dans laquelle il est et reste anonyme) ou qu'il ai un nom (qu'il soit reconnaissable dans la page), ça c'est fondamental.

[LaurentDenis]

Les spécifications sont assez claires sur le sujet, et laisse une grande liberté d'utilisation des id et des class. Ici, en HTML4.01 :

L'attribut id assigne un identifiant unique à un élément (qui peut être vérifié par un analyseur SGML)..

L'attribut id a plusieurs rôles dans HTML :

-comme sélecteur dans une feuille de style ;

-comme ancre cible de liens hypertextes ;

-comme moyen d'appeler un élément particulier à partir d'un script ;

-comme nom d'un élément OBJECT déclaré ;

-pour un traitement universel par les agents utilisateurs (par exemple, pour identifier les champs lors de l'extraction des données des pages HTML pour peupler une base de données, pour traduire des documents HTML dans d'autres formats, etc.).

L'attribut class, au contraire, assigne un ou plusieurs noms de classe à un élément ; on peut dire de l'élément qu'il appartient à ces classes. Un nom de classe peut être partagé par plusieurs instances d'éléments.

L'attribut class a plusieurs rôles dans HTML :

- comme sélecteur dans une feuille de style (quand l'auteur souhaite assigner une information de style à un ensemble d'éléments) ;

- pour un traitement universel par les agents utilisateurs.

http://www.la-grange.net/w3c/html4.01/stru...al.html#h-7.5.2

Outre l'attribution d'un id aux section <div> principales d'une page (menus, contenu, pied, tête...), on a intérêt à prévoir un id pour toute information qui forme un tout ou une unité logique, et qui est susceptible d'être l'objet d'un traitement quelconque (CSS, XSLT, ancre, formulaire...). Par exemple, pour:

- chaque news d'une série

- chaque post dans un weblog

- chaque titre et sous-titre d'un texte long (hyperliens permettant de viser exactement la partie concernée, voir par exemple les id de titre dans la source de la spécification citée ci-dessus)

Modifié 6 Mai 2004 par LaurentDenis

[LaurentDenis]

La même réponse s'applique à, par exemple, pourquoi dans la norme XHTML remplace-t-on le <b> par <strong> ?

Je pense que c'est purement pour une meilleure compréhension du code.

Techniquement :

<b> est un élément présentatif qui ne définit que le rendu visuel (mise en gras) et n'apporte aucune information supplémentaire, aucun ajout de sens sur le contenu. De ce point de vue, un texte en rouge et un texte balisé avec <b> sont strictement équivalent.

<strong> est un élément structurel qui donne une information sémantique supplémentaire sur le contenu : l'emphase forte. Une façon de dire aux machines qui vont traiter ce contenu : "Attention, ça, ça doit être mis en valeur, il y a une accentuation..."

Par exemple :

- un lecteur d'écran devrait exploiter <strong> pour modifier le ton, le débit, le volume... de la voix. Il doit ignorer <b>.

- un outil de traduction ou de synthèse automatique devrait tenir compte de <strong> pour, si nécessaire et si possible, transcrire cette emphase au niveau grammatical. Il doit ignorer <b>.

- etc.

[edit] J'oubliais : un très bon texte de Matthew Thomas sur le bon usage de <strong> et de <b>. Il est en anglais, mais l'essentiel est présenté sous forme de bref tableaux très lisibles.

http://mpt.net.nz/archive/2004/05/02/b-and-i

Modifié 6 Mai 2004 par LaurentDenis

[Denis]

Il n'y a vraiment pas grand chose à rajouter aux excellentes et vachements complètes réponses de Laurent. Chapeau !

Peut-être seulement ceci. Dites-vous toujours que TOUS les éléments HTML ont une raison d'être. Si celle-ci est parfois obscure, elle existe quand même. Et il n'y a pas mieux que la norme HTML pour la retrouver.

Utiliser chaque élément HTML de la manière la plus précide possible, c'est travailler la sémantique du HTML, une notion pour plusieurs très abstraite, mais qui comporte un certain nombre d'avantages pour l'interprétation sous les divers agents utilisateurs (navigateurs et autres interface d'accès au Web).

Questionner la différence entre <b> et <strong> par exemple, est aussi pertinent que de questionner la différence entre <p class="titre"> et <h1>. En apparence pareils, en réalité fondamentalement différents.

L'agent Smith aurait dit : "Everything has it's purpose".

[Dinostrate]

Ce coup ci, tout devient vraiment beaucoup plus clair. J'entrevois maintenant beaucoup plus de possibilités que je ne l'imaginais au départ. et surtout, beaucoup plus de simplifications.....

J'avais bien vu les spécifications et je voyais bien qu'il y avait une incidence technique, mais à l'état brut, les dites spécifications ne me satisfaisaient pas tout à fait.... La différence entre id est class est réellement fondamentale pour une utilisation optimale. Pour une utilisation "au raz des pâquerettes", elle est moins évidente (mais notre but n'est pas de rester au raz des pâquerettes !!!. ).

En tout cas, merci pour toutes ces précisions... mais attention, je sens que je vais poser bientôt des questions beaucoup plus compliquées

Dino

[Denis]

(Se retroussant les manches) : Allez, on est prêts !

[jd_]

Denis : genre, la bucheron-attitude

LaurentDenis : merci pour le décortiquage des spécifications, j'avais jamais eu le courage d'aller aussi loin

Vous savez qu'il est chouette votre forum ?

[Denis]

Denis : genre, la bucheron-attitude

Ben, à quoi ça servirait sinon d'être élevé au fond des bois, au pied des Rocheuses par une meute de loups, de se retrouver dans un village d'amérindiens pendant une dizaine d'années à tisser des ceintures fléchées pour finir dans un camp de bûcherons à fendre d'la pitoune si s'était pas au moins pour savoir se retrousser les manches quand c'est le temps ???

[jd_]

Ca se tient. Bien joué !