Question de sémantique

Le
romer
Bonjour,

Un peu à cheval sur ces questions de sémantique ainsi que sur la
typographie, je me demande s'il est préférable d'employer dans une page
xhtml 1.0 (sricte) la balise suivante pour mettre des éléments en
italique :

<p> Jacques <span class="pcap">Hébert</span><br />
<em>directeur de la publication</em></p>

où cette forme :

<p> Jacques <span class="pcap">Hébert</span><br />
<span class="italique">directeur de la publication</span></p>

* "italique" est bien sûr dûment documenté dans le CSS.

Considérant évidemment que le rendu dans les navigateurs est le même
pour "em" comme pour "italic".

Si vous considérez que cela n'est que vaine argutie, ne vous déchainez
pas sur un pauvre mortel

Merci.
--
A+

Romer
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses Page 1 / 3
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
docanski
Le #22050461
Alors que les eleveurs et agriculteurs polluent toujours la Bretagne,
Bernd ecrit ce qui suit en ce 12/07/2009 14:00 :
Bonjour,



Bonjour,

Si vous considérez que cela n'est que vaine argutie, ne vous déchainez
pas sur un pauvre mortel...



(X)HTML n'est pas mort et il n'y a donc aucune raison de styler les
italiques dans une classe particulière, sauf à en modifier les couleurs,
tailles et autres réglages particuliers si on doit créer 2 modèles
différents. Le bon usage voudrait , AMHA, l'économie des moyens et donc
l'utilisation d' <em>, quitte à le styler si besoin.
Il n'y a aucune raison de vouloir compliquer les choses ...

Cordialement,
--
docanski

Portail et annuaire du nord-Bretagne : http://armorance.free.fr/
Guide des champignons d'Europe : http://mycorance.free.fr/
La vallée de la Rance maritime : http://valderance.free.fr/
Les côtes du nord de la Bretagne : http://docarmor.free.fr/
Olivier
Le #22050451
Le 12/07/2009 14:00, Bernd a écrit :
Bonjour,

Un peu à cheval sur ces questions de sémantique ainsi que sur la
typographie, je me demande s'il est préférable d'employer dans une page
xhtml 1.0 (sricte) la balise suivante pour mettre des éléments en
italique :



Si tu es /vraiment/ à cheval sur la sémantique, tu gagnes un aller
simple vers les microformats :
http://fr.wikipedia.org/wiki/Microformat
http://microformats.org/wiki/Main_Page-fr

Et dernièrement un article de openweb :
http://openweb.eu.org/articles/fructifions_donnees

Doit y avoir d'autres choses, mais c'est ce système que je connais.
C'est très très verbeux.

--
Olivier

romer
Le #22050441
docanski
> Si vous considérez que cela n'est que vaine argutie, ne vous déchainez
> pas sur un pauvre mortel...

(X)HTML n'est pas mort et il n'y a donc aucune raison de styler les
italiques dans une classe particulière...



Tanx - de fait "le simple mortel" c'était moi et non le (x)html que
j'utilise encore couramment et qui est bien vivant !
--
A+

Romer
romer
Le #22050431
Olivier
Si tu es /vraiment/ à cheval sur la sémantique, tu gagnes un aller
simple vers les microformats :
http://fr.wikipedia.org/wiki/Microformat
http://microformats.org/wiki/Main_Page-fr

Et dernièrement un article de openweb :
http://openweb.eu.org/articles/fructifions_donnees

Doit y avoir d'autres choses, mais c'est ce système que je connais.
C'est très très verbeux.



Cela ressemblerait à du xml avec des trucs en plus que je ne dicerne pas
bien et ça n'a pas l'air, il est vrai, de simplifier les choses.
--
A+

Romer
Patrick 'Zener' Brunet
Le #22050421
Bonjour.

"Bernd" de news 1j2qub4.hyrmni1pxm8rcN%

Un peu à cheval sur ces questions de sémantique ainsi que sur la
typographie, je me demande s'il est préférable d'employer dans une
page xhtml 1.0 (sricte) la balise suivante pour mettre des éléments
en italique :

<p> Jacques <span class="pcap">Hébert</span><br />
<em>directeur de la publication</em></p>

où cette forme :

<p> Jacques <span class="pcap">Hébert</span><br />
<span class="italique">directeur de la publication</span></p>

* "italique" est bien sûr dûment documenté dans le CSS.

Considérant évidemment que le rendu dans les navigateurs est le même
pour "em" comme pour "italic".




Ca, ça dépend de tout et son contraire...

