Styler un mot ou 2 dans un <p>aragraphe ?

Salut,
voila aprés des recherches sur ce forum et google et pas de réussite, je viens en malheureux débutant pour savoir comment mettre un mot en vert et italique dans un paragraphe?

<div id="premierParagraphe">
<p> la première ligne de mon joli paragraphe trés court </p>
<p> la deuxième et dernière ligne de mon paragraphe qui est fini</p>
</div>

si je veux "joli" en vert et italique, comment dois-je faire?
Modifié par jay_1985 (05 Feb 2011 - 17:08)

Bonjour,

<div id="premierParagraphe"> 
<p> la première ligne de mon <em class="highlight-word">joli</em> paragraphe trés court </p> 
<p> la deuxième et dernière ligne de mon paragraphe qui est fini</p> 
</div>

.highlight-word {
color : green;
}

super merci rs459!

Salut,

Perso, je n'aime pas cette écriture. Si l'on veut séparer le fond de la forme, il serait plus judicieux de faire ceci :

<div class="block"> <!-- premier paragraphe ça n'a pas de sens [cligne] --> 
<p> la première ligne de mon <span class="colorer italique">joli</span> paragraphe trés court </p> 
<p> la deuxième et dernière ligne de mon paragraphe qui est fini</p> 
</div> 

.colorer{color : green;}
.italique{font-style:italic}

;)
Modifié par niuxe (06 Feb 2011 - 02:28)

Bonjour,

Je ne suis pas d'accord avec toi sur ce point.

Cette méthode ne permet pas une mise en avant pour un lecteur braille. De plus les "em" sont pris en compte par les moteurs de recherche, pour le référencement.

Ensuite la séparation présentation / contenu est déjà entachée dans un cas comme dans l'autre. (Plus dans mon cas c'est vrai.)

Je dirais pour conclure mon point de vue, que tout dépend du contexte.

Cordialement.

rs459 a écrit :
Bonjour,

Je ne suis pas d'accord avec toi sur ce point.

Cette méthode ne permet pas une mise en avant pour un lecteur braille. De plus les &quot;em&quot; sont pris en compte par les moteurs de recherche, pour le référencement.

Ensuite la séparation présentation / contenu est déjà entachée dans un cas comme dans l'autre. (Plus dans mon cas c'est vrai.)

Je dirais pour conclure mon point de vue, que tout dépend du contexte.

Cordialement.

....
Modifié par niuxe (06 Feb 2011 - 15:00)

niuxe a écrit :


....

Bonjour,

Tu peux approfondir ?

Séparer le contenu de la forme je suis d'accord, mais il ne faut pas non plus retirer le sens sémantique des balises.

Dans un cas comme celui là ok :

<p><span class="c1">J'aime</span><span class="c2">le</span>
<span class="c3">Reggae</span>

.c1 {color: vert;}.c2{color:jaune;}.c3{color:rouge;}

mais pas dans un cas comme cà :

<p>Ce produit présente l'avantage d'être
 <span class="colored italic">compatible</span> avec tout et n'importe quoi</p>

Modifié par rs459 (07 Feb 2011 - 07:10)

Les éléments : i, b, em, strong sont dépréciés/obsolètes.

Au passage, vert, jaune, rouge n'existent pas. Je pense que tu veux dire, green, yellow, red ?
Modifié par niuxe (07 Feb 2011 - 01:49)

http://webdesign.about.com/od/htmltags/a/bltags_deprctag.htm Ce lien indique les balises DEPRECATED en html4 et xhtml1.

<b> <i> sont bien deprecated en xhtml1 et html5, mais pas encore en html4.01, même si c'est à déconseiller puisqu'elles sont uniquement dédiées à la mise en forme.

<em> marque une emphase. <strong> une forte emphase. En html5 <strong> est redéfini pour définir un texte important, tandis que <em> reste utilisé pour marquer une emphase (sauf changement).

http://www.alsacreations.com/article/lire/552-strong-b-em-i-quelle-balise-utiliser-et-pourquoi.html

Oui vert jaune rouge, bien sur j'ai fait vite pour répondre.

Toujours très cordialement.
Modifié par rs459 (07 Feb 2011 - 07:09)

Je pense que tu n'as pas lu/vu cet article aussi. Certes em, i, b, strong, etc. ne sont pas mentionnés mais tu comprendras pourquoi j'ai argumenté mes réponses ci-dessus.

Bien à toi

Bonjour,

Je suis d'accord avec rs459 : s'il s'agit de mettre en valeur une partie du texte, il faut faire en sorte que l'information ne soit pas perdue sans les CSS (pas de "span class" donc). Le choix entre b, i, strong, em, ... est me semble-t-il de moindre importance.

Bonjour à tous,

A la lecture du premier message de ce sujet, l'utilisation d'un élément span est beaucoup plus pertinente que l'usage b, i, strong, em, ...

La demande est purement esthétique et non sémantique.

Romain

PS : il me semble également que la mise en forme actuelle (italique) de l'élément em n'est pas assurée dans le temps (je me trompe peut être hein ).
Modifié par yodaswii (07 Feb 2011 - 14:41)

niuxe a écrit :
Je pense que tu n'as pas lu/vu cet article aussi. Certes em, i, b, strong, etc. ne sont pas mentionnés mais tu comprendras pourquoi j'ai argumenté mes réponses ci-dessus.

Bien à toi

C'est peut être moi aussi qui me suis mal exprimé, j'ai terminé par tout dépend du contexte, alors que ca aurait du être mon introduction.

Si en effet son unique but est de mettre une portion de texte, sans aucun intérêt sémantique en valeur, alors oui ta solution est bien meilleure.J'aurais surement du lui proposer les deux méthodes.

En revanche j'ai l'impression que tu te trompes lorsque tu mélanges sans aucune distinction <strong> et <em> avec <i> et <b>. Les deux premieres ne seront pas obsolètes,ni dépreciées puisqu'elles donnent un sens au contenu, alors que les deuxièmes elles, sont totalement vouées à disparaitre, du au fait qu'elles ne remplissent qu'un obkectif de mise en forme.

yodaswii a écrit :
PS : il me semble également que la mise en forme actuelle (italique) de l'élément em n'est pas assurée dans le temps (je me trompe peut être hein cligne ).

Effectivement d'ailleurs la recommandation demande de ne pas considérer em comme une balise dédiée à la mise en italique. (niuxe va me prendre pour un skyzo )

Draft Html5

L'emphase est rudement interréssante pour un lecteur d'écran (et en référencement). Pour avoir entendu Jaws une fois, je peux dire franchement que l'emphase aère/égaille franchement le "lecteur" aveugle, avec des intonations de voix, un peu comme un line-height cohérent avec quelques images rompent la monotonie et nous donne envie de revenir, comparé à un site ou tout le contenu est amorphe/mal aéré.
Modifié par rs459 (08 Feb 2011 - 07:00)