5568 sujets

Sémantique web et HTML

Bonjour,

Je travaille à la refonte d'un site qui est un mémoire de maitrîse que je met en ligne.

Je souhaite publier le document en XHTML 1.0 Strict. Le document contient de longue citations. J'utilise la balise <blockquote> pour les encadrer.

Dans ces citations j'ai des mots/ou phrase qui renvoient vers d'autres pages/textes/reférences, avec des balises <a href="...">

Malheureusement, cela ne passe pas le validateur xhtml du W3C Smiley decu
Apparement insérer un tag <a> dans un <blockquote> n'est pas valide !!!

Line 177, column 74: document type does not allow element "a" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag

... 1915)<a class="noteBasPage" href="#note001">001</a>

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").



Pouvez-vous ne comfirmer ? Ou me dire si je fais fausse route ???
Avez-vous une idée pour solutionner le probléme ???
Modifié le 07 Feb 2005 - 12:52
Si je ne me trompe, blockquote n'accepte que des éléments blocs en son sein, ce qui sous entendrait qu'il faudrait mettre ton <a> dans un <p>.

Je l'ai lu mais je pense que qqn de compétent va passer te confirmer tout ça ^^
En effet:
- <blockquote> ne peut pas contenir directement des éléments en ligne en HTML ou XHTML strict, ni du contenu anonyme (non balisé).
- C'est en revanche possible en HTML ou XHTML transitional.

L'idée étant:
- en strict, de favoriser des choix de structures plus riches qu'en transitional,
- et en transitional de conserver, au prix d'une structure plus lâche, une plus grande ressemblance avec le HTML de papa tel que le génèrent différents éditeurs. Pourquoi cette ressemblance ? Pour faciliter à ces éditeurs l'intégration des standards.

Solutions possibles:
- repasser en transitional
- ou baliser systématiquement le contenu des blockquotes avec les élements <p>, <ul>, <cite>, <div>... selon la nature du contenu.
Modifié le 24 Jan 2005 - 10:06
Bonjour,

Merci de vos réponses ! Je dois dire que je m'attendais pas à avoir la réponse directement de quelqu'un comme Laurent DENIS dont j'admire le travail !

Je suis parvenu à la même conclusion que vous ce matin en (re)lisant les specs du XHTML du W3C ! (comme quoi on ne les lis pas assez !)

J'ai donc placé à l'intérieur de mes <blockquotes> des <p> et tout est rentré dans l'ordre !!

Par contre je me rends compte que la balise <q> m'affiche d'horible guillements anglais " Smiley decu
J'ai tenté un
<q lang="fr">
en espérant que cela change quelque chose, sans résultat. Smiley confus

Merci à tous.
Administrateur
lelutin a écrit :

Je suis parvenu à la même conclusion que vous ce matin en (re)lisant les specs du XHTML du W3C ! (comme quoi on ne les lis pas assez !)

J'ai donc placé à l'intérieur de mes <blockquotes> des <p> et tout est rentré dans l'ordre !!

Voici un petit récapitulatif sur ce sujet Smiley smile
lelutin a écrit :
Par contre je me rends compte que la balise <q> m'affiche d'horible guillements anglais " Smiley decu
J'ai tenté un
<q lang="fr">
en espérant que cela change quelque chose, sans résultat.


Tous les navigateurs ne génèrent pas de guillemets à partir de l'élément q (IE ne sait pas le faire). Parmi les navigateurs qui le font, aucun n'associe par défaut les types de guillemets selon la langue du contenu.

En outre, avec <q lang="fr">, tu ferais dépendre le type de guillemets de la langue du contenu : si tu veux respecter les usages typographiques de l'imprimé, ils dépendent de la langue du contexte.

Tout cela pour dire que, dans une page en français, tu obtiendras les guillemets français conformes aux usages typo avec:

q {
quotes: "\00AB\00A0" "\00A0\00BB" "\201C\00A0" "\00A0\201D";
}


\00A0 est l'espace insécable (qui remplace l'espace fine insécable de rigueur, celle-ci étant inutilisable en raison de problèmes d'implémentation dans les navigateurs)

