HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLでサンプルのコンピューターコードを表示するには？sampタグの使い方を解説

Webページ上にプログラムの出力例やサンプルコードを表示したい場合は、HTMLの<samp>タグを使用します。<samp>タグは、コンピュータープログラムが出力した結果（サンプル出力）を意味的に示すためのタグです。

sampタグとは

<samp>は「sample output」の略称で、多くのブラウザーでは等幅フォント（モノスペースフォント）で表示されます。よく似たタグに<code>がありますが、<code>がソースコードそのものを表すのに対し、<samp>は「プログラムを実行した際に出力される結果」を表すという違いがあります。用途に応じて使い分けることで、検索エンジンやスクリーンリーダーにも内容が正しく伝わりやすくなります。

使用例

以下のコードを実行して、<samp>タグの実際の表示を確認してみましょう。

<!Doctype html>
<html>
  <head>
    <title>HTML sampタグ</title>
  </head>
  <body>
    <p>ヘッダーファイルは必ず <samp>#include</samp> から始まります。</p>
  </body>
</html>

このHTMLファイルをブラウザーで開くと、「#include」の部分が等幅フォントで表示されます。これにより、そのテキストがプログラムの出力サンプルであることが、見た目にも意味的にも明確になります。

  1. HTMLコードで動画を埋め込む方法｜iframeタグの使い方をわかりやすく解説

    HTMLページに動画を埋め込むには、<iframe>要素を使用します。src属性には動画のURL（埋め込みリンク）を指定し、width属性とheight属性で動画プレーヤーのサイズを適切に設定しましょう。動画の埋め込みリンクとは？ここでいう「動画のURL」とは、動画そのものへのリンクではなく、埋め込み用リンクのことです。本記事では、例として最も利用されているYouTubeの動画を埋め込む手順を紹介します。埋め込みリンクを取得するには、まずYouTubeで対象の動画を開き、以下の手順で操作します。動画下部にある「共有」ボタンをクリックする表示されたメニューから「埋め込む」を選択する埋

  2. HTMLのコンピュータコード用要素とは？kbd・pre・code・var・sampの使い方を解説

    Webページ上にコンピュータのコードやプログラム関連のテキストを表示するために、HTMLにはいくつかの専用要素が用意されています。この記事では、代表的な以下の5つの要素について、サンプルコードと出力結果をもとにひとつずつわかりやすく解説します。 <kbd>：キーボード入力 <pre>：整形済みテキスト <code>：プログラムコード <var>：数式の変数 <samp>：プログラムの出力例 HTMLの<kbd>要素（キーボード入力） <kbd>タグは、キーボードからの入力を表すための要素です。ユーザーにキー