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 要素の開始タグと終了タグの間にフレージング・コンテンツを含めることができる。

属性

次に示す属性を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 要素へアクセスできる。

HTMLElementインタフェースのプロパティ
プロパティ 型 説明
accessKey string accessKey属性
accessKeyLabel string 要素に割り当てられたアクセスキー（読取り専用）
contentEditable string contenteditable属性
isContentEditable boolean この要素が編集できるかどうか（読取り専用）
dataset DOMStringMap カスタムデータ属性
innerText string ノードに描画されるテキスト
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