Aller au contenu

Citer du code en HTML


karnabal

Sujets conseillés

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 ?

Lien vers le commentaire
Partager sur d’autres sites

Bonjour,

Tu remplaces les < par des & l t ; et les > par des & g t ; (sans les espaces) et ça devrait le faire. ;)

Jean-Luc

Modifié par Jeanluc
Lien vers le commentaire
Partager sur d’autres sites

<code> c'est pour le HTML ?

Pour bien faire, que choisir ?

<code>
Blabla Blah.</code>

Blabla Blah.

Modifié par karnabal
Lien vers le commentaire
Partager sur d’autres sites

Salut,

bon en partant de ton propre exemple, si tu veux présenter la ligne de code suivante

Blabla Blah.

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 :

Blabla Blah.

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>
<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 :

<p>
<code><p>Blabla Blah.</p></code>
</p>

En espérant t'avoir aidé, ++

Lien vers le commentaire
Partager sur d’autres sites

Mieux que ça clochette, tu as exaucé mon voeux ! :P

Merci pour cette explication si complète. :)

Sinon le display:block pour <code> est aussi possible je pense.

Lien vers le commentaire
Partager sur d’autres sites

Salut

Le plus simple (et le plus recommandé) est d'imbriquer les deux balises <pre> et <code>.

Comme ceci

<pre><code><p>Blabla Blah.</p></code></pre>

D'ailleurs, une citation HTML n'est pas sémantiquement parlant un paragraphe ;)

Lien vers le commentaire
Partager sur d’autres sites

Salut,

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.

Salut

Le plus simple (et le plus recommandé) est d'imbriquer les deux balises <pre> et <code>.

Comme ceci

<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.

Modifié par wonderclochette
Lien vers le commentaire
Partager sur d’autres sites

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" ;)

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 :P)
  • 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

PS: l'autre signification de <p> est aussi de baliser un paragraphe de texte, mais on m'a peut-être menti :blush:

A+ :)

Lien vers le commentaire
Partager sur d’autres sites

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.

Modifié par wonderclochette
Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...