HTML <code>

<code>はプログラムのコードであることを表すHTMLタグです。プログラムのコードは等幅フォントで表示されます。

書式

HTML要素のタグ名、属性名および属性値は、大文字と小文字のどちらでもよい。code 要素の終了タグは省略できない。

<code>
  <!-- phrasing content -->
</code>

<CODE>
  <!-- phrasing content -->
</CODE>

サンプル

HTMLタグ <code> の使用例と表示サンプルを次に示します。

<code>printf("Hello World");</code>

printf("Hello World");

改行を含む複数行のプログラム・コードを表示するには、pre 要素と code 要素を組み合わせる。

<pre><code>body {
  color: gray;
}</code></pre>

body {
  color: gray;
}

コンテンツモデル

code 要素の開始タグと終了タグの間には、フレージング・コンテンツを含むことができる。具体的には、以下に示す要素である。

• テキスト
• <a>
• <abbr>
• <area>（マップ要素の子孫である場合）
• <audio>
• <b>
• <bdi>
• <bdo>
• <br>
• <button>
• <canvas>
• <cite>
• <code>
• <data>
• <datalist>
• <del>
• <dfn>
• <em>
• <embed>
• <i>
• <iframe>
• <img>
• <input>
• <ins>
• <kbd>
• <label>
• <link>（本文中で許可されている場合）
• <map>
• <mark>
• <math>
• <meta>（itemprop 属性が存在する場合）
• <meter>
• <noscript>
• <object>
• <output>
• <picture>
• <progress>
• <q>
• <ruby>
• <s>
• <samp>
• <script>
• <select>
• <slot>
• <small>
• <span>
• <strong>
• <sub>
• <sup>
• <svg>
• <template>
• <textarea>
• <time>
• <u>
• <var>
• <video>
• <wbr>
• 自律型カスタム要素

属性

次に示す属性をcode要素に指定できる。

accesskey

アクセスキー

class

CSSのクラスを指定する。空白で区切って、複数のクラスを指定できる。

data-*

カスタムデータ属性を指定する。カスタムデータ属性とは、JavaScript から要素独自の属性を読み取るための仕組みである。

dir

文章が流れる方向

id

HTML文書内で一意な識別子を指定する。

lang

言語を指定する。lang 属性で指定するのは自然言語であり、マークアップ言語やプログラミング言語の種類を指定する訳ではない。code 要素はマークアップ言語やプログラミング言語を表すため、lang 属性を指定する必要性は無い。

style

CSSのプロパティを指定する。セミコロンで区切って、複数のプロパティを指定できる。

<code style="color: gray">let e = document.getElementById('example');</code>

let e = document.getElementById('example');

title

ツールチップに適切な、要素のためのアドバイザリ情報を指定する。コードの脚注や解説となる。

JavaScript

JavaScriptからは HTMLElement インタフェースを通じて code 要素へアクセスできる。

dir

dir 属性

document.querySelector("code").dir = "ltr";

draggable

draggable 属性

document.querySelector("code").draggable = false;

lang

lang 属性

document.querySelector("code").lang = "en";

style

style 属性

document.querySelector("code").style = "color: gray";

tabIndex

tabindex 属性

document.querySelector("code").tabIndex = 0;

title

title 属性

document.querySelector("code").title = "JavaScript";

参考文献

Web Hypertext Application Technology Working Group (2023) Text-level semantics HTML Living Standard