5545 sujets

Sémantique web et HTML

Bonjour,
En typographie on met en italique les mots étrangers.

Si par exemple je dis : les taxis new-yorkais sont yellow, on devrait écrire les taxis new-yorkais sont yellow.

Jusqu'ici je mettais la balise <i>, mais le validateur https://achecker.ca/checker/index.php WAI ne l'entend pas de cette oreille…

Petite question donc…
Y a t il une balise pour les mots étrangers ?
Sinon est-ce considéré comme de l'emphase (pour <em>) ? ou bien faut il faire une class italique sur un span ?

Merci Smiley smile
Modérateur
De mémoire, <i> tout comme <b> sont des éléments qui n'indiquent aucune valeur sémantique.
Petite précision peut-être utile, peut-être futile : tous les mots issus d’une langue étrangère ne doivent pas être mis en italique. Primo, des mots issus d’une langue étrangère intégrés depuis longtemps au vocabulaire de la langue française, comme spaghetti, par exemple, ne doivent plus être mis en italique, à moins de les citer dans un texte, comme par exemple “Le mot spaghetti vient de l’italien”.

Secundo, l’étrangeté des mots issus d’autres langues est relative ; elle est liée à la connaissance qu’ont les lecteurs cibles du texte comprenant ces mots. Par exemple, sur ce site, je peux tout à fait écrire web developer sans avoir besoin de le mettre en italique.

Par contre, sur un média ciblant des lecteurs non-informaticiens, il pourrait être préférable de le mettre en italique, à la fois pour le signaler aux lecteurs cibles comme mot issu d’une autre langue et pour éviter à ces lecteurs de considérer ce mot comme fautif, par exemple si ce mot ressemble à un mot français, par exemple, mettre web developer en italique pour éviter que les lecteurs cibles puissent penser qu’il s’agit de web développeur mal orthographié.

Pour ma part, faute de mieux, j’utilise la balise <q></q> pour italiser de tels mots parce que je considère qu’il s’agit d’une forme de citation anonyme et parce que c’est plus sémantique que <i></i>. Mais, bon, c’est affaire d’interprétation.
Bonjour,

En effet tous les mots étrangers ne sont pas à mettre en italique, par exemple « etc » bien que locution latine abrégée se met en romain car est devenu partie intégrante de la langue française.

Pour <q> cela me semble embêtant, car comme le dit cela induit une valeur sémantique, or doit on mettre une valeur sémantique sur un mot étranger, ou le mettre en emphase avec l'attribut lang pour indiquer un changement de prononciation…

Il y a un gros vide dans le codage à ce niveau, ce qui fait qu'on bidouille tous à nos convenances Smiley biggrin . J'espérai être passé à coté d'une balise mettant fin à ces approximations Smiley cligne

Si quelqu'un a une autre idée, c'est toujours intéressant de savoir comment chacun fait Smiley smile
@januor :

J'ai omis de le préciser mais j'utilise la balise <q></q> avec l'attribut lang.

a écrit :
Il y a un gros vide dans le codage à ce niveau, ce qui fait qu'on bidouille tous à nos convenances. J'espérai être passé à coté d'une balise mettant fin à ces approximations"


Sinon, januor, pour répondre à ton commentaire, le HTML ne comporte tout simplement pas assez de balises pour tout les cas de figure. C'est, si je me souviens bien, un choix délibéré pour ne pas se retrouver avec un HTML comportant plusieurs centaines de balises. Perso, j'aurais préféré cette deuxième option. Quand je pense aux heures passées par une multitude d'intés à se demander quelle balise est la plus pertinente sémantiquement pour tel ou tel cas de figure et aux toutes aussi nombreux débats sur le sujet, clairement, j'aurais préféré un HTML avec davantage de balises. Perso, j'aimerais bien une balise spécifique pour les noms propres.

Un article sur le sujet, qui ne date pas d'aujourd'hui :

http://4design.xyz/marquage-html-des-micro-contenus-p-div-ou-bien
Modifié par thierry (04 Nov 2018 - 13:28)
Après, si l'on cherche à etre "sémantique" à ce point là, il vaux peut-être mieux compléter avec du contenu "enrichi" via les microdata (html5, cf. schema.org). C'est fait pour ça.
Modifié par Olivier C (04 Nov 2018 - 18:22)
Merci à tous pour l'intérêt que vous portez à ce sujet Smiley smile

Même avis Thierry, j'aurai préféré plus de balises et avoir le choix, que pas assez et faire de la bidouille Smiley smile

Intéressant les microdata, ça s'utilise comment, je n'ai pas vu d'exemple et ne connait pas ?

@Aliasdmc, c'est ce que j'ai fait pour le moment :
<i title="jaune" lang="en">yellow</i>

«L'élément HTML <i> représente un morceau de texte qui se différencie du texte principal. Cela peut par exemple être le cas pour des termes techniques, des phrases dans une langue étrangère ou encore l'expression des pensées d'un personnage. Le contenu de cet élément est généralement affiché en italique.»
c'est ce que j'ai vu sur https://developer.mozilla.org/fr/docs/Web/HTML/Element/i

Ca n'est pas la bible du web, mais ça donne une piste de préconisation sur les intégrations de mots étrangers Smiley biggrin

et le « généralement affiché en italique », sous entendrait presque qu'il faut rajouter un
font-style: italic; 

Modifié par januor (04 Nov 2018 - 20:40)
januor a écrit :
Intéressant les microdata, ça s'utilise comment, je n'ai pas vu d'exemple et ne connait pas ?

Exemple via le html5 (on peut aussi le faire en JSON) :
<div itemscope itemtype="http://schema.org/Hotel">
  <h1><span itemprop="name">ACME Hotel Innsbruck</span></h1>
  <span itemprop="description">A beautifully located business hotel right in the
heart of the alps. Watch the sun rise over the scenic Inn valley while
enjoying your morning coffee.</span>
  We speak:
  <ul>
    <li itemprop="availableLanguage" itemscope itemtype="http://schema.org/Language">
      <span itemprop="name">English</span>
    </li>
    <li itemprop="availableLanguage" itemscope itemtype="http://schema.org/Language">
      <span itemprop="name">German</span>
    </li>
  </ul>
</div>


Un tutoriel sur Alsacréations : Microdata et Schema.org, la sémantique chirurgicale.
Modifié par Olivier C (04 Nov 2018 - 21:24)
J'avais oublié : pour l'italique, que je sache, <em></em> est à privilégier par rapport à <i></i>. La balise <em></em> (pour emphasis) entraine un changement d'intonation dans les lecteurs vocaux et fournit donc une information supplémentaire pour les lecteurs non-/malvoyants.
Oui mais !

a écrit :
The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, transliteration, a thought, or a ship name in Western texts.

Le mot-clé est représente. Le texte dit que l'élément i représente un fragment de texte dans une voix ou humeur différente, pas que cette différence est effectivement restituée dans un lecteur audio. Pour le rendu audio, il faudrait alors utiliser <em></em>.

Quelqu'un a plus d'infos ?
Modifié par thierry (06 Nov 2018 - 22:40)
Peut-être que le fait de mettre l'attribut lang fait que le lecteur vocal change la prononciation ?
Bonjour,
C'est sans doute l'italique qui nous a longtemps induit en erreur.
Visiblement d'après les spécifications, <i> aurait une valeur sémantique plus important que de simplement mettre en italique.
« The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, transliteration, a thought, or a ship name in Western texts. »

Ce n'est pas une emphase, mais une voix différente, si j'ai bien compris, ce qui redonnerait un sens que j'avais personnellement perdu de <i> Smiley smile