Conseil de code pour valider en XHTML 1.0 Strict

Conseil de code pour valider en XHTML 1.0 Strict - HTML/CSS - Programmation

Marsh Posté le 19-08-2004 à 08:53:01    

Salut à tous  :hello:  
 
J'ai besoin d'un petit conseil concernant les textes en gras et en Italique.
 
Vaut-il mieux utiliser les feuilles de styles CSS comme çà :

Citation :

.texteGras {
 font-weight: bold;
}
 
.texteItalique {
 font-style: italic;
}
 
.texteGrasetItalique {
 font-style: italic;
 font-weight: bold;
}


en créant la ligne de code suivante :

Citation :

<p><span class="texteGrasetItalique">mon texte ici</span></p>


 
ou alors utiliser les balises <strong>...</strong> et <i>...</i> comme çà :

Citation :

<p><strong><i>mon texte ici</i></strong></p>


 
Ce qui me mets le doute, c'est que la balise <u>...</u> n'existe plus en XHTML et qu'il faut la remplacer par le CSS suivant :

Citation :

.texteSouligné {
 text-decoration: underline;
}


 
En est-il de même pour les balises précédemment citées ?
 
Merci d'avance pour vos conseils éclairés.
 
 [:fafane84]


Message édité par fafane84 le 19-08-2004 à 08:54:36

---------------
Mon Topic de Vente Hardware
Reply

Marsh Posté le 19-08-2004 à 08:53:01   

Reply

Marsh Posté le 19-08-2004 à 09:33:21    

Attention, il ne faut pas confondre <strong>, <em>
avec <b>, <i>.
 
