5568 sujets

Sémantique web et HTML

Bonjour,

J'aurais aimé avoir votre avis sur ceci :
Je compte utiliser trois niveau d'importance pour mes articles.

1) strong
2) em
3) em 2 ?

Je me demande ce que je pourrais utiliser pour le troisieme niveau..
J'ai vu que pour le code du wiki, ils utilisaient <ins> pour les éléments soulignés...mais l'utilisation d'<ins> ici m'étonne.

Moi je serais plutot tenter de choisir quelque chose comme <em class="em2">..

Merci
Modifié par Dark elf (15 Jul 2005 - 02:04)
Je sais pas trop là Smiley ohwell

T'es sûr d'avoir besoin de 3 niveaux d'importance ? t'es sûr que c'est bien de l'importance que tu veux indiquer, c'est pas plutôt une truc autre genre explication complémentaire ou quoi ?

J'utiliserais
<strong> pour une emphase forte, c'est à dire marquer/souligner (pas de le sens graphique !) l'importance d'un terme
<em> pour l'emphase normale pour indiquer un terme à prendre en compte

Je vois mal quel autre degré de distinction tu veux imaginer Smiley ohwell

J'utiliserais un <span class="explication"> ou <span class="notabene"> etc

En tout cas, pas <em class="em2"> (ou class="bidule" d'ailleurs Smiley smile )
Modifié par Olivier (14 Jul 2005 - 14:57)
Dark elf a écrit :
Bonjour,

J'aurais aimé avoir votre avis sur ceci :
Je compte utiliser trois niveau d'importance pour mes articles.

1) strong
2) em
3) em 2 ?

Je me demande ce que je pourrais utiliser pour le troisieme niveau..


En fait... rien, car il n'existe pas d'autre niveau d'emphase en HTML Smiley cligne

