<code要素> - コンピューターのコード
公開日:
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>