\00AB et \00BB sont les guillemets doubles français (chevrons)

\201C et \201D sont les guillemets doubles anglais qui ne seront utilisés que pour les citations de second niveau, c'est à dire elles-mêmes incluses dans une première citation.

Sinon, tu trouveras dans CSS2, à la propriété quote, les codes correspondant aux différents autres types de guillemets.

Tout ceci sera sans effet dans IE, pour lequel la seule solution est d'insérer directement les guillemets dans le contenu.
Modifié le 24 Jan 2005 - 12:53
Quel est le style pour que chaque citation <q> remplace les guillemets droits par des guillemets français avec l'espace fine qui convient ?
La référence échappée de l'espace fine insécable (&thinsp; - &#8201; - &#x2009;) est \2009. Ce qui donnerait, avec des guillemets français de premier niveau, et anglais pour le second:

q {
quotes: "\00AB\2009" "\2009\00BB" "\201C\2009" "\2009\201D";
}


Mais les problèmes d'implémentation commencent : Opera n'aime pas la combinaison espace fine insécable+guillemet fermant anglais double (utilisée ici pour les citations de second niveau, selon les conventions typo): la graphie du guillemet fermant ne correspond pas à celle du guillemet ouvrant... Idem avec des guillemets anglais simples. Il faudrait alors utiliser l'apostrophe double (guillemet ASCII) pour le second niveau, ce qui donnerait:

q {
quotes: "\00AB\2009" "\2009\00BB" "\0022\2009" "\2009\0022";
}


Tout va bien pour Opera. Passons à IE: inventif (comme souvent), il représente d'habitude l'espace fine insécable sous forme d'un joli petit carré lorsque &thinsp; ou &#8201; sont utilisés directement dans le code HTML. Mais ici, comme il ignore les guillemets générés en CSS, le code ci-dessus ne lui pose aucun problème: il n'y toujours pas de guillemets Smiley cligne
Rappelons tout de même que, le jour où un futur IE implémentera le contenu généré avec :before et :after (qui est en fait à la base des guillemets CSS)... sans corriger son bug sur l'espace fine insécable, le résultat sera assez catastrophique. Mais bon, ce n'est qu'un cas hypothétique.

Ouf... Ah, on oublie Firefox et Mozilla, et c'est là que ça devient vraiment drôle : l'espace fine insécable a fini, après une longue attente, par être gérée par les navigateurs gecko récents... sous la forme d'une espace nettement plus large que l'espace normal ! Smiley eek

Parvenu à ce stade, je préfère ne pas savoir ce qu'en font Safari et IEMac et autres Konqueror Smiley lol

Tiens, un jour, il faudra qu'on parle du tiret sécable optionnel. ça aussi, c'est rigolo...
Modifié le 25 Jan 2005 - 05:54
Merci, merci, merci à tous !

C'est trés instructif, et vous allez beaucoup plus vite que je ne peux en assimiler ! Mais, j'apprends plein de choses !

Petite réflexion : laurent D., ca ne fera pas un bon papier pour openweb ça si tu mettait bout à bout toutes tes réponses ??? Smiley cligne
Si tu regarde le programme indicatif d'OpenWeb pour les mois à venir, il y a effectivement quelque-chose de prévu sur la typographie Web Smiley cligne
Laurent Denis a écrit :
Si tu regarde le programme indicatif d'OpenWeb pour les mois à venir, il y a effectivement quelque-chose de prévu sur la typographie Web Smiley cligne


Cool !!! J'ai hate de pouvoir lire cela !

Sinon, pour ceux que cela intéresse, je bosse sur la refonte de ce site :
http://delphine.lafon.free.fr/Freinet/sommaire.htm

La maquette de la future version est là :
http://delphine.lafon.free.fr/v2/freinet_introduction.php
(je bosse dessus donc ca change au fil du temps)

Ne vous privez pas si vous avez des remarques à faire !
Bon, alors quelques remarques un peu en vrac :

- Titrer, titrer encore et titrer toujours ! Des <h1>, <h2>, <h3> à la place de ces <div id="titre...">. Ton contenu y gagnera en réutilisabilité (génération automatique d'une table des matières, d'une synthèse...), en accessibilité (possibilité de naviguer de titre en titre dans ta page avec un lecteur d'écran), en interopérabilité (les titres apparaissent comme tel dans un navigateur texte ignorant ta CSS), en facilité d'indexation (par un moteur spécialisé surtout, dans une moindre mesure par les moteurs généralistes actuels)... Et puis, pour un mémoire universitaire, c'est plutôt logique, non ? Smiley cligne

- revoir l'usage des méta données Dublin Core et faire un peu de ménage dans les <meta> et <link>. (Le DC utilisé actuellement dans le code d'OpenWeb n'est peut-être pas un exemple suffisamment actualisé - encore un article prévu, tiens... - )

- signaler la version pdf dans un <link rel="alternate"

- indiquer le poids de la version PDF, et éventuellement ajouter un lien vers un site de téléchargement d'Acrobat Reader.

- Peut-être opter pour une police de caractères sans-serif plutôt que serif à l'écran (meilleure lisibilité).

- En revanche, prévoir une CSS print éliminant le menu et repassant en police serif bien aérée...

- Modifier le lien de ta CSS actuelle pour préciser les medias visés: screen, projection, tv.

- Ajouter un lien d'évitement du menu et d'accès direct au contenu de la page (ta div #content)

Voilà, voilà... Sinon, c'est une présentation simple et directe et un code itou... tous deux bien agréables Smiley cligne
Bonjour Laurent,

Tout d'abord merci pour le temps que tu as pris à consulter mon site, à me répondre et à me conseiller. Le tout avec beaucoup de pédagogie et de clarté.

Beaucoup de tes remarques était sur ma "TO DO" list. Celles qui n'y était pas, le sont maintenant Smiley smile

J'aimerais revenir sur quelques points :
- "l'usage des méta données Dublin Core" : je m'étais basé sur ceux d'OpenWeb pensant que se serait une base solide et que pourrais m'appuyer dessus. Apparement, tu semble dire que ce n'est pas tout à fait le cas ! Donc, il ne me reste plus qu'à revoir ma copie Smiley cligne

- "opter pour une police de caractères sans-serif plutôt que serif à l'écran" : Ca c'est mon grand défaut en général. J'ai l'habitude du support papier et j'ai tendance instinctivement à utiliser du "sans-sérif" pour la "titraille" et sur "sérif" pour le corps du texte ! Bien évidemment cette lecture des choses n'est plus valable pour des pages web et un "sans sérif" pour le corps facilite grandement la lecture en ligne. Vivement l'article sur la Typo d'OpenWeb !

- "Ajouter un lien d'évitement du menu et d'accès direct au contenu de la page (ta div #content)" Heu, là j'ai bien peur de ne pas avoir compris où tu voulais en venir ! S'agit t'il de placer un lien qui "masquerais le menu" ou d'un lien en début de page qui permettrait de "sauter" le menu et d'aller au contenu de la page directement (nottament dans le cas où la css ne serait désactivé par exemple)

Encore merci pour tout ces conseils qui me seront fort utiles et qui m'ont permis d'apprendre beaucoup de choses ou de revenir et approfondir d'autres sujets.
Laurent Denis a écrit :

q {
quotes: "\00AB\2009" "\2009\00BB" "\0022\2009" "\2009\0022";
}



Il me semble qu'en fait, ce sont des espaces insécables "normales" qu'il faut utiliser (et aucune espace pour l'anglais).

Laurent Denis a écrit :

Ouf... Ah, on oublie Firefox et Mozilla, et c'est là que ça devient vraiment drôle : l'espace fine insécable a fini, après une longue attente, par être gérée par les navigateurs gecko récents... sous la forme d'une espace nettement plus large que l'espace normal ! Smiley eek


Tiens ? Ça passe bien chez moi. L'espace ne me semble simplement pas assez fine, mais elle est certainement moins épaisse que l'espace normale.
Bobe a écrit :
Il me semble qu'en fait, ce sont des espaces insécables "normales" qu'il faut utiliser (et aucune espace pour l'anglais).


les guillemets français doivent bien être suivit d'une espace fine insécable (1/8 de quadratin), aucune pour les anglais.