Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

Question de sémantique

23 réponses
Avatar
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

10 réponses

1 2 3
Avatar
romer
SAM wrote:

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.



Ach, tu me compliques la vie ;-). Je pense que oui sinon comment attirer
l'attention sur un élément essentiel du récit (je ne parle pas de
littérarature évidemment). Le gras a une autre utilité (on le voit dès
qu'on ouvre la page ; l'italique on le voit quand les yeux arrivent
dessus).
En effet, on ne tient pas toujours compte de l'apparence finale dans ces
choix.

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.



On est d'accord.

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>



En effet - je fais cela assez souvent en en-tête d'articles mais dans ce
cas précis, il s'agit de la signature d'un article syndical, ça n'irait
pas.
Mais la suite que tu proposes est intéressante quand il s'agit de fiches
en colonnes.

Merci de cette réponse détailllée.

--
A+

Romer
Avatar
Olivier Miakinen
Le 13/07/2009 10:37, Bernd a écrit :

[...] je ne parle pas de littérarature [...]



<del>...</del> ;-)

Pour le reste, je suis d'accord avec SAM.

--
Olivier Miakinen
Avatar
Pierre Goiffon
Bernd wrote:
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.



Alors c'est plus un prb d'outils !
Un Firebug permet en quelques secondes de retrouver facilement quelles
propriétés sont appliquées, comment et pourquoi par exemple...

Et l'argument de ne *jamais* inclure dans un nom de classe une propriété
css, tous ceux qui ont été confrontés à un changement de maquette d'un
site avec des classes ainsi nommées sont maintenant vaccinés ! :)
On a beau se dire "oui mais ça n'arrivera pas", au final la paresse
gagne... Et de toute façon comme l'a dis Olivier, c'est le sens qu'il
vaut mieux faire ressortir !
Avatar
SAM
Le 7/13/09 10:37 AM, Bernd a écrit :
SAM wrote:

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>



En effet - je fais cela assez souvent en en-tête d'articles mais dans ce
cas il s'agit de la signature d'un article syndical, ça n'irait pas.



Je me permets d'utiliser 'cite' :

<div class="article">
<h2>le bô titre</h2>
<p>blabla</p>
<cite>
Henri <span>Desnoyaux</span> <em>(directeur de Publication)</em>
</cite>
</div>


.article cite { display: block; text-align: right; margin: .5em 0;}
.article cite:before { content: "Auteur: "; font-style: normal;
text-decoration: underline}
.article cite span { font-variant: small-caps }
.article cite em { color: blue; font-size: 80% }