les premiers signifient que tu veux réellement afficher ces textes en gras ou en italique (par exemple un lecteur d'ecran va le preciser).
<b> et <i> sont uniquement des balises de présentation, au même titre que <font>.
 
Donc si c'est juste visuel, CSS.
Sinon, <strong> ou <em>.
 
Surtout pas <b> et <i> !
(qui sont d'ailleurs interdits en strict il me semble)
;)


Message édité par pierre6020 le 19-08-2004 à 09:34:43
Reply

Marsh Posté le 19-08-2004 à 09:40:30    

pierre6020 a écrit :

Attention, il ne faut pas confondre <strong>, <em>
avec <b>, <i>.
 
les premiers signifient que tu veux réellement afficher ces textes en gras ou en italique (par exemple un lecteur d'ecran va le preciser).
<b> et <i> sont uniquement des balises de présentation, au même titre que <font>.
 
Donc si c'est juste visuel, CSS.
Sinon, <strong> ou <em>.
 
Surtout pas <b> et <i> !
(qui sont d'ailleurs interdits en strict il me semble)
;)


 
Merci de ta réponse  
 
Je crois que je vais privilégier le CSS, car je pense qu'à plus ou moins long terme ces balises vont devenir obsolètes.
 
Pour info : ce qui m'a induit en erreur ces que justment les balises <b> et <i> sont valide en XHTML 1.0 Strict.
 
 [:fafane84]


---------------
Mon Topic de Vente Hardware
Reply

Marsh Posté le 19-08-2004 à 10:15:45    

ATTENTION!
<em> (emphasize) et <strong> (stronger emphasize) ne sont pas nécessairement affichés en italique/gras, leur fonction première est de mettre en valeur un "point important", de le faire apparaitre clairement dans le texte mais n'oblige en rien à le rendre en gras/souligné par défaut (à moins de l'avoir explicitement indiqué dans la CSS):

Citation :

EM and STRONG are used to indicate emphasis. The other phrase elements have particular significance in technical documents. These examples illustrate some of the phrase elements:
[...]
The presentation of phrase elements depends on the user agent. Generally, visual user agents present EM text in italics and STRONG text in bold font. Speech synthesizer user agents may change the synthesis parameters, such as volume, pitch and rate accordingly.


source
par ailleurs concernant <i> et <b>

Citation :

15.2 Fonts
 
The following HTML elements specify font information. Although they are not all deprecated, their use is discouraged in favor of style sheets.
15.2.1 Font style elements: the TT, I, B, BIG, SMALL, STRIKE, S, and U elements
[...]
    TT: Renders as teletype or monospaced text.
    I: Renders as italic text style.
    B: Renders as bold text style.
    BIG: Renders text in a "large" font.
    SMALL: Renders text in a "small" font.
    STRIKE and S: Deprecated. Render strike-through style text.
    U: Deprecated. Renders underlined text.


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 19-08-2004 à 13:48:25    

En clair EM et STRONG sont sémantiques, tandis qu'I et B sont stylistiques, selon les évangiles anglo-saxons du W3C.
 
Rappelons que si le gras (bold) est indiscutablement un "style" au sens CSS, ce n'est pas automatiquement le cas de l'italique en typographie française: parfois utilisé comme style, l'italique s'impose surtout pour la mention de titres d'oeuvres, de termes autonymes, de certaines locutions latines, etc. Il possède alors une sémantique propre, à l'instar des "quotes" amerlauds qui lui sont souvent substitués en typographie "franglaise".
 
Ainsi, la balise <i> aurait toute sa raison d'être en XHTML. Il serait bon de temps en temps de se souvenir que le W3C n'est pas obligatoirement un messie.
 
PROLEPSE: Evidemment vous allez me dire que "italique", en soi, reste une spécification stylistique en ce sens qu'elle affecte les glyphes, et qu'il vaudrait mieux passer par des tags sémantiques du genre quotes, title, autonym, en leur affectant l'attribut ital par css. Et vous auriez raison de me dire ça...


Message édité par ACut le 19-08-2004 à 13:54:52
Reply

Marsh Posté le 19-08-2004 à 14:10:20    

ACut a écrit :


Ainsi, la balise <i> aurait toute sa raison d'être en XHTML. Il serait bon de temps en temps de se souvenir que le W3C n'est pas obligatoirement un messie.


D'après le posteur initial elle existe encore et toujours :)
et il est parfaitement possible d'utiliser un <span> (ou autre) pour marquer une zone de texte "différente" à laquelle on appliquera un style précis
 
On peut même créer des styles différents pour des classes d'<em> différents de manière à modifier les emphasoze en fonction de la situation :)
(<em class="locution"> servant à mettre en valeur les locutions latines par exemple)


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 19-08-2004 à 15:58:49    

Masklinn a écrit :

D'après le posteur initial elle existe encore et toujours :)
et il est parfaitement possible d'utiliser un <span> (ou autre) pour marquer une zone de texte "différente" à laquelle on appliquera un style précis
 
On peut même créer des styles différents pour des classes d'<em> différents de manière à modifier les emphasoze en fonction de la situation :)
(<em class="locution"> servant à mettre en valeur les locutions latines par exemple)


Je suis totalement d'accord. Mon post n'est pas très bien formulé. En fait, je pense que l'italique possède "une certaine sémantique" et qu'il manque, au fond, un tag générique visant celle-ci au même titre que EM et STRONG visent l'accentuation ("emphase" ). L'italique n'est pas essentiellement utilisé pour "accentuer" un terme mais pour en viser le signifiant au lieu du signifié.
 
Spécialiser le tag EM en class="locution" et affecter à cette classe le style italique comme tu le suggères est la meilleure réponse actuelle, mais tu conviendras que ça veut dire qu'on assimile une locution latine à une sorte d'accentuation (EM), ce qui n'est pas réellement le cas sémantiquement. Une expression comme a priori ou bien un titre d'oeuvre comme Le Monde selon Garp sont composés en italique PARCE QU'ILS sont intrinsèquement autoréférents et non parce qu'ils sont amplifiés par le locuteur. Il faudrait donc qu'un tag autre que EM ou STRONG exprime génériquement cette nuance, quitte à décider ensuite qu'il apparaisse (via CSS) en italique ou autrement.
 
Voilà pour clarifier... En espérant que ça n'a pas obscurci le débat... J'admets que le problème est trapu.

Reply

Marsh Posté le 19-08-2004 à 16:27:39    

ACut a écrit :

Je suis totalement d'accord. Mon post n'est pas très bien formulé. En fait, je pense que l'italique possède "une certaine sémantique" et qu'il manque, au fond, un tag générique visant celle-ci au même titre que EM et STRONG visent l'accentuation ("emphase" ). L'italique n'est pas essentiellement utilisé pour "accentuer" un terme mais pour en viser le signifiant au lieu du signifié.
 
Spécialiser le tag EM en class="locution" et affecter à cette classe le style italique comme tu le suggères est la meilleure réponse actuelle, mais tu conviendras que ça veut dire qu'on assimile une locution latine à une sorte d'accentuation (EM), ce qui n'est pas réellement le cas sémantiquement. Une expression comme a priori ou bien un titre d'oeuvre comme Le Monde selon Garp sont composés en italique PARCE QU'ILS sont intrinsèquement autoréférents et non parce qu'ils sont amplifiés par le locuteur. Il faudrait donc qu'un tag autre que EM ou STRONG exprime génériquement cette nuance, quitte à décider ensuite qu'il apparaisse (via CSS) en italique ou autrement.
 
Voilà pour clarifier... En espérant que ça n'a pas obscurci le débat... J'admets que le problème est trapu.


 :jap:  je vois mieux ce que tu veux dire
 
et j'ai peut être la solution

Citation :

EM:
    Indicates emphasis.
STRONG:
    Indicates stronger emphasis.
CITE:
    Contains a citation or a reference to other sources.
DFN:
    Indicates that this is the defining instance of the enclosed term.
CODE:
    Designates a fragment of computer code.
SAMP:
    Designates sample output from programs, scripts, etc.
KBD:
    Indicates text to be entered by the user.
VAR:
    Indicates an instance of a variable or program argument.
ABBR:
    Indicates an abbreviated form (e.g., WWW, HTTP, URI, Mass., etc.).
ACRONYM:
    Indicates an acronym (e.g., WAC, radar, etc.).


il me semble que <cite> pourrait répondre à ta demande non?
(source)


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 19-08-2004 à 17:23:03    

Masklinn a écrit :

:jap:  je vois mieux ce que tu veux dire
 
(...)
 
il me semble que <cite> pourrait répondre à ta demande non?


 
Là, tu touches un problème insondable... La différence entre citation et autonymie, c'est-à-dire (en typo française) entre l'emploi des guillemets et de l'italique. On n'est pas près de trancher!
 
A mon sens, le tag CITE devrait induire une composition entre guillemets en typographie française, car c'est la règle générale pour les citations. Cependant,  pour pleins de raisons pratiques et signalétiques, il est fréquent de "citer en italique" (cf. les sections citations: dans la présente page).
 
Réciproquement, l'italique d'autonymie (titre d'oeuvre, mention du signifiant...), bien qu'il ne puisse pas décemment s'assimiler à une citation au sens de "reproduction d'un énoncé d'autrui", est très souvent composé entre guillemets! Certains écriraient: Le mot pomme compte 5 lettres, d'autres: Le mot "pomme" compte 5 lettres.
 
On notera au passage que j'ai ici utilisé le style gras comme marqueur de méta-autonymie, mais les guillemets auraient pu faire l'affaire dans le 1er cas en considérant l'expression autonyme comme une citation virtuelle (je cite ceux qui écriraient...). Ca montre que le tag recherché -- appelons-le AUTONYM -- devrait savoir "négocier" avec le tag CITE et savoir gérer les imbrications. Les typographes savent trouver des solutions ingénieuses à ces affaires-là, mais peut-on les programmer dans les CSS aussi ingénieusement?
 
Bizarrement, le tag qui me paraît en fait le plus proche du concept visé, c'est VAR ("Indicates an instance of a variable or program argument" ), car il n'y a rien de plus autonyme qu'un nom de variable et il n'est pas innocent que la littérature mathématique et informatique ait quasi institutionnalisé l'usage de l'italique pour désigner une variable... Au fond, si le W3C avait introduit AUTONYM au lieu de VAR, on aurait eu là un concept beaucoup plus générique et particulièrement satisfaisant pour les titres d'oeuvres.

Reply

Marsh Posté le 19-08-2004 à 17:46:14    

<cite> n'est pas restreint qu'aux citations :o
 
et le w3c te laisse une possibilité par l'origine XML du XHTML: créer une custom DTD comportant la balise <autonym> (que je serais incapable d'utiliser, j'ai un peu de mal a comprendre l'idée du machin ;) )
 