Ce qui m'ennuie avec la première forme, c'est la dissymétrie: si la CSS
fournie est désactivée (choix du visiteur), le nom ne sera pas stylé dans le
texte, alors que le titre le sera (par le style par défaut pour em).
Au fait, pourquoi le prénom est-il exclu ? C'est un projet pour une
administration ?

Ce qui m'ennuie avec la seconde, c'est qu'elle fige définitivement le choix
des italiques pour le titre, ou alors dans une autre CSS, la class .italic
sera en couleur rouge etc. mais ne sera plus en italiques...

Donc, pour la cohérence, je préconise:

- soit d'utiliser pour les deux éléments des balises normalisées et
hiérarchisées (strong et em par exemple),
- soit d'utiliser deux classes aux noms sémantiques plutôt que décidant de
la représentation (nom et titre par exemple),
- soit de combiner les deux si le contexte ne permet pas de garantir des
sélecteurs CSS ciblés.

J'aurais bien prévu aussi la garantie de pouvoir faire un display:none sur
le br, selon la CSS choisie par la suite.
Je me demande aussi si le P est justifié... C'est une signature et il n'y a
qu'un nom, ou c'est une liste ?

--
Cordialement.

* Patrick BRUNET www.ipzb.fr www.ipzb-pro.com
* E-mail: lien sur http://zener131.eu/ContactMe
romer
Le #22050401
Patrick 'Zener' Brunet
Ce qui m'ennuie avec la première forme, c'est la dissymétrie: si la CSS
fournie est désactivée (choix du visiteur), le nom ne sera pas stylé dans le
texte, alors que le titre le sera (par le style par défaut pour em).
Au fait, pourquoi le prénom est-il exclu ? C'est un projet pour une
administration ?



En effet quoique une désactivation des CSS est plutôt rare même si les
anciens navigateurs et les navigateurs texte existent encore.
Le nom est en petite capitale (class pcap) comme il se doit en principe
et le prénom dans la police courante. C'est pour une administration ou
son équivalent.

Je me demande aussi si le P est justifié... C'est une signature et il n'y a
qu'un nom, ou c'est une liste ?



Il ne l'est pas en effet mais je le mets en prévision de pouvoir ensuite
le styler lui aussi. Ce n'est pas une liste.
--
A+

Romer
Olivier Miakinen
Le #22050371
Bonjour,

Le 12/07/2009 14:00, Bernd a écrit :

Un peu à cheval sur ces questions de sémantique ainsi que sur la
typographie, je me demande s'il est préférable d'employer dans une page
xhtml 1.0 (sricte) la balise suivante pour mettre des éléments en
italique :

<p> Jacques <span class="pcap">Hébert</span><br />
<em>directeur de la publication</em></p>

où cette forme :

<p> Jacques <span class="pcap">Hébert</span><br />
<span class="italique">directeur de la publication</span></p>



Si « pcap » signifie « à mettre en petites capitales » et « italique »
signifie « à mettre en italique », ni l'un ni l'autre ne sont de la
sémantique. La sémantique, c'est que « Hébert » est le nom de famille
de Jacques Hébert et que « directeur de la publication » est sa fonction
ou sa profession, non ?

Dans ce cas, j'écrirais plutôt :
<p>Jacques <span class="nom-famille">Hébert</span><br />
<span class="profession">directeur de la publication</span></p>

Après, si tu veux mettre les noms de famille en petites capitales et les
professions en italique, c'est un choix sur lequel tu pourras très bien
revenir plus tard, sans état d'âme à propos de (par exemple) :
.pcap { font-style: italic; }
.italique { font-style: normal; }

--
Olivier Miakinen
Patrick 'Zener' Brunet
Le #22050361
Bonsoir.

"Bernd" de news 1j2rapi.1wuip5tw2vnw3N%
Patrick 'Zener' Brunet
Ce qui m'ennuie avec la première forme, c'est la dissymétrie: si
la CSS fournie est désactivée (choix du visiteur), le nom ne sera
pas stylé dans le texte, alors que le titre le sera (par le style
par défaut pour em).



En effet quoique une désactivation des CSS est plutôt rare même si
les anciens navigateurs et les navigateurs texte existent encore.



Il y a l'accessibilité bien sûr (lecture braille ou vocale que l'on espère
bien voir un jour exploiter le balisage standard pour gérer la prosodie).

Sinon, quand je fais de la recherche intensive pour résoudre un bug système
(à transposer pour un autre visiteur), bref la chasse à l'info introuvable,
je me tape des centaines de pages, la plupart hors-sujet mais on ne le sait
qu'après, dont beaucoup sont truffées d'animations, infobulles,
adservers-alakon et autres popups/layers...
Sans parler des CSS géniales genre blanc sur fond jaune avec police de 5px,
ou reformatage dynamique 2 fois au cours du chargement à cause des
positionnements, etc.