Pour le coup des "microformats" :
- les exemples qu'ils donnent ne me plaisent pas
(tout à base de 'div' et 'span').
- ils n'ont pas l'air de se servir de multi-classes
préférant découper à grand renfort de span
... je ne sais si les moteurs peuvent se servir de multi-classes ?
- le hCard(1) est inspiré du vCard dont la Réf(2) est encore une fois
à vision Amerlock US et US only :-(
(à les croire on se retrouve à ne pouvoir mettre une ','
dans l'adresse par exemple.)
- le hCard-creator ... pareil ... forte inspiration amerlock :-(
(et c'est quoi ces "tags" ?)

(1) <http://microformats.org/wiki/hcard-fr>
(2) <http://www.ietf.org/rfc/rfc2426.txt>

ma démo :
<http://cjoint.com/?hntoF6bZ0B>
<http://cjoint.com/data/hntoF6bZ0B_infobule_lien.htm>
Dont Optimus est très content de ma méthode "microformat-hCard"
<http://microformatique.com/optimus/?format=validate&uri=http%3A%2F%2Fcjoint.com%2Fdata%2FhntoF6bZ0B_infobule_lien.htm>
Bon ... tant mieux ;-)
Bien qu'il se moque des subtilités "home" "work"


--
sm

--
sm
Avatar
SAM
Le 7/13/09 4:54 PM, Pierre Goiffon a écrit :

Et l'argument de ne *jamais* inclure dans un nom de classe une propriété
css, tous ceux qui ont été confrontés à un changement de maquette d'un
site avec des classes ainsi nommées sont maintenant vaccinés ! :)



<http://www.w3.org/QA/Tips/goodclassnames>

--
sm
Avatar
romer
SAM wrote:

Je me permets d'utiliser 'cite' :

<div class="article">
<h2>le bô titre</h2>
<p>blabla</p>
<cite>
Henri <span>Desnoyaux</span> <em>(directeur de Publication)</em>
</cite>
</div>


.article cite { display: block; text-align: right; margin: .5em 0;}
.article cite:before { content: "Auteur: "; font-style: normal;
text-decoration: underline}
.article cite span { font-variant: small-caps }
.article cite em { color: blue; fontf-size: 80% }En effet, bonne idée que c




Cie fonctionne bien - mais before n'est pas reconnu par tous les
navagateurs, je crois.

--
A+

Romer
Avatar
SAM
Le 7/13/09 9:10 PM, Bernd a écrit :
SAM wrote:

Je me permets d'utiliser 'cite' :

<div class="article">
<h2>le bô titre</h2>
<p>blabla</p>
<cite>
Henri <span>Desnoyaux</span> <em>(directeur de Publication)</em>
</cite>
</div>


.article cite { display: block; text-align: right; margin: .5em 0;}
.article cite:before { content: "Auteur: "; font-style: normal;
text-decoration: underline}
.article cite span { font-variant: small-caps }
.article cite em { color: blue; fontf-size: 80% }En effet, bonne idée que c




Cie fonctionne bien - mais before n'est pas reconnu par tous les
navagateurs, je crois.



pseudo-éléments before et after...
reconnus par tous les navigateurs que j'utilise ;-)
mais, en effet, pas par mes versions de IE (6 et 7)

Bon ... à mon idée, moyen grave :
l'auteur a bien son nom à l'emplacement habituel pour la signature
d'auteur, on ne va pas se demander ce que ça peut bien être
et c'est le principal

Pour l'accessibilité avec un grand A, je ne sais ce que donne la balise
'cite' dans un vocaliseur.
(ni d'ailleurs ces grands principes de "microformat" s'appuyant sur des
nom de class suggestifs dispatchés dans un hachis de balises sans
signification, comme 'span' par exemple)

--
sm
Avatar
Patrick 'Zener' Brunet
Bonjour.

"SAM" a écrit dans le message
de news 4a5bc261$0$12637$
Le 7/13/09 9:10 PM, Bernd a écrit :
SAM wrote:

Je me permets d'utiliser 'cite' :

[...]



Cie fonctionne bien - mais before n'est pas reconnu par tous les
navagateurs, je crois.



pseudo-éléments before et after...
reconnus par tous les navigateurs que j'utilise ;-)
mais, en effet, pas par mes versions de IE (6 et 7)




Dans une boîte que je fréquente, et qui me paraît représentative du monde
professionnel, on va bientôt passer à IE7, très progressivement.
Quant à IE8, après avoir intégré le correctif associé dans une install
nlited de XP SP3 récemment, j'ai dû refaire cette dernière sans lui parce
que ça bousille tout dans le système (quelques DLL genre MSHTML qui ne
s'enregistrent plus, on n'a même plus accès à la gestion des utilisateurs).

Donc si on tient compte aussi des utilitaires d'entreprise construits
dessus, amha IE6 a encore de l'avenir dans le milieu concerné :o)

Bon ... à mon idée, moyen grave :
l'auteur a bien son nom à l'emplacement habituel pour la signature
d'auteur, on ne va pas se demander ce que ça peut bien être
et c'est le principal

Pour l'accessibilité avec un grand A, je ne sais ce que donne la
balise 'cite' dans un vocaliseur.



Que je sache, il y a peu de telles applications qui précisent la nature du
paragraphe lu, et encore moins qui adoptent une élocution adaptée.
Hélas ! A quand un vrai navigateur vocal qui marche ?

(ni d'ailleurs ces grands principes de "microformat" s'appuyant sur
des nom de class suggestifs dispatchés dans un hachis de balises
sans signification, comme 'span' par exemple)



Ca ressemble assez à ça:
http://fr.wikipedia.org/wiki/Dublin_Core
mais dans le texte...
J'avais commencé à mettre ça dans mes pages, pour le principe, mais quand
j'ai cherché qui/quoi pourrait les utiliser, je me suis dit que le site
serait retiré du Web bien avant.
Si on lit ceci:
http://fr.wikipedia.org/wiki/Microformat
Ca a l'air très limité et toujours en cours d'évolution, idem.
Bref, sauf contexte précis où les outils pour l'exploiter sont déployés sur
le réseau, l'effort de s'aligner sur une telle "norme" me semble bien
inutile.
Je me trompe ?

--
Cordialement.

* Patrick BRUNET www.ipzb.fr www.ipzb-pro.com
* E-mail: lien sur http://zener131.eu/ContactMe
Avatar
SAM
Le 7/14/09 3:53 PM, Patrick 'Zener' Brunet a écrit :
Bonjour.



Hello,

(ni d'ailleurs ces grands principes de "microformat" s'appuyant sur
des nom de class suggestifs dispatchés dans un hachis de balises
sans signification, comme 'span' par exemple)



Ca ressemble assez à ça:
http://fr.wikipedia.org/wiki/Dublin_Core
mais dans le texte...



Ça ressemble à une extension+normalisation de l'usage de la balise META
Oui, bon, pourquoi pas ?

J'avais commencé à mettre ça dans mes pages, pour le principe, mais quand
j'ai cherché qui/quoi pourrait les utiliser, je me suis dit que le site
serait retiré du Web bien avant.
Si on lit ceci:
http://fr.wikipedia.org/wiki/Microformat
Ca a l'air très limité et toujours en cours d'évolution, idem.



Dans la mesure où l'informatique est en perpétuelle évolution il n'est
peut-être pas étonnant que l'adaptation à de "nouveaux" (1998) concepts
ou outils puisent paraitre non finis ?
RFC vCard :
<http://www.ietf.org/rfc/rfc2426.txt>
puis idée du microformat pour adaptation web et transposition vers hCard

Bref, sauf contexte précis où les outils pour l'exploiter sont déployés sur
le réseau, l'effort de s'aligner sur une telle "norme" me semble bien
inutile.
Je me trompe ?



Pour avoir un peu essayé, le truc hCard est absolument génial
... moyennant qques outils adaptés :
- Firefox.3
- xtension Operator <http://www.kaply.com/weblog/operator/>
- Mac OS X et son Carnet (d'adresses)

Ainsi, avec ma démo (les cadres jaunes du bas)
<http://cjoint.com/data/hntoF6bZ0B_infobule_lien.htm>
je peux ajouter dans mon Carnet les hCards que je sélectionne sur la
page (presque d'un clic grâce à Operator)

Je ne sais si sous Windows on a un tel Carnet d'Adresses ni s'il est
interfacé avec celui d'OutLook (comme il l'est sous Mac avec Mail) ni si
ce Carnet (OL ou autre) suit le modèle vCard (fichiers *.vcf), et
surtout si avec IE on peut avoir le même outil qu'Operator (il était
attendu qu'IE.8 offre cela ?)

De toutes façons le principe (fiches) est assez inspiré du XML/XLS avec
des conventions répertoriées telles que pour vCard/hCard :
FN, N, TEL, URL, PHOTO, ADR, street-address, locality, postal-code ...
(revoir la rfc)

--
sm
Avatar
Patrick 'Zener' Brunet
Bonjour.

"SAM" a écrit dans le message
de news 4a5c9a75$0$1142$
Le 7/14/09 3:53 PM, Patrick 'Zener' Brunet a écrit :

[...]

Si on lit ceci:
http://fr.wikipedia.org/wiki/Microformat
Ca a l'air très limité et toujours en cours d'évolution, idem.



Dans la mesure où l'informatique est en perpétuelle évolution il
n'est peut-être pas étonnant que l'adaptation à de "nouveaux"
(1998) concepts ou outils puisent paraitre non finis ?
RFC vCard :
<http://www.ietf.org/rfc/rfc2426.txt>
puis idée du microformat pour adaptation web et transposition vers
hCard

Bref, sauf contexte précis où les outils pour l'exploiter sont
déployés sur le réseau, l'effort de s'aligner sur une telle
"norme" me semble bien inutile.
Je me trompe ?



Pour avoir un peu essayé, le truc hCard est absolument génial
... moyennant qques outils adaptés :
- Firefox.3
- xtension Operator <http://www.kaply.com/weblog/operator/>
- Mac OS X et son Carnet (d'adresses)

Ainsi, avec ma démo (les cadres jaunes du bas)
<http://cjoint.com/data/hntoF6bZ0B_infobule_lien.htm>
je peux ajouter dans mon Carnet les hCards que je sélectionne sur la
page (presque d'un clic grâce à Operator)

Je ne sais si sous Windows on a un tel Carnet d'Adresses ni s'il est
interfacé avec celui d'OutLook (comme il l'est sous Mac avec Mail)
ni si ce Carnet (OL ou autre) suit le modèle vCard (fichiers
*.vcf), et surtout si avec IE on peut avoir le même outil
qu'Operator (il était attendu qu'IE.8 offre cela ?)

De toutes façons le principe (fiches) est assez inspiré du XML/XLS
avec des conventions répertoriées telles que pour vCard/hCard :
FN, N, TEL, URL, PHOTO, ADR, street-address, locality, postal-code
... (revoir la rfc)



OK, celui-là a donc l'air bien servi...

Mais alors ce sera sur un LAN, pas sur Internet.
Moi je n'aimerais pas du tout que le détails de mon profil puissent ainsi
être récupérés automatiquement par n'importe qui, incluant des robots de
base.

--
Cordialement.

* Patrick BRUNET www.ipzb.fr www.ipzb-pro.com
* E-mail: lien sur http://zener131.eu/ContactMe
1 2 3