par ailleurs en redéfinissant tout ou partie du DTD de base du XHTML 1.0 Strict tu devrais pouvoir prendre en compte certaines imbrications, je pense (je ne suis toutefois pas un spécialiste du XML)


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 19-08-2004 à 17:46:14   

Reply

Marsh Posté le 19-08-2004 à 18:10:22    

Masklinn a écrit :

<cite> n'est pas restreint qu'aux citations :o
(...)


 
...et c'est là une chose regrettable, car un tag dédié au seul processus de citation se justifierait pleinement. C'est une question de sémantique. Mettre en CITE une "reference to other sources" me paraît tordu. Point de vue perso.
 
Ben, moi aussi je reconnais que je ne suis pas versé en XML... mais ta suggestion mériterait que je considère la chose. Cela dit je suis entré dans ce topic pour le pur plaisir de gloser, c'est fafane84 qui voulait clarifier gras, ital, etc., et à l'heure qu'il est son problème doit être résolu ;-)


---------------
NOUVEAU! Le guide de l'édition en version ebook : http://marcautret.free.fr/autret/150q-ebook/
Reply

Marsh Posté le 19-08-2004 à 18:41:12    

ne nie pas que tu aimes le HS :o


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 19-08-2004 à 20:50:10    

ACut a écrit :

...et c'est là une chose regrettable, car un tag dédié au seul processus de citation se justifierait pleinement.


Il existe, c'est le tag Q. D'ailleurs, Mozilla et Opéra ajoutent les guillemets autour du texte cité.
 

ACut a écrit :

C'est une question de sémantique. Mettre en CITE une "reference to other sources" me paraît tordu. Point de vue perso.


Son usage est effectivement plus large. Mais par exemple, pour des titres d'oeuvres ou des citations courtes il est adapté.


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 19-08-2004 à 21:01:00    

fafane84 a écrit :

