67

HTML5のドキュメントでは、要素を要素内に配置することを推奨していcodeますpreが、コード要素とCSSを使用するよりも、これがどのように優れているか、よりセマンティックであるかがわかりません。彼ら自身の例では：

<pre><code class="language-pascal">var i: Integer;
begin
   i := 1;
end.</code></pre>

書くこともできます（ブラウザのデフォルトについていくつかの仮定をしますpre）：

<style>
code {
    display: block;
    white-space: pre;
}
</style>
…
<code class="language-pascal">var i: Integer;
begin
   i := 1;
end.</code>

コードブロックpreをコードのインライン文字列と区別するために存在する場合でも、クラスでのブロック性を指定するよりもセマンティックな選択であるとは思いません。code

preCSSソリューションよりも推奨される特定の理由はありますか？

4

4 に答える 4

74

<code>は「コンピューター コードの断片」のみを表します。もともとは、i++やのような単純なコード スニペット用に考えられていまし<code>た。

<pre> 「要素ではなく印刷規則によって構造が表される、フォーマット済みテキストのブロックを表します」 . 当初の目的は、まさにこれに他なりませんでした: 作者によって与えられたのと同じ方法でテキストを提供します。

+---------------------------------+
| | | |
| | 警告！事前に整形されたテキスト！| | =o=
| | __; ~^
+----------------TT------------°
                 || ______________ _____________________
                 || | | おばあちゃんへ > | 完全にトラップではありません >
  || オオオ || |°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°          
   | | || || | | | | 。んん、                    
~"""~"""~""~""~"""~"""~~""~"""~""~"""~""~"""~ """~"""~"""~""..MWMWc...~"""~""

相互に使用する必要はありません。<pre>独自の役割があるよう<code>に、独自の役割があります。ただし、<pre>指定されたフラグメントの空白が重要であることを知らせる方法であり、<code>欠落している役割です。

ただし、質問に戻ります。正確な文言に注意してください。

次の例は、 and要素を使用してコード ブロックをマークアップする方法を示しています。precode

<pre><code class="language-pascal">var i: Integer;
begin
   i := 1;
end.</code></pre>

この例では、使用する言語を示すためにクラスが使用されています。

それは、できた、すべきではないと言っています。これをどうするかは自由です。W3C では決して推奨されていませんが、個人的には を使用することをお勧めします<pre><code>...。

さらなる説明

空白がコードおよびコードの構造の一部である場合は常に、この構造を維持する必要があることを示す必要があります。コードの構造はタイポグラフィの規則 (タブ、改行、スペース) によって与えられるため、個人的には を使用することをお勧めし<pre><code>ます。しかし、空白がないとコードが不完全になる場合はいつでも必要です。

それとは別に、 をチェックせずにインライン コードとコード ブロックを簡単に区別できます。element.className一部の JS 構文ハイライターは、非常にうまく機能し<pre><code>...、<code>自動的に削除されます。

また、<code>withの一般的なルールを使用する場合white-space:pre;、追加のクラスなしでインライン スニペットに使用することはできません。代わりにクラスを作成した場合、 に比べて何も得られません<pre><code>。

参考文献

  • W3C: HTML5: 4.5.12 コード要素(W3C 勧告 2014 年 10 月 28 日)

    code要素は、コンピューター コードのフラグメントを表します。これは、XML 要素名、ファイル名、コンピューター プログラム、またはコンピューターが認識するその他の文字列である可能性があります。

  • W3C: HTML5: 4.4.3 pre 要素(W3C 勧告 2014 年 10 月 28 日)

    pre要素は、書式設定済みのテキストのブロックを表し、構造は要素ではなく、印刷規則によって表されます。

于 2012-07-31T15:08:29.080 に答える
12

CSSはプレゼンテーション用です。

多くのプログラミング言語では、空白は重要です (表示上のものではありません)。

于 2012-07-31T14:58:00.730 に答える
4

コンピューター コードのブロックを表すために、pre 要素を code 要素と共に使用できます。

コンピューター出力のブロックを表すために、 pre 要素を samp 要素と共に使用できます。

<pre><code>ラップしてはならないブロックコード用。<code>ラップできるインライン コードに使用します。

タグで囲まれたテキスト内の改行と空白は<pre>、ブラウザーに表示されるときに html ドキュメント内の状態のまま維持されます。ブラウザーは通常、<pre>テキストを固定ピッチ フォントでレンダリングし、 whitespace.

于 2012-07-31T15:03:53.067 に答える
0

<pre>改行を示します！

これにより、nl2br() などの php 関数を使用したり<br />、すべての行末に手動で追加したりすることができなくなります。

よろしく、ゴースト

于 2012-07-31T15:06:19.873 に答える