【HTML】samp要素の使い方【プログラムを実行した際の出力結果を示します】

Program

samp要素を使えば、プログラム実行時の出力結果であることをマークアップできます。

samp要素の基本的な使い方

まずは、以下のプログラムと、ブラウザでの表示結果を見てください。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>samp要素</title>
</head>
<body>
<p>
<samp>
ページが見つかりません。
お探しのページは、移動または削除された可能性があります。
</samp>
</p>
</body>
</html>

body要素の中に、「文のかたまり(段落)」を示すp要素があります。

p要素の中には、プログラム実行時の出力結果の一例として、「ページが見つかりません。お探しのページは、移動または削除された可能性があります。」と書かれた文章があります。

そして、「ページが見つかりません。お探しのページは、移動または削除された可能性があります。」と書かれた文章は、samp要素でマークアップされています。

ブラウザの表示結果を見ると、p要素の中に含まれる文章は、シンプルにp要素でマークアップされた状態と変わりなく、そのまま表示されています。

しかし、samp要素でマークアップされた文章は、プログラム実行時の出力結果として、ブラウザに認識されると共に、クローラーに補足されて検索エンジンに収集されることになります。

なお、プログラム実行時の出力結果の一例である「ページが見つかりません。お探しのページは、移動または削除された可能性があります。」は、HTMLとして記述した通り、本来は、2行にまたがって表示される結果であります。

「プログラム実行時の出力結果」に改行を含めて表示できるか?

では、samp要素でマークアップされた文章に、改行を含めて表示してみましょう。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>samp要素</title>
</head>
<body>
<p>
<pre>
<samp>
ページが見つかりません。
お探しのページは、移動または削除された可能性があります。
</samp>
</pre>
</p>
</body>
</html>

先ほどのプログラムについて、samp要素のブロックをpre要素で囲んで(マークアップして)みました。

pre要素は、「スペース」や「改行」をそのまま表示する機能があるため、ブラウザの表示結果の通り、「ページが見つかりません。」というフレーズと、「お探しのページは、移動または削除された可能性があります。」というフレーズは、改行されて異なる行として表示できました。

pre要素を使う際の注意点

ここで、次のプログラムによる表示結果を見てください。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>samp要素</title>
</head>
<body>
<p>
<pre>
    <samp>
    ページが見つかりません。
    お探しのページは、移動または削除された可能性があります。
    </samp>
</pre>
</p>
</body>
</html>

先ほどのプログラムについて、samp要素のブロックにインデントを加えてみました。つまり、HTMLのプログラムにて、タブスペース1つ分、右側にずらして記述しました。

そうすると、ブラウザの表示結果として示す通り、「ページが見つかりません。」というフレーズと、「お探しのページは、移動または削除された可能性があります。」というフレーズは、先ほどのプログラムと比べて、右側にタブスペース1つ分、移動した位置に表示されることになりました。

これは、「スペース」や「改行」を忠実にブラウザの表示結果に反映するpre要素の機能が働いたための結果といえます。このため、pre要素を使う際には、ブラウザでの表示結果を確認しつつ、HTMLのプログラムを記述していく必要があります。

各種ブラウザでの表示結果

また、samp要素の各種ブラウザにおける最新のサポート状況は、以下のようになってます。

【HTML】Internet ExplorerGoogle ChromeMicrosoft EdgeSafariFirefoxOpera
samp要素
〇:サポートあり、△:制限あり、×:サポートなし。?:不明

以上、samp要素の使い方について、ご参考になさってくださいねー。

タイトルとURLをコピーしました