HTML Living Standard/samp

samp 要素

<samp>要素は、サンプル出力を表現するためのインライン要素です。この要素は、コンピュータプログラムやシステムによって生成された出力を示す際に使用されます。

定義

<samp>要素は、ユーザーが入力したデータやプログラムの結果として表示されるテキストをマークアップするために利用されます。通常、出力結果を他のテキストと区別して表示します。

使用方法

以下は、<samp>要素の基本的な使用例です。

<p>次のコマンドを実行すると、次のような出力が得られます：</p>
<pre><samp>
Hello, World!
</samp></pre>

このコードは以下のように表示されます：

Hello, World!

属性

<samp>要素自体には特定の属性はありませんが、グローバル属性を使用することが可能です。

使用例

サンプル出力の表示

以下は、プログラムのサンプル出力を表示する例です：

<p>プログラムの出力:</p>
<pre><samp>
Error: File not found.
</samp></pre>

ターミナル出力の表現

ターミナルやコマンドライン出力を示す場合にも役立ちます。

<p>コマンドの実行結果:</p>
<pre><samp>
$ ls -l
total 0
-rw-r--r--  1 user  group  0 Jan  7 12:00 file1.txt
-rw-r--r--  1 user  group  0 Jan  7 12:00 file2.txt
</samp></pre>

対話型プログラムの出力

以下のように、ユーザー入力とプログラム出力を区別して表示することもできます。

<p>ユーザー入力と出力例:</p>
<pre>
$ <kbd>ping localhost</kbd>
<samp>Pinging localhost with 32 bytes of data:
Reply from 127.0.0.1: bytes=32 time<1ms TTL=128
</samp>
</pre>

注意事項

<samp>要素は、意味論的に出力を示すものであり、視覚的なスタイリングは付与されていません。そのため、CSSを用いて適切なスタイルを設定することが推奨されます。
他の要素（例：<code>や<pre>）と組み合わせることで、文脈に応じたより効果的な表現が可能です。

アクセシビリティ

<samp>要素はスクリーンリーダーで明確に区別されることがあるため、サンプル出力がコンテキスト上重要な場合は適切に使用してください。
プログラム出力に関連する文脈を説明するラベルや補足テキストを提供することで、可読性とアクセシビリティが向上します。

スタイリング

CSSを使用して<samp>要素をスタイリングすることが可能です。以下は例です：

samp {
  font-family: "Courier New", monospace;
  background-color: #f4f4f4;
  padding: 2px 4px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

このスタイリングにより、<samp>要素が他のテキストから視覚的に区別され、出力としての意味が強調されます。

使用上のヒント

プログラムやシステムの出力を示す際に<samp>要素を使用することで、コード例や出力結果がより分かりやすくなります。
視覚的な強調が必要な場合は、適切なスタイリングを適用してください。