HTML のサンプル要素 (<samp>) は、コンピュータープログラムからのサンプル出力を表す行内文字列を含めるために使用されます。内容は普通、ブラウザーの既定の等幅フォント(Courier や Lucida Console など)を使用して表示されます。

コンテンツカテゴリ フローコンテンツ, 記述コンテンツ, 知覚可能コンテンツ
許可されている内容 記述コンテンツ
タグの省略 不可。開始と終了タグの両方が必要。
許可されている親要素 記述コンテンツを受け入れるすべての要素
許可されている ARIA ロール すべて
DOM インターフェイス HTMLElement

属性

この要素にはグローバル属性以外の属性はありません。

使用上のメモ

CSS 規則を定義して <samp> 要素におけるブラウザーの既定フォントを上書きすることができますが、ブラウザーの設定を指定した CSS よりも優先させることも可能です。

既定のフォントを上書きする CSS は次のようになります。

samp {
  font-family: "Courier";
}

ウェブサイトや JavaScript コードによって生成された出力を含めるコンテナーとして提供する要素が必要であれば、代わりに <output> 要素を使用してください。

基本的な例

この単純な例では、段落にプログラムの出力の例を含めます。

<p>When the process is complete, the utility will output the text
<samp>Scan complete. Found <em>N</em> results.</samp> You can then
proceed to the next step.</p>

結果の出力は次のようになります。

ユーザー入力を含むサンプル出力

<samp> ブロックの中で <kbd> 要素を使用することで、ユーザーが入力した文字列を含んだ例を表現することができます。例えば、 Linux (または macOS)のコンソールセッションを表現したこのテキストを考えてみてください。

HTML

<pre>
<samp><span class="prompt">mike@interwebz:~$</span><kbd>md5 -s "Hello world"</kbd>
MD5 ("Hello world") = 3e25960a79dbc69b674cd4ec67a72c62

<span class="prompt">mike@interwebz:~$</span> <span class="cursor">█</span></samp></pre>

なお、 <span> を使用して、シェルのプロンプトやカーソルのような、サンプル文字列の中にある特定の部分の表示ができるようにしています。また、 <kbd> を使用して、サンプル文字列の中のプロンプトでユーザーが入力したコマンドを表現しています。

CSS

実現したい表示を達成するための CSS は次の通りです。

.prompt {
  color: #b00;
}

samp > kbd {
  font-weight: bold;
}

.cursor {
  color: #00b;
}

これはプロンプトとカーソルにわずかに着色し、サンプル文字列の中のキー入力を太字にしています。

結果

結果の出力は次のようになります。

仕様書

仕様書 状態 備考
HTML Living Standard
<samp> の定義
現行の標準  
HTML5
<samp> の定義
勧告  
HTML 4.01 Specification
<samp> の定義
勧告  

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応

関連情報