＜code要素＞ - コンピューターのコード

公開日: 2017/02/09

code要素は、コンピューターのコードを表す要素です。コードは、プログラミングのコード、ファイル名、機械が認識できる何らかの文字列など様々です。

概要

名前

code

カテゴリー

Flow content

Phrasing content

Palpable content

配置できる場所

Phrasing contentが期待される場所。

コンテンツモデル

Phrasing content。

タグの省略

開始タグも終了タグも省略できません。

DOM Interface

HTMLElement

デフォルトのスタイル

code {
	font-family: monospace;
}

仕様書

https://html.spec.whatwg.org/multipage/semantics.html#the-code-element

属性

グローバル属性

全てのタグで利用できるグローバル属性を指定できます。

説明

code要素はコンピューターのコードを表す要素です。pre要素と一緒にプログラムのコードをマークアップするのが、典型的な使い方ではないでしょうか。

HTML

<p>PHPで次の関数を作っておくと便利かもしれません</p>

<pre><code>
// HTML5の仕様に合わせた文字のエスケープ
function h ( $str="" ) {
	if ( !is_string($str) ) {
		return $str ;
	}

	return htmlspecialchars( $str, ENT_HTML5, "utf-8" )
}
</code></pre>

サンプルコード

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>【デモ】＜code要素＞ - コンピューターのコード</title>
		<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/code/">
		<style>
			body {
				background-color: #fff ;
			}
		</style>
	</head>
	<body>

<p>code要素は、コンピューターのコードを表す要素です。</p>

<p>JavaScriptの<code>indexOf()</code>というメソッドは便利だ。</p>

<pre><code>
// 対象の文字列
var str = "あいうえお" ;

// 文字の位置を取得する
var indexNumber = str.indexOf( "う" ) ;
</code></pre>

	</body>
</html>

デモを開く

</head><body>までを含めて下さい。

<!DOCTYPE html> <html> <head> <base href="/612/"> <meta charset="utf-8"> <title>【デモ】＜code要素＞ - コンピューターのコード</title> <link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/code/"> </head> <body>

<p>code要素は、コンピューターのコードを表す要素です。</p> <p>JavaScriptの<code>indexOf()</code>というメソッドは便利だ。</p> <pre><code> // 対象の文字列 var str = "あいうえお" ; // 文字の位置を取得する var indexNumber = str.indexOf( "う" ) ; </code></pre>

</div> <script>...</script> </body> </html>

<style>

body { background-color: #fff ; }

</style>

</script>