Tu peux à la rigueur en simuler un (qui n'aura de sens que pour toi) avec par exemple
<strong>...
<em><em>...</em></em>
<em>...<em>

S'il s'agit d'une question de présentation, tu peux:
- en effet utiliser <em class="em2">, qui sera stylé différement d'<em>, mais qui aura le même sens en réalité.
- ou plus simplement utiliser franchement un élément de présentation tel que <i> (ou un <span class="brocolis"> pour faire plus chic que le <i>. En l'absence de vocabulaire contrôlé pour expliquer ce que signifie la classe "brocolis", il n'y a en effet pas de différence finale)

Dark elf a écrit :

J'ai vu que pour le code du wiki, ils utilisaient <ins> pour les éléments soulignés...mais l'utilisation d'<ins> ici m'étonne.


<ins> ne marque ni emphase ni soulignement (même s'il est souvent rendu avec un soulignement) : il indique que le contenu concerné a été ajouté au document (possibilité d'indiquer la date à l'aide d'un attribut datetime).
Il est donc souvent utilisé sur les wikis (contenu éditable en permanence) pour baliser les ajouts.

Enfin, au passage : le duo <em> <strong> a été mis sur la selette à propos d'XHTML2.0 : il semble qu'il ait sauvé sa peau, mais c'est assez révélateur de l'intérêt déjà discutable de 2 niveaux d'emphase Smiley cligne

<edit>
Sur le fond, j'aurais tendance à dire, très personnellement, que l'envie de barder un article de niveaux d'emphase ou de priorité... m'inviterais immédiatement à revoir la structure de mon article, en me demandant:
- si le contenu prioritaire n'est pas noyé dans la masse, et ne pourrait pas en être extrait ?
- si la structure en sections et titre n'est pas à revoir (un titre est aussi un élément indiquant ce qui est "prioritaire") ?
Modifié par Laurent Denis (14 Jul 2005 - 15:53)
A vrai dire, après reflection, il est vrai que c'est plus au niveau de la présentation.

le niveau 2 et 3 (d'après mon schéma plus haut) ne sont pas plus important l'un que l'autre.
Je vais donc surement utiliser <em class="nom">...
bien que Olivier n'apprécie pas pour une raison que j'ai du mal comprendre.

Quand à l'architecture des titres, je pense qu'elle n'est pas à revoir.
Par contre, je me pose une question sur celle ci en ce moment.

Schema de la page :

<h1>Dossier</h1>
<h2>Titre du dossier</h2>

<div id="article">

<hx>partie</hx>

<hx>sous partie</hx>
<p>bla bla bla bla</p>

<hx>sous partie</hx>
<p>bla bla bla bla</p>

</div>

L'article sera composé de diverse parties et donc de divers titres.
Mais j'hésite à commencer les titres à h1 ou à h3 (cf schéma ci dessus)
Modifié par Dark elf (14 Jul 2005 - 16:46)
Administrateur
Dark elf a écrit :

Je vais donc surement utiliser <em class="nom">...
bien que Olivier n'apprécie pas pour une raison que j'ai du mal comprendre.

Ce que Olivier voulait dire, c'est qu'il est préférable que le nom de la classe ne fasse pas référence à la mise en page et qu'il soit pertinent.
Par exemple :
- "notabene", "explication" sont des termes qui ont un sens, même si la mise en page change
- "em2", "gauche", "rouge", ne sont pas vraiment pertinents et ne sont pas obligatoirement compréhensible si une autre personne lit ton code, ou si la mise en page change (par exemple si ta class="rouge" désigne tout à coup des éléments en vert).

a écrit :
Mais j'hésite à commencer les titres à h1 ou à h3 (cf schéma ci dessus)

Si tes "titres du dossiers" sont placés hierarchiquement dans un dossier, ils ne peuvent pas commencer être un titre de niveau 1.

D'ailleurs il y'a un problème dès le départ :
<h1>Dossier</h1>
<h2>Titre du dossier</h2>

h1 doit justement désigner le titre de niveau 1, donc le titre général du dossier. Or là ce n'est pas le cas Smiley ohwell

Quelle différence fais-tu entre "dossier" et "titre du dossier" ??

Je ne comprends pas ta structure. Elle devrait logiquement être :

h1 = titre du dossier
h2 = un des sous titres
h3 = un des sous-sous titres (contenus dans les sous-titres)

Dans ton cas :


<h1>Titre du dossier</h1>

<div id="article">

<h2>partie</h2>

<h3>sous partie</h3>
<p>bla bla bla bla</p>

<h3>sous partie</h3>
<p>bla bla bla bla</p>

</div>

Modifié par Raphael (14 Jul 2005 - 17:00)
Dark elf a écrit :

Je vais donc surement utiliser <em class="nom">...
bien que Olivier n'apprécie pas pour une raison que j'ai du mal comprendre.


Moi aussi, pout tout dire Smiley cligne
C'est en fait ce qui se rapprocherait le plus d'un vocabulaire sémantique:
- si le vocabulaire des classes est partagé par d'autres applications, elle peuvent l'utiliser comme toi
- sinon, l'information "emphase" n'est pas perdue pour les autres applications, c'est à dire le Web à part toi (actuellement).

Dark elf a écrit :

Quand à l'architecture des titres, je pense qu'elle n'est pas à revoir.
Par contre, je me pose une question sur celle ci en ce moment.

Schema de la page :

<h1>Dossier</h1>
<h2>Titre du dossier</h2>

<div id="article">

<hx>partie</hx>

<hx>sous partie</hx>
<p>bla bla bla bla</p>

<hx>sous partie</hx>
<p>bla bla bla bla</p>

</div>

L'article sera composé de diverse parties et donc de divers titres.
Mais j'hésite à commencer les titres à h1 ou à h3 (cf schéma ci dessus)


hum... Il est difficile de déterminer des titres sans avoir le contenu sous les yeux, puisqu'ils en sont directement issus Smiley cligne

Pour le titrage ci-dessus:

<h1>Dossier</h1>
<h2>Titre du dossier</h2>


A quoi sert la coupure en deux niveaux de titres ?

L'idée essentielle est la suivante, AMHA : les titres <hn> n'ont actuellement en HTML de valeur qu'à l'intérieur du document, car :
- la notion de "site" n'existe pas en HTML (seul existe ce que nous appelons la page ou le document, et qui est une "ressource")
- la notion de "collection de ressources (les dossiers), qui existe en HTML, est exprimée par un autre élément (<link rel="section")
- les titres <hn> sont explicitement définis par HTML comme se rapportant au contenu d'une section de celui-ci.
- d'ailleurs, ton titrage indique explicitement que pour toi, le nom du site ou de la collection ne relève pas de ce titrage, mais plus justement de l'élément <title>

Donc, le titre <h1>dossier</h1> sert à quoi, finalement ?
- pas à dire que l'on est dans la section dossiers du site : ce n'est pas son rôle, c'est celui du <link rel>
- à dire que ce contenu est un dossier ? Oui. Mais si ce n'est que cela, pourquoi ne pas réunir ce <h1> et ce <h2> inutilement séparés, et simplifier à la fois la structure et la vie de l'utilisateur d'une table des matières :
<h1>Dossier: Titre du dossier</h1>


Là, personnellement, j'ai le sentiment de savoir d'un seul coup extactement où je suis.

Du coup, peut-être, la suite devient:

<div id="article">

<h2>partie</h2>

<hx>sous partie</hx>
<p>bla bla bla bla</p>

<h3>sous partie</h3>
<p>bla bla bla bla</p>


Imagine quelqu'un qui chemine, sans voir le contenu, de titre en titre (en comptant <title>):
- je suis sur le site <title>brocolis.org, la saga des Brocolis</title>
- plus précisément, dans <h1>Dossiers : Brocoli Junior, sa vie, son oeuvre</h1>
- et mieux, dans : <h2>L'enfance</h2>
- pour arriver à : <h3>Un gros nourisson baveux</h3>

Le respect de la succession hiérarchique des titres h1 --> h3 me donne un chemin incroyablement facile à suivre. Il peut être exploité:
- de ton côté, pour extraire une table des matières de tes articles, d'où tu peux générer un résumé de la totalité de la collection de ressource, ou un plan de celle-ci (plan de site ?) complet
- de mon côté, en tant qu'utilisateur d'un lecteur d'écran, pour naviguer dans un contenu dont la structure est devenue tout à coup très accessible (sous réserve du reste des problème d'accessibilité)
Pour le <em class="em2">, mwé disons que ça ne me semblait pas évident du fait que la différence entre les 2 <em> aurait été purement visuelle mais que le sens aurait été le même (emphase) alors que tu semblais vouloir indiquer une différence d'importance du terme entre les 2 niveaux. Mais après ton autre post, il semble que la différence était purement visuelle auquel cas un <em> avec une autre class convient oui Smiley smile

Ca ne me semblait pas bon d'utiliser le même balisage pour baliser un contenu différent en sens Smiley smile > je sais pas si c'est très clair cette phrase Smiley lol
Modifié par Olivier (14 Jul 2005 - 17:35)
En fait j'ai ceci :


<!-- Là c'est un peu la présentation de ce dont on va parler -->
<h1>Dossier</h1> <!-- Titre correspondant à la catégorie choisie..en gros, ça aurait pu être contacts si on était sur la page contacts.php -->
<h2>Titre du dossier</h2> <!-- titre du dossier -->

<!-- a partir de là, on a le dossier à proprement parler avec ces titres & co, c'est un article quoi -->
<div id="article"> 

<hx>partie</hx>

<hx>sous partie</hx>
<p>bla bla bla bla</p>

<hx>sous partie</hx>
<p>bla bla bla bla</p>

</div>


Finalement, je ne sais pas si c'est plus clair Smiley biggrin

(olivier, ta phrase était très claire Smiley cligne )

Je pense que je vais quand même commencer mes titres à h3...
Après vous avoir lu, c'est ce qui semble le plus logique Smiley smile

Quand au nom de la classe (je reviens à l'histoire des em & co), en effet, j'aimerais que cela n'ai pas de rapport direct avec la presentation mais c'est difficile car on peut dire que ça en a un Smiley ohwell ..
J'aimerais faire en sorte que le nom se rapporte à ce qui sera dans ces balises mais étant donné que ce ne sera pas moi qui écrirait les articles, ça dépendra..
Modifié par Dark elf (14 Jul 2005 - 17:44)
Lol, tu m'as l'air mal embarqué avec ton histoire d'admin pour néophyte Smiley lol

Au pire class="em2" bof mais à la limite, on s'en fout Smiley cligne
Tu peux mettre class="type2" par exemple qui souligne le fait que ce sont 2 <em> différents, mais bon ! rien n'est parfait, sauf moi peut être, mais là c'est une autre histoire Smiley biggol

(pour les éternels abrutis qui ne comprennent jamais rien à rien, avant que vous n'alliez dire "roohh l'autre, comment il se la pète alors qu'en fait..." et bien oui, ça s'appelle l'ironie, le second degré, l'auto dérision (ou auto flagélation ironique si vous voulez les termes technico latin Smiley biggol )
Modifié par Olivier (14 Jul 2005 - 18:41)
Hehe Smiley langue

Mais c'est pas la peine de le dire. On le sait tous que tu es un dieu vivant, ainsi que raphael le prophete, et laurent denis, l'abbe pierre Smiley smile

Bon, je vois, je vais pas non plus chercher midi à 14h Smiley langue , si j'en ai vraiment besoin, pas grave ^^ si j'arrive à trouver quelque chose de mieux (comme un nom de classe qui correspond plus à ce que contient la balise) alors je le mettrais, sinon tant pis.

Merci à tous de participer à mes questions qui sont souvent des débats illusoires qui reposent pas mal sur des détails Smiley cligne