Donc dans un but de pure survie, le réflexe est de passer en mode texte pour
me concentrer sur l'info recherchée (c'est triste, mais parfois elle va se
perdre dans les archives ou citations au milieu de telles daubes).

Et donc c'est quand même plus pratique, même dans de telles conditions, de
récupérer une mise en forme sommaire mais exploitable, fondée sur le
balisage standard.

Je suis désolé pour les "artistes" qui seraient effondrés de lire ça. Mais
c'est toujours mieux que les zapper complètement. :o)

--
Cordialement.

* Patrick BRUNET www.ipzb.fr www.ipzb-pro.com
* E-mail: lien sur http://zener131.eu/ContactMe
romer
Le #22050351
Olivier Miakinen
Si « pcap » signifie « à mettre en petites capitales » et « italique »
signifie « à mettre en italique », ni l'un ni l'autre ne sont de la
sémantique. La sémantique, c'est que « Hébert » est le nom de famille
de Jacques Hébert et que « directeur de la publication » est sa fonction
ou sa profession, non ?

Dans ce cas, j'écrirais plutôt :
<p>Jacques <span class="nom-famille">Hébert</span><br />
<span class="profession">directeur de la publication</span></p>



Peut-être mais je souhaite utiliser pcap sans doute pour autre chose -
ça a un sens pour mois tandis que les attibuts de nom-famille seront
sans doute oublié quelques mois plus tard.
Je connais l'objection de styler par ex .rouge {color:red;} mais je
trouve peut-être à tort que c'est tout de même un moyen mnémotechnique
que je ne refuse pas quand la feuille se style occupe 25 pages A4.
Je commence à avoir du mal à savoir qui fait quoi.
--
A+

Romer
SAM
Le #22050341
Le 7/12/09 10:17 PM, Olivier Miakinen a écrit :
Bonjour,

Le 12/07/2009 14:00, Bernd a écrit :
Un peu à cheval sur ces questions de sémantique ainsi que sur la
typographie, je me demande s'il est préférable d'employer dans une page
xhtml 1.0 (sricte) la balise suivante pour mettre des éléments en
italique :

<p> Jacques <span class="pcap">Hébert</span><br />
<em>directeur de la publication</em></p>





perso <em> me va
le but étant de mettre en relief la fonction du bonhomme
comme ça c'est fait,
et tant mieux s'il n'y a pas besoin de styler la balise pour obtenir
l'italique (ce dont, normalement, on ne devrait pas avoir à
s'intéresser, de quoi j'me mèle là en tant que webmaster ?)

La vrai question à se poser : "italique" est-ce une bonne idée ?
(est-ce que ça va être bien lisible dans la police choisie par
l'utilisateur ?), en utilisant <em> standard on se déculpabilise du +/-
bon choix de l'apparence finale.

De toutes façons "italique" n'a aucun sens "sémantiquement".
C'est juste un effet de style, de présentation.
Il se trouve que conventionnellement l'emphase est représentée en
italique, et ce n'est rien de plus qu'une convention (qu'on peut bien
détourner via les CSS) qui nous fait nous mélanger les pinceaux entre
sémantique et forme.

où cette forme :

<p> Jacques <span class="pcap">Hébert</span><br />
<span class="italique">directeur de la publication</span></p>



Si « pcap » signifie « à mettre en petites capitales » et « italique »
signifie « à mettre en italique », ni l'un ni l'autre ne sont de la
sémantique. La sémantique, c'est que « Hébert » est le nom de famille
de Jacques Hébert et que « directeur de la publication » est sa fonction
ou sa profession, non ?



Ha! mince!
Là, + haut, j'ai un peu radoté ... !

Dans ce cas, j'écrirais plutôt :
<p>Jacques <span class="nom-famille">Hébert</span><br />
<span class="profession">directeur de la publication</span></p>



et moi j'eussions fait :

<p class="identite">Jacques <span>Hébert</span> :<br />
<strong>Directeur de publication</strong></p>

car les surcharges de class ça me fatigue avec un grand F.
(de plus, sémantiquement : je ne vois pas ce que ça apporte ...)
(par contre ... il y a ce truc là ... "microformat". cf + bas)

ou mieux :

<div id="repertoire">
<dl>
<dt>Josè <span>Albado</span></dt>
<dd>Directeur markéting</dd>
</dl>
<dl>
<dt>Jacques <span>Hébert</span></dt>
<dd>Directeur de publication</dd>
</dl>
</div>

et on n'agace personne avec des histoires de couleurs, italiques ou
capitales petites ou grandes dans le HTML (même si traitreusement on les
a prévues dans les CSS)

Question "sémantique" peut-être mieux comme ça ? :

<ul id="repertoire">
<li><dl>
<dt>Josè <span>Albado</span></dt>
<dd>Directeur markéting</dd>
</dl></li>
<li><dl>
<dt>Jacques <span>Hébert</span></dt>
<dd>Directeur de publication</dd>
</dl></li>
</ul>

Après on style les trucs de #repertoire,

#repertoire dt { color: blue }
#repertoire dt span { font-variant:small-caps }
#repertoire dd { font-family: arial; font-style: italic }

ce qui, normalement, devrait clarifier la gestion de la FdS dans
l'avenir (suffit de lister ce qui est lié à "repertoire")
plutôt que de se perdre dans les classes .rouge .italik possiblement
laborieusement additionnées élément par élément dont auxquels il faudra
revenir sur chacun en cas de modif (de la couleur par exemple).

Et puis on peut touj commenter les lignes de la FdS

#repertoire dt { color: blue } /* dt = patronyme */
#repertoire dt span { font-variant: small-caps } /* le nom */
#repertoire dd { font-family: arial; font-style: italic } /*fonction*/


Après, si tu veux mettre les noms de famille en petites capitales et les
professions en italique, c'est un choix sur lequel tu pourras très bien
revenir plus tard, sans état d'âme à propos de (par exemple) :
.pcap { font-style: italic; }
.italique { font-style: normal; }



Je préfère mon système qui à mon idée confusionnera moins.
(j'y ai eut eu une crise de dyslexisme ou pas ?)


Et malgré mon aversion quant à l'utilisation inutile de class, il parait
que dans certains cas et principalement pour les moteurs de recherche,
la répétitivité des class pour un même type d'item serait un plus
(méthode "microformat").

Et si j'ai bien compris, ça pourrait alors nous donner
(sémantique et mini-fiche) :

<ul id="repertoire">
<li>
<dl class="vcard">
<dt class="fn">Josè <span>Albado</span></dt>
<dd class="org">Directeur markéting</dd>
<dd class="tel">01 50 42 10 00</dd>
<dd class="tel work">01 50 42 10 10</dd>
<dd class="tel cell">06 25 42 20 30</dd>
</dl>
</li>
<li>
<dl class="vcard">
<dt class="fn">Jacques <span>Hébert</span></dt>
<dd class="org">Directeur de publication</dd>
<dd class="tel work">01 50 42 10 12</dd>
</dl>
</li>
</ul>

avec la même FdS que précédemment ou, par exemple, celle-ci :

.vcard { border: 1px solid; background: #ffc; padding: 10px }
.vcard dt, .vcard dd { margin: 0.2em 0; padding: 0 }
.vcard .fn { color: blue }
.vcard .fn span { font-variant: small-caps }
.vcard dd { color: black }
.vcard .org { font-style: italic; }
.vcard .tel { font-family: courier; }
.vcard .tel:before { content: "Tél. : " }
.vcard .tel.work:before { content: "(travail) " }
.vcard .tel.cell:before { content: "Tél. (mobile) : "; color:red }


Question:
est-ce que ces CSS et class n'introduisent pas de la sémantique ?
dans la mesure où des mots "significatifs" sont introduits par les
pseudos-éléments 'before' ou 'after'.



Variante :

<ul id="repertoire">
<li class="vcard">
<dl>
<dt class="fn">Josè <span>Albado</span></dt>
<dd class="org">Directeur markéting</dd>
<dd class="tel">01 50 42 10 00</dd>
<dd class="tel work">01 50 42 10 10</dd>
<dd class="tel cell">06 25 42 20 30</dd>
</dl>
</li>
<li class="vcard">
<dl>
<dt class="fn">Jacques <span>Hébert</span></dt>
<dd class="org">Directeur de publication</dd>
<dd class="tel work">01 50 42 10 12</dd>
</dl>
</li>
</ul>

CSS :

.vcard { border: 1px solid; background: #ffc; margin: 0.2em 0;
list-style: none; padding: 10px }
.vcard .fn { color: blue }
.vcard .fn span { font-variant: small-caps }
.vcard dd { color: black }
.vcard .org { font-style: italic; }
.vcard .tel { font-family: courier; }
.vcard .tel:before { content: "Tél. : " }
.vcard .work:after { content: " (travail)" }
.vcard .cell:after { content: " (mobile)"; color:red }


--
sm
Publicité
Poster une réponse
Anonyme