<code> プログラムやスクリプトとして意味付ける

<code>タグの説明

<code>は、このタグで囲んだ文字列をプログラムのソースコードとして扱う時に使用します。対応しているブラウザでは、囲まれた部分が等幅フォントで表示されます。

<code>のみで囲った場合は、単一のフレーズや一行で終わるコードの断片を表します。複数行に渡るコードを表す場合には、親要素に<pre>を追加して下さい。

<code>タグの特徴

• レイアウトの初期値はインラインです。文章の改行には影響を与えません。
• 視覚的な効果として等幅フォントが適応されます。変更したい場合はスタイルシートで調整して下さい。
• 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。

<code>に指定できる主な属性

グローバル属性

全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。

イベントハンドラ

全てのHTML要素に指定できるコンテンツ属性です。

<code>の使い方とサンプル

文章の中でプログラミング用語を使う場合は、<code>で囲うと境界が明確になります。

<p>
PHPで変数の中身を参照するには、<code>echo</code>や<code>print</code>を使います。
</p>

スタイルシートで見た目を調整すると、利用者の可読性が増します。

<div class="code_sample">
	<p>PHPで変数の中身を参照するには、<code>echo</code>や<code>print</code>を使います。</p>
</div>

.code_sample code {
	width: fit-content;
	margin: 0 .2rem;
	padding: .2em .4em;
	background-color: #eee;
	border-radius: 2px;
}

複数行に渡るコードを表現する場合には、親要素に<pre>を追記します。

<div class="code_sample">
<pre><code>
<?php
	echo "テスト";
?>
</code></pre>
</div>