Search code examples
csshtmlsemantic-markup

Which element should I use for short group of foreign langague words?


I'm wondering which html element I should use in a sentence or a paragraph (let say a <p> block) for a borrowed word or one in a foreign language, refering to a valid semantic. Here a few examples :

In English

Tonight, I have a rendez-vous with a cute girl. (use of a French word)

He was not speaking loudly, but not more silently, indeed mezzo voce (use of an Italian word)

In French

Java n'est pas popriétaire, a contrario de .Net

In French, at least, this use of a foreign language require an italic formatting.

So I would like to combine both semantic and presentation. Wikipedia article on Semantic HTML give me a hint but I'm not convinced so far. Moreover, I might not have control over CSS, for instance in documentation (wiki), or in a description file (pom) Which element suit my requierements the best :

  • <i> (surely not :) )
  • <em> (maybe not :) )
  • <cite>
  • <span lang="latin">
  • <span class="borrowed">
  • combination of the above
  • another tag

Solution

  • W3C says

    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.

    My Emphasis

    Their example

     <p>There is a certain <i lang="fr">je ne sais quoi</i> in the air.</p>