HTML Living Standard/code

CODE要素

<code>要素は、HTMLでプログラムコードやコードスニペットを表示するために使用されるインライン要素です。通常は固定幅のフォントで表示され、プログラミングやコーディング関連の文書作成に適しています。

定義

<code>要素は、プログラムコードやアルゴリズムの一部をマークアップするために使用されます。意味論的には、「この部分はコードである」という情報を伝えます。

使用方法

以下は、<code>要素の基本的な使用例です。

<p>以下はJavaScriptの例です： <code>console.log("Hello, World!");</code></p>

この例では、console.log("Hello, World!");がコードとしてマークアップされ、通常は固定幅フォントで表示されます。

属性

<code>要素自体にはグローバル属性以外の特別な属性はありません。しかし、他の要素やCSSを組み合わせることで、表示方法を柔軟に変更できます。

使用例

基本的な使用例

<p>HTMLの例: <code>&lt;!DOCTYPE html&gt;</code></p>
<p>Pythonの例: <code>print("Hello, World!")</code></p>

入れ子にした使用例

<code>要素は他のインライン要素と組み合わせて使用できます。

<p>以下は変数名<code>my_variable</code>を使用した例です。</p>

複数行コードの例

複数行のコードを表示するには、<pre>要素と組み合わせるのが一般的です。

<pre><code>
function fibonacci(n) {
  if (n === 0) {
    return 0;
  } else if (n === 1) {
    return 1;
  } else {
    return fibonacci(n - 1) + fibonacci(n - 2);
  }
}
</code></pre>

このようにすることで、改行やインデントが保持された状態で表示されます。

注意事項

<code>要素内に単純なコードスニペットを含める場合、エスケープ処理（例：<, >）が必要です。
長いコードブロックには、<pre>要素と組み合わせることを推奨します。
<code>要素はインライン要素であるため、段落やその他のブロック要素内に配置します。

アクセシビリティ

スクリーンリーダーでは、<code>要素を特別に読み上げることがあるため、適切な説明を補足することが推奨されます。
コードの内容が長い場合は、<pre>要素やスクロール可能なブロックを使用して読みやすさを確保しましょう。

スタイリング

CSSを使って<code>要素をカスタマイズできます。例えば、以下のようにスタイルを設定できます：

code {
  font-family: "Courier New", monospace;
  background-color: #f5f5f5;
  padding: 2px 4px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

これにより、コードスニペットが視覚的に区別され、読みやすくなります。