Salut à tous  :hello:  
 
J'ai besoin d'un petit conseil concernant les textes en gras et en Italique.
 
Vaut-il mieux utiliser les feuilles de styles CSS comme çà :

Citation :

.texteGras {
 font-weight: bold;
}
 
.texteItalique {
 font-style: italic;
}
 
.texteGrasetItalique {
 font-style: italic;
 font-weight: bold;
}


en créant la ligne de code suivante :

Citation :

<p><span class="texteGrasetItalique">mon texte ici</span></p>



Puisqu'on discute sémantique depuis un moment, appeler des classes "texteGrasetItalique" ou "texteItalique" n'est pas tellement bienvenu.
 
L'intérêt des CSS est de séparer, dans les documents HTML, le fond de la forme. En nommant des classes selon le style qu'elles représentent tu réintroduis dans le code HTML une notion de mise en forme qui n'a pas lieu d'être en Strict.
 
Interroge toi plutôt sur la raison que tu as de mettre un texte en gras, un autre en italique et un autre en gras et en italique.
 
Admettons que le texte en gras est important, tu vas donc créer une classe nommée "important". Et le jour où tu voudras changer ton design et que le texte important ne sera plus en gras mais en rouge et clignotant, il te suffira de changer les propriétés CSS de la classe en question.
En revanche, si tu nommes ta classe "texteGras" tu auras l'air malin avec ton texte gras qui est en fait rouge et clignotant. Ou alors il faudra renommer le nom de ta classe dans tous les documents HTML ce qui n'est pas très pratique.

fafane84 a écrit :


ou alors utiliser les balises <strong>...</strong> et <i>...</i> comme çà :

Citation :

<p><strong><i>mon texte ici</i></strong></p>



Comme il a été répondu, STRONG et EM sont plus sémantiques que I ou G, donc à privilégier.
 
Personnelement, je préfère utiliser le plus possible des balises sématiques comme STRONG ou EM que l'élément générique SPAN car cela donne des indications aux navigateurs qui ne supportent pas (ou partiellement) les CSS, tout en donnant du sens au document. Sachant que, le cas échéant, tu peux tout à fait redéfinir les propriétés CSS des ces éléments


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 19-08-2004 à 22:13:26    

Masklinn a écrit :

ne nie pas que tu aimes le HS :o


Je ne dirais pas qu'il soit HS de creuser un peu la sémantique des balises et d'examiner les points de friction fond/forme dans un topic consacré aux XHTML & CSS. Cela dit j'adore le HS. Ca s'est vu?


---------------
NOUVEAU! Le guide de l'édition en version ebook : http://marcautret.free.fr/autret/150q-ebook/
Reply

Marsh Posté le 20-08-2004 à 08:10:27    

gm_superstar a écrit :

Puisqu'on discute sémantique depuis un moment, appeler des classes "texteGrasetItalique" ou "texteItalique" n'est pas tellement bienvenu.
 
L'intérêt des CSS est de séparer, dans les documents HTML, le fond de la forme. En nommant des classes selon le style qu'elles représentent tu réintroduis dans le code HTML une notion de mise en forme qui n'a pas lieu d'être en Strict.
 
Interroge toi plutôt sur la raison que tu as de mettre un texte en gras, un autre en italique et un autre en gras et en italique.
 
Admettons que le texte en gras est important, tu vas donc créer une classe nommée "important". Et le jour où tu voudras changer ton design et que le texte important ne sera plus en gras mais en rouge et clignotant, il te suffira de changer les propriétés CSS de la classe en question.
En revanche, si tu nommes ta classe "texteGras" tu auras l'air malin avec ton texte gras qui est en fait rouge et clignotant. Ou alors il faudra renommer le nom de ta classe dans tous les documents HTML ce qui n'est pas très pratique.
 
Comme il a été répondu, STRONG et EM sont plus sémantiques que I ou G, donc à privilégier.
 
Personnelement, je préfère utiliser le plus possible des balises sématiques comme STRONG ou EM que l'élément générique SPAN car cela donne des indications aux navigateurs qui ne supportent pas (ou partiellement) les CSS, tout en donnant du sens au document. Sachant que, le cas échéant, tu peux tout à fait redéfinir les propriétés CSS des ces éléments


 
Oui effectivement, à la lecture des posts précédents, j'ai commencé à faire la nuance entre fond et forme.
 
J'ai donc supprimé toutes mes balises <span> pour réintroduire les balises <strong> et <em> dans mon code. Mais dans une page j'avais besoin de souligné l'importance d'un texte alors j'ai créé la classe :

Citation :

.texteImportant {
 color: red;
}


dans ma feuille de style CSS.
 
En tout cas merci à tous pour ces précisions qui m'ont beaucoup apportées.
 
 [:fafane84]  


---------------
Mon Topic de Vente Hardware
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed