Salut,
Ma recherche n'a rien donné. Comment citer du code en HTML ? J'ai bien vu l'utilisation d'une balise <pre> dans du code source qui citait du code HTML mais quand j'ai essayé de citer mon HTML se fut peine perdue !
Pouvez-vous me dire comment faire ?
Version complète: sur le forum Webmaster Hub : Citer du code en HTML
Bonjour,
Tu remplaces les < par des & l t ; et les > par des & g t ; (sans les espaces) et ça devrait le faire.
Jean-Luc
Tu remplaces les < par des & l t ; et les > par des & g t ; (sans les espaces) et ça devrait le faire.
Jean-Luc
Il faut utiliser la fonction htmlentities() si tu programmes en php.
Il ya aussi <XMP> </XMP> ou placer le texet dans un <textarea> </textarea>
Dans tous les cas, il faudra transformer les caractères spéciaux en entités html via htmlentities (pour le php) par exemple.
Salut,
1) La balise XMP n'existe pas en html : la liste des balises html
2) Il existe une balise <code> faite pour ça
1) La balise XMP n'existe pas en html : la liste des balises html
2) Il existe une balise <code> faite pour ça
<code> c'est pour le HTML ?
Pour bien faire, que choisir ?
Pour bien faire, que choisir ?
CODE
<code><p>Blabla Blah.</p></code>
CODE
<p>Blabla Blah.</p>
Salut,
bon en partant de ton propre exemple, si tu veux présenter la ligne de code suivante
alors la première chose à faire c'est d'éviter l'interprétation des couples de chevrons < et > comme indiquant une balise html c'est pour ça qu'on fait :
Note : au passage et à tous. Une fois qu'on s'est occupé du chevron entrant via les caractères spéciaux c'est pas la peine de s' embêter avec les chevrons fermant... ceux ci ne peuvent pas être pris pour une fermeture de balise puisqu'il n'y a plus d'ouverture
Suite pour karnabal : maintenant ta ligne de code va être décrite comme telle d'un point de vue html c'est à celà que sert la balise <code>. Donc on aura :
pour finir une petite précaution quand même. La balise <code> est de type inline elle ne peut donc être notamment enfant direct de body et devrait dans cette configuration être placé dans une balise block (typiquement un <p>).
Donc pour que tu perçoives au mieux comment ton fragment de code va être traité dans le document html je pense que ceci est le plus pertinent :
En espérant t'avoir aidé, ++
bon en partant de ton propre exemple, si tu veux présenter la ligne de code suivante
CODE
<p>Blabla Blah.</p>
alors la première chose à faire c'est d'éviter l'interprétation des couples de chevrons < et > comme indiquant une balise html c'est pour ça qu'on fait :
CODE
<p>Blabla Blah.</p>
Note : au passage et à tous. Une fois qu'on s'est occupé du chevron entrant via les caractères spéciaux c'est pas la peine de s' embêter avec les chevrons fermant... ceux ci ne peuvent pas être pris pour une fermeture de balise puisqu'il n'y a plus d'ouverture
Suite pour karnabal : maintenant ta ligne de code va être décrite comme telle d'un point de vue html c'est à celà que sert la balise <code>. Donc on aura :
CODE
<code>
<p>Blabla Blah.</p>
</code>
<p>Blabla Blah.</p>
</code>
pour finir une petite précaution quand même. La balise <code> est de type inline elle ne peut donc être notamment enfant direct de body et devrait dans cette configuration être placé dans une balise block (typiquement un <p>).
Donc pour que tu perçoives au mieux comment ton fragment de code va être traité dans le document html je pense que ceci est le plus pertinent :
CODE
<p>
<code><p>Blabla Blah.</p></code>
</p>
<code><p>Blabla Blah.</p></code>
</p>
En espérant t'avoir aidé, ++
Mieux que ça clochette, tu as exaucé mon voeux ! 
Merci pour cette explication si complète.
Sinon le display:block pour <code> est aussi possible je pense.
Merci pour cette explication si complète.
Sinon le display:block pour <code> est aussi possible je pense.
Salut
Le plus simple (et le plus recommandé) est d'imbriquer les deux balises <pre> et <code>.
Comme ceci
D'ailleurs, une citation HTML n'est pas sémantiquement parlant un paragraphe
Le plus simple (et le plus recommandé) est d'imbriquer les deux balises <pre> et <code>.
Comme ceci
HTML
<pre><code><p>Blabla Blah.</p></code></pre>
D'ailleurs, une citation HTML n'est pas sémantiquement parlant un paragraphe
Salut,
Non ça ne peut pas convenir car display est une propriété css produisant des comportements. Ici il ne s'agit pas du tout de css ni de comportement mais de html et de type de balise. Et la règle c'est toute balise enfant direct de <body> doit être de type block. Or <code> est de type inline quelque soit le comportement que tu peux par ailleurs lui faire adopter d'un point de vue css.
Là il y a beaucoup à dire...
Rien du point de vue de la description/structuration html ne rend le choix de <pre> particulièrement pertinent ou recommandable, évidemment rien ne le rend non plus impertinent ou non recommandable. Et pour cause puisque rien dans cette balise n'apporte de signification particulière au contenu qu'elle inclue. Pourquoi ? Mais parce que c'est une balise de mise en page, une des seules qui soit restée dans la version strict du html (avec <br> par exemple).
L'usage de <pre> repose donc sur un choix, éventuellement tout à fait légitime, de rendu et pas du tout sur un choix de structuration/description pertinente (pour éviter le terme de sémantique
)
Concernant <p> maintenant. C'est sans doute une erreur que de vouloir trop attacher le sens de cette balise à sa traduction comme paragraphe. Du point de vue html <p> est la balise dont la seule signifation est d'arrêter la possibilité d'imbrication de balise block en étant elle même block.
Utiliser <p> c'est dire : ici un contenu structuré comme block et ne justifiant pas d'être lui même scinder en nouvelles unités de type block.
D'autres balises ont cette particularité, les <hn> par exemple, mais dans leur cas il s'agit bien d'une de leurs particularités. Pour <p> c'est carrémént sa signification... ... Et la seule.
Je résume ce point en appelant <p> la balise block atomique.
Tout ça pour dire que dans l'exemple que j'ai donné <p> convient parfaitement. Ce qui n'interdit évidemment pas l'usage d'autres balises suivant les contextes.
CITATION(karnabal @ mardi 7 novembre 2006, 23h57) 
Sinon le display:block pour <code> est aussi possible je pense.
Non ça ne peut pas convenir car display est une propriété css produisant des comportements. Ici il ne s'agit pas du tout de css ni de comportement mais de html et de type de balise. Et la règle c'est toute balise enfant direct de <body> doit être de type block. Or <code> est de type inline quelque soit le comportement que tu peux par ailleurs lui faire adopter d'un point de vue css.
CITATION(Dudu @ mercredi 8 novembre 2006, 02h16)
Salut
Le plus simple (et le plus recommandé) est d'imbriquer les deux balises <pre> et <code>.
Comme ceci
D'ailleurs, une citation HTML n'est pas sémantiquement parlant un paragraphe
Le plus simple (et le plus recommandé) est d'imbriquer les deux balises <pre> et <code>.
Comme ceci
HTML
<pre><code><p>Blabla Blah.</p></code></pre>
D'ailleurs, une citation HTML n'est pas sémantiquement parlant un paragraphe
Là il y a beaucoup à dire...
Rien du point de vue de la description/structuration html ne rend le choix de <pre> particulièrement pertinent ou recommandable, évidemment rien ne le rend non plus impertinent ou non recommandable. Et pour cause puisque rien dans cette balise n'apporte de signification particulière au contenu qu'elle inclue. Pourquoi ? Mais parce que c'est une balise de mise en page, une des seules qui soit restée dans la version strict du html (avec <br> par exemple).
L'usage de <pre> repose donc sur un choix, éventuellement tout à fait légitime, de rendu et pas du tout sur un choix de structuration/description pertinente (pour éviter le terme de sémantique
)Concernant <p> maintenant. C'est sans doute une erreur que de vouloir trop attacher le sens de cette balise à sa traduction comme paragraphe. Du point de vue html <p> est la balise dont la seule signifation est d'arrêter la possibilité d'imbrication de balise block en étant elle même block.
Utiliser <p> c'est dire : ici un contenu structuré comme block et ne justifiant pas d'être lui même scinder en nouvelles unités de type block.
D'autres balises ont cette particularité, les <hn> par exemple, mais dans leur cas il s'agit bien d'une de leurs particularités. Pour <p> c'est carrémént sa signification... ... Et la seule.
Je résume ce point en appelant <p> la balise block atomique.
Tout ça pour dire que dans l'exemple que j'ai donné <p> convient parfaitement. Ce qui n'interdit évidemment pas l'usage d'autres balises suivant les contextes.
CITATION(wonderclochette @ mercredi 8 novembre 2006, 12h58)
Rien du point de vue de la description/structuration html ne rend le choix de <pre> particulièrement pertinent ou recommandable, évidemment rien ne le rend non plus impertinent ou non recommandable. Et pour cause puisque rien dans cette balise n'apporte de signification particulière au contenu qu'elle inclue. Pourquoi ? Mais parce que c'est une balise de mise en page, une des seules qui soit restée dans la version strict du html (avec <br> par exemple).
L'usage de <pre> repose donc sur un choix, éventuellement tout à fait légitime, de rendu et pas du tout sur un choix de structuration/description pertinente (pour éviter le terme de sémantique)
Concernant <p> maintenant. C'est sans doute une erreur que de vouloir trop attacher le sens de cette balise à sa traduction comme paragraphe. Du point de vue html <p> est la balise dont la seule signifation est d'arrêter la possibilité d'imbrication de balise block en étant elle même block.
Utiliser <p> c'est dire : ici un contenu structuré comme block et ne justifiant pas d'être lui même scinder en nouvelles unités de type block.
D'autres balises ont cette particularité, les <hn> par exemple, mais dans leur cas il s'agit bien d'une de leurs particularités. Pour <p> c'est carrémént sa signification... ... Et la seule.
Je résume ce point en appelant <p> la balise block atomique.
Tout ça pour dire que dans l'exemple que j'ai donné <p> convient parfaitement. Ce qui n'interdit évidemment pas l'usage d'autres balises suivant les contextes.
Ne fermons tout de même pas le débat par des affirmations "poing-sur-la-table" L'usage de <pre> repose donc sur un choix, éventuellement tout à fait légitime, de rendu et pas du tout sur un choix de structuration/description pertinente (pour éviter le terme de sémantique
)Concernant <p> maintenant. C'est sans doute une erreur que de vouloir trop attacher le sens de cette balise à sa traduction comme paragraphe. Du point de vue html <p> est la balise dont la seule signifation est d'arrêter la possibilité d'imbrication de balise block en étant elle même block.
Utiliser <p> c'est dire : ici un contenu structuré comme block et ne justifiant pas d'être lui même scinder en nouvelles unités de type block.
D'autres balises ont cette particularité, les <hn> par exemple, mais dans leur cas il s'agit bien d'une de leurs particularités. Pour <p> c'est carrémént sa signification... ... Et la seule.
Je résume ce point en appelant <p> la balise block atomique.
Tout ça pour dire que dans l'exemple que j'ai donné <p> convient parfaitement. Ce qui n'interdit évidemment pas l'usage d'autres balises suivant les contextes.
Le choix de la balise <pre> est effectivement délicat vu que sa raison d'être implique directement son rendu visuel. De là à affirmer qu'il s'agit d'une balise de mise en page, il y a un pas. Je ne le franchis pas, et force est de constater -tu as d'ailleurs fait ce constat dans ton message- que ces chers messieurs du consortium w3 ne l'ont pas plus franchi.
Pourquoi je ne considère pas <pre> comme une balise purement présentative: parce que l'HTML a par nature l'art de supprimer les espaces et les sauts de lignes, et qu'il existe une balise pour encapsuler un contenu dont les espaces et sauts de lignes doivent être conservés. Ensuite libre à chacun d'appliquer à cette balise la règle CSS white-space:pre;, ce que les navigateurs font souvent par défaut. Ou bien d'afficher ça autrement (mais là, effectivement l'intérêt serait vraiment limité).
Dans le cas présent, on cherche à baliser du code preformatté: et bien.. pre et code.
Je vois ça comme ça..
À cela s'ajoute l'obligation d'un <br /> par ligne dans le cas où l'on se sert de <p>. C'est se compliquer la vie inutilement alors qu'on balise un contenu qui par définition est rempli d'indentations et autres sauts de ligne.. dans le cas où l'on ne souhaite pas l'assombrir (le "one-line scripting" est une stratégie d'obfuscation de code).
Pour tenter de finir sur une note moins "guéguerre d'opinions", je dirais en substance:
- que <p> reste un très bon choix néanmoins (mais je préfère <pre> comme on l'aura compris )
- qu'une autre technique courante consiste à considérer les lignes de code comme une liste numérotée. Çà peut se comprendre pour des raisons de lisibilité quand on cite un code en référant à une ligne en particulier, mais je ne suis pas fan de cette technique dans des cas de figure plus généraux. Graphiquement, il faut avouer que ça donne tout de même de bons résultats difficile à avoir avec <p(re)><code> même en bidouillant à fond la CSS: un exemple sur le site de Veerle Pieters
- Molly Holzschlag, loin d'être une débutante en matière de sémantique web, se pose la question. p or pre ?
- S'il n'existait qu'UNE et une seule méthode par cas de figure, ce serait la fête
A+
CITATION(Dudu @ mercredi 8 novembre 2006, 21h31)
Ne fermons tout de même pas le débat par des affirmations "poing-sur-la-table"
tu exagères quand même un peu Dudu. L'affirmation "poing sur la table" est quand même de ton fait au départ donc on répond un peu sur le même mode
Pour le reste je verrai demain parce que là je suis fatigué ce soir. Mais le sujet peut être très intéressant je trouve.
Molly pose une question très ouverte et sybilline et n'y répond pas au fait.
Pour <p> on ne t'a pas menti, simplement je pense que c'est une définition intuitive (en langage commun) de cette balise qui ne rend compte de rien de ses caractéristiques html.
Une des conséquences savoureuses de cela c'est l'admonestation que se prend le plus souvent le newby de la part du gourou quand il a l'idée tellement logique et naturelle de vouloir mettre une liste dans un paragraphe et que bien que n'ayant rien compris ledit newby se met bien ça dans la tête que "il n'y a pas le droit" et peut à son tour aller jouer au gourou.
Comme ça personne ne comprend rien mais les standards et la validation universelle sont sauvés... La belle affaire...
Avec ma définition de cette balise, les choses sont beaucoup plus signifiantes je trouve.
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.