Widely available すべての主要ブラウザで対応済み。安心して使用可能。

<code>

<code> は HTML の要素で、コンピューターコードの短い断片の文字列であると識別できるような外見のコンテンツを表示します。既定では、中の文字列がユーザーエージェントの既定の等幅フォントを使用して表示されます。

テキスト・構造

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
<code>
1
12
1
≤4
18
≤3.2
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

HTML 
<p><code>console.log()</code> You can generate debug output.</p>
<pre><code>function greet(name) {
  return `Hello, ${name}!`;
}</code></pre>

ライブデモ

インラインコード

code 要素で文中にコードを埋め込む。関数名や変数名の表示に。

プレビュー全画面表示

コードブロック

pre と code を組み合わせて複数行のコードを表示。

プレビュー全画面表示

コマンドライン表示

ターミナルコマンドをコード要素で表示するパターン。

プレビュー全画面表示

実務での使いどころ

  • <code> の活用

    <code> は HTML の要素で、コンピューターコードの短い断片の文字列であると識別できるような外見のコンテンツを表示します。

注意点

  • 古いブラウザでは対応していない場合がある。

アクセシビリティ

  • スクリーンリーダーでの読み上げを確認すること。

参考リンク