<samp要素> - 出力
公開日:
samp要素は、出力を表す要素です。ブラウザやコマンドプロンプトなどの画面に表示される文字列をマークアップするのに適しています。
概要
- 名前
- samp (Sample output)
- カテゴリー
- Flow content
- Phrasing content
- Palpable content
- 配置できる場所
- Phrasing contentが期待される場所。
- コンテンツモデル
- Phrasing content。
- タグの省略
- 開始タグも終了タグも省略できません。
- DOM Interface
- HTMLElement
- デフォルトのスタイル
samp { font-family: monospace; }
- 仕様書
- https://html.spec.whatwg.org/multipage/semantics.html#the-samp-element
属性
グローバル属性
全てのタグで利用できるグローバル属性を指定できます。
説明
下記は、エラーの解決を求める文章をマークアップした例です。画面に表示された文字列をマークアップしています。
HTML
<p>今日、プログラムを実行したら、<samp>Parse error: syntax error</samp>というエラーが出てしまった。どなたか原因が分かる人はTwitterなどで教えて下さい。</p>
出力の内容に例えば、キーボードの入力を促す文字列がある場合、それをkbd要素でマークアップするのは適切です。同じように、出力に変数の文字列があれば、var要素でマークアップして問題ありません。
HTML
<p>Linuxで、次のように管理者権限にアクセスしましょう。</p>
<!-- samp要素がkbd要素を子孫に持つ -->
<pre><samp>[ec2-user@ip-999-99-9-999 ~]$ <kbd>sudo -s</kbd>
[root@ip-999-99-9-999 ec2-user]# </samp></pre>
サンプルコード
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>【デモ】<samp要素> - 出力</title>
<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/samp/">
<style>
body {
background-color: #fff ;
}
</style>
</head>
<body>
<p>samp要素は、出力を表す要素です。画面に表示される文字列をマークアップする時に利用しましょう。</p>
<p>パソコンで<code>AAA</code>と入力した時、画面には<samp>Success!!</samp>と表示されるでしょう。</p>
</body>
</html>