htmlタグ｜code・samp・kbd・var・pre｜listing（廃止）

ホームページ（ウェブサイト）制作において、プログラミング言語のソースコードや、システムの出力結果、キーボードの入力指示などをユーザーへ正確に提示する場面があります。IT関連の事業や技術的な情報を発信するオウンドメディアでは、これらのテキストを記事内にそのまま記載することが頻繁に発生します。その際、通常の文章とは区別して、コンピューター関連の特殊なテキストであることを検索エンジンやブラウザに正しく伝えるために使用されるのが、HTMLの「code」「samp」「kbd」「var」そして「pre」といったタグです。

「code」タグはソースコード、「samp」タグはシステムからの出力メッセージ、「kbd」タグはユーザーが入力するキー操作、「var」タグは変数や引数であることを示す役割を持ちます。しかし、HTMLの性質上、通常の文章と同じように記述すると、連続した半角スペースや改行が無視され、すべて1行にまとまって表示されてしまいます。そこで活躍するのが「pre（整形済みテキスト）」タグです。複数行にわたるソースコードやログを掲載する際は、この「pre」タグの中にそれぞれのタグを含めるのが、現在のウェブ標準における正しいマークアップルールです。

また、過去のホームページ（ウェブサイト）制作においては、「listing」というタグが存在していました。このタグもソースコードなどを等幅フォントでそのまま表示する役割を持っていましたが、現在のHTML5の規格では完全に廃止されています。古い仕様に基づいて「listing」タグを使用してしまうと、ブラウザによってはレイアウトが大きく崩れたり、検索エンジンから非推奨の古いコードを使用していると判定される可能性があります。

これらのタグを正確に使い分けることは、SEO（検索エンジン最適化）において大きな意味を持ちます。検索エンジンのクローラーは、タグの持つ意味（セマンティクス）を読み取ります。適切にタグが使用されていることで、クローラーはその部分が単なる文字列の羅列ではなく、解説用のソースコードであることを正しく理解し、技術的に価値の高いコンテンツとして評価しやすくなります。本ページでは、これらのタグの基本的な記述方法や読者のために見やすく表示するための工夫について詳しく解説します。

code（コード）

<code></code>

ホームページ制作（ウェブサイト制作）の際に使用する<code>タグについてのご説明です。

ホームページを制作する時に<code>（コード）タグを使用することによって、ホームページ（ウェブサイト）のページ内の該当部分がプログラムのソースコードであることを示します。

<code> プログラムのソースコード

<code>タグで囲われた部分が、ブログラムなどのソースコードであることを示します。一般的には等幅フォントで表示されます。

外観で表示されるテキストとしてではなくコンピュータ、ブラウザなどが解釈するプログラムソースコードであることを示します。

ウェブのソースであれば、htmlやphp、JavaScriptなど。

ホームページ制作においてテキストの「段落」などとの区別をする

この<code>タグはWordPressのエディタにも組み込まれているコードです。その目的として、ホームページ制作においてテキストの「段落」などとの区別をするためにあります。

同じように並ぶ文字列の中で、該当部分が文章としての「段落」なのか、それともソースコードなどを示したものであるのかをしっかりと検索エンジンやユーザーに伝えることが主な目的であると考えることができます。

SEOと記述ミスの判断

表面上は特に問題がない段落と<code>ですが、SEOを考える上ではソースコードを掲示している部分をしっかりと「ソースコードである」と示すほうが良いでしょう。もし該当テキスト部分が段落でも<code>でもないHTMLタグ無指定の場合、それがコンテンツであるのか、記述ミスで変なところにコードが書かれているのかの判断がつきにくくなります。

<code></code>

ホームページ制作・SEOの1ポイント

ホームページ上でプログラムのソースコードを示す場合、通常のテキストのみでも描画自体は大丈夫ですが、なるべくこうしたタグを利用して、プログラムのソースコードをテキストデータとして示していることを伝えたほうが良いでしょう。特にWordPressをはじめとするCMSのテンプレートの問題で、段落のコードである<p>すら挿入されていない場合は、しっかりと<code>を記述すべきです。

特にbody部分でも有効に機能してしまうタグなどのコードであれば、検索エンジンなどは誤認識してしまう可能性も少なからずあると考えられます。より高度なSEOのためにはcodeタグなどを利用してみましょう。

samp（サンプル）

<samp></samp>

ホームページ制作（ウェブサイト制作）の際に使用する<samp>タグについてのご説明です。

ホームページ制作において<samp>（サンプル）タグは、ページ内の該当箇所がプログラムやスクリプトの出力結果であることを示す場合に使用します。

ホームページ制作時に通常のテキスト特別してプログラムやスクリプトの出力結果であること区別したい時に用います。

<samp> プログラムやスクリプトの出力結果

<samp>タグは、プログラムやスクリプトによる出力結果のサンプルであることを示します。

一般的なブラウザでは等幅フォントで表示されます。

ウェブページ内で<samp>タグは、に囲まれた該当部分がソフトウェアなどで出力される結果の文言などであることを示します。

ホームページ（ウェブサイト）のプログラムであれば、例えばサイト内に設置されたキーワード検索で、検索結果を得るためには、あるキーワードを入力し、サイト内の文章の中に入力したキーワードを含むページがあるかを処理します。

その際に出力される検索結果として、「該当なし」などの文章が出た場合など、あるプログラムの処理の結果を示す箇所であることを示します。

読み方　サンプル

<samp></samp>

sampタグによる意味論的な正しさがホームページの信頼性を裏付ける

ホームページ（ウェブサイト）において、システムの実行結果やプログラムの出力例を示す際、単なる等幅フォントの装飾としてではなく、sampタグを用いて「これがコンピュータによる出力結果である」と論理的に定義することは非常に重要です。

より専門的な視点では、こうしたセマンティックなマークアップの徹底は、そのホームページ（ウェブサイト）が技術的な仕様を正しく理解し、丁寧に構築されていることを示します。これは、Googleが重視するE-E-A-T（経験、専門性、権威性、信頼性）のうち、特に「専門性」と「信頼性」を裏付けるための、いわばサイレントシグナルとして機能します。細部まで整合性の取れたソースコードは、事業としての質の高さを検索エンジンや専門的な知識を持つ閲覧者に対して静かに主張します。

codeタグやkbdタグとの厳密な使い分けが重要

技術解説を行うページでは、ソースコードを示すcodeタグや、ユーザーの入力を示すkbdタグと混同されがちですが、これらを厳密に使い分けることが情報設計の基本です。

より専門的な視点では、意味が異なる要素を正しく切り分けることで、検索エンジンは「何が命令（コード）で、何が結果（出力）なのか」という情報の文脈を正確に把握できるようになります。情報の構造が整理されているほど、検索エンジンはコンテンツの内容を正しく評価でき、結果として特定の技術キーワードにおける検索順位の安定に寄与するかもしれません。

アクセシビリティの向上と事業の社会的信頼

ホームページ（ウェブサイト）を運営する事業者の姿勢として、アクセシビリティへの配慮は避けて通れません。sampタグを使用することで、スクリーンリーダーなどの支援技術を利用しているユーザーに対し、そのテキストが「システムの応答メッセージである」という文脈を正確に伝えることが可能になります。

情報の受け取り手を選ばないユニバーサルデザインの視点を持つことは、事業の透明性や公共性を高めることにつながります。誰にとっても理解しやすいホームページ（ウェブサイト）を追求することは、長期的なブランド価値の向上と、幅広いユーザー層からの信頼獲得において重要な意味を持ちます。

構造化されたデータがもたらすユーザー体験の最適化

sampタグを用いて出力結果をマークアップすることは、将来的な保守性やスタイルの管理面でもメリットがあります。例えば、システムエラーの出力例や成功メッセージを特定のデザインで統一する場合、意味に基づいたタグが振られていれば、CSSによる制御も容易かつ正確に行えます。

デバイスの種類やOSを問わず、一貫した情報の提示を可能にすることが、高品質なホームページ制作の証です。情報の性質に応じた適切なHTMLタグを選択し続けることが、ホームページ（ウェブサイト）全体の品質を底上げし、最終的には事業成果の最大化につながる土台となります。

ホームページ制作・SEOの1ポイント

ホームページ制作では、様々なHTMLのマークアップのパターンがありますが、その中でも使用されるタグはほとんど限定的です。SEOとしてそれほど効果のない論理的なマークアップもありますが、制作時間に余裕があるときは、なるべくこうしたHTMLを用いてテキスト中の該当箇所の保つ意味をしっかりと示していくと良いでしょう。

kbd（キーボード）

<kbd></kbd>

ホームページ制作（ウェブサイト制作）の際に使用する<kbd>タグについてのご説明です。

ホームページ制作において<kbd>（キーボード）タグは、タグで囲まれた該当部分がキーボード入力される文字であることを示す場合に使用します。

<kbd> 入力されるテキスト、キーボード入力される文字であることを示す

Keyboard（キーボード）。ホームページ制作で使用する<kbd>タグは、タグに囲まれた場所が、「入力されるテキスト」、「キーボード入力される文字」であることを示します。

一般的なブラウザでは等幅フォントで表示されます。

<kbd></kbd>

ホームページ制作・SEOの1ポイント

ホームページ制作で使用するHTMLタグですが、キーボードの省略でkbdがタグの名前になっています。日本語圏ではこうした省略は馴染みがあまりありませんが、英語圏では一般的なのかもしれません。WordPressなどで通常ページ内の記述を行う時は自動で<p>などが挿入されますが、厳密なSEOを実施する場合にはテキストモードで正規のHTMLマークアップを行いましょう。

var（バリアブル）

<var></var>

ホームページ制作（ウェブサイト制作）の際に使用する<var>タグについてのご説明です。

ホームページ制作において<var>（バリアブル）タグは、変数や引数であることを示す場合に使用します。

ホームページ制作時にこうしたタグを用いてテキストの文字列が変数や引数であることを示すことで、一般的なテキストとの区別を行います。

<var> 変数や引数であることを示す

Variable（バリアブル）。<var>タグは、タグで囲まれた該当部分が変数や引数であることを示します。数式やプログラムコード内の変数の名前を表す時に使用します。

一般的なブラウザではイタリック体で表示されます。

このVariable（バリアブル）は、「変数」という意味です。

ホームページ制作において、html文書（ウェブページ）の中に記述されている数式やプログラムコードなどの中の変数などであることを示す場合に使用します。

あくまで、html文書中の該当箇所に「変数である」という特有の性質を付与するためのタグで、イタリック体表示されるものの、ウェブユーザーにとっては、あまり影響が無いでしょう。

変数としての意味定義とセマンティクス

より専門的な視点では、Webページ内で数式やプログラミングのコードを解説する際、単に文字を斜体にするのではなく、このvarタグを用いて「これは変数である」と明確に定義することが推奨されます。

例えば「y = ax + b」という数式を表示する場合、単なる文字の羅列として記述するよりも、a、x、bといった変数をvarタグでマークアップすることで、検索エンジンやブラウザに対して文書の構造を正しく伝えることができます。

スタイルシートによる表現の拡張

デフォルトではイタリック体（斜体）で表示されますが、私たちWeb制作の現場では、必要に応じてCSS（スタイルシート）でフォントファミリーを変更したり、色を付けてコードの可読性を高めるために利用します。

特に技術的なドキュメントや教育関連のホームページを作成する場合、ユーザーが「どれが値で、どれが変数なのか」を一目で識別できるようにすることは、ユーザビリティの向上において非常に重要です。

HTML5における役割とSEO

HTML5においても、varタグは引き続き「変数」を表すための標準的な要素として定義されています。iタグ（声質を変える範囲など）やemタグ（強調）と混同されがちですが、それぞれのタグが持つ本来の意味を理解し、適切に使い分けることは、ホームページの品質（内部SEO）を底上げする要因の一つです。

プログラミングにおける変数と引数（参考）

変数は、プログラムソースコードにおいて、あるデータを一定期間記憶して利用する際に備えて、データに固有の名前を付与したもの。

引数（ひきすう）は、プログラミングの際に、外部と値をやりとりするための特別な変数、もしくは変数の値。

読み方　バリアブル

<var></var>

類似タグとしては、<code> や<kbd>、<samp>があります。

ホームページ制作・SEOの1ポイント

各文字列がどのような意味を持っているかを示すことがHTMLマークアップであり、元々、インターネット黎明期にあったホームページは、技術的な情報が多く、このような変数を示すタグも一般的だったのではないでしょうか。同じように並ぶ文字列の中で、どの部分がどういう意味を持っているかを制作に示して検索エンジンにも伝えましょう。

コンピューター関連のテキストを正確に伝えるタグの使い分け

事業用のホームページ（ウェブサイト）において、技術的な解説手順やマニュアルを掲載する際、見た目のデザインだけでなく、テキストが持つ意味（セマンティクス）を検索エンジンへ正確に伝達することは非常に重要です。ここでは、用途に応じた3つのタグの使い分けについて解説します。

codeタグ（ソースコード）の役割

「code」タグは、そのテキストがコンピューターのプログラムコードの断片であることを示します。HTMLやCSSの記述方法を解説する記事や、プログラミング言語の関数名を紹介する際に使用します。より専門的には、適切に「code」タグが使用されていることで、検索エンジンのクローラーはその部分が単なる文字列の羅列ではなく、解説用のソースコードであることを正しく理解し、技術的に価値の高いコンテンツとして評価しやすくなります。

sampタグ（システム出力結果）の役割

「samp」タグは「sample」の略であり、プログラムやシステムが出力したメッセージを示すために使用します。例えば、システムのエラーメッセージや、処理が完了したことを知らせるテキストなどを画面上に表示する場面で活用します。これにより、ユーザーに対してもこれがシステム側の出力画面であるという事実を明確に区別して伝えることができます。

kbdタグ（キーボード入力）の役割

「kbd」タグは「keyboard」の略であり、ユーザーがキーボードなどで入力すべき文字や操作手順を示すために使用します。ソフトウェアの操作マニュアルにおいて、ショートカットキーの指示や検索窓に入力してほしいキーワードを指定する場面などで活躍します。

varタグ（変数）の役割

「var」タグは「variable」の略であり、プログラミングのソースコード内で使われる変数や、数学的な計算式における変数を表すために使用します。事業用のホームページ（ウェブサイト）において、技術的なチュートリアルや関数の記述方法を解説する際、ユーザーが独自の値を代入すべき部分を明示する場面で非常に役立ちます。より専門的には、「code」タグで囲んだコードの中で、任意に変化する値の部分だけをさらに「var」タグで囲むといった使い方が推奨されます。このタグを適切に配置することで、検索エンジンのクローラーに対して、そのテキストが固定された文字列ではなく変数であるという厳密な意味を伝えることができ、コンテンツの技術的な評価をさらに高めることにつながります。

pre（整形テキスト）

<pre></pre>

ホームページ制作（ウェブサイト制作）の際に使用する<pre>タグについてのご説明です。

ホームページ制作において<pre>（プレ）タグは、ページの中で整形済みのテキストを表示する際に使用します。

「code」タグは、そのテキストがコンピューターのコードであることを示す役割を持ちます。しかし、HTMLの性質上、通常の文章と同じように記述すると、ソースコード内に含まれる連続した半角スペースや改行が無視され、すべて1行にまとまって表示されてしまいます。

そこで活躍するのが「pre（整形済みテキスト）」タグです。「pre」はpreformatted textの略であり、HTMLソースコード内に記述されたスペースや改行を、そのままの形でブラウザに表示します。複数行にわたるソースコードを掲載する際は、この「pre」タグの中に「code」タグを含める（入れ子にする）のが、現在のウェブ標準における正しいマークアップルールです。

<pre> 整形済みのテキスト

Preformatted Text（プレフォーマッテッドテキスト）。整形済みテキスト。

<pre>タグは、タグで囲まれた範囲のソースに記述されたスペース・改行などを、そのまま等幅フォントで表示します。

ウィンドウサイズに合わせて行われる自動改行もされなくなります。

<pre></pre>

レイアウトの崩れを防ぎ、モバイルユーザーの離脱を回避する

ホームページ（ウェブサイト）において、ソースコードや詩、アスキーアートなど、空白や改行をそのまま表現したい場合にpreタグは非常に有効です。しかし、このタグの特性上、記述されたテキストが親要素の幅を超えても自動で折り返されないという挙動を示すことがあります。これが原因で、特に画面幅の狭いスマートフォンでの閲覧時に、レイアウトが大きく崩れたり、横スクロールが強制されたりするケースが見受けられます。

より専門的な視点では、この「意図しない横揺れ」や「はみ出し」は、Googleが推奨するモバイルユーザビリティの指標（モバイルフレンドリー）に悪影響を与える可能性があります。CSSで適切な折り返し設定（white-spaceプロパティなど）を行うか、スクロール領域を適切に制御することで、ユーザーのストレスを排除し、サイトの評価を維持することが重要です。

codeタグとの組み合わせで情報の意味を明確にする

プログラムのソースコードを表示する際、preタグ単体ではなく、codeタグと組み合わせて使用することが一般的です。これは単なる慣例ではなく、文書構造の意味を明確にするための重要な作法です。preタグは「整形の維持」を、codeタグは「プログラムコードであること」をそれぞれ担当しています。

検索エンジンや支援技術に対して、そのブロックが単なるテキストの羅列ではなく、技術的なコードであることを正しく伝えることができます。より専門的な視点では、こうしたセマンティックなマークアップを徹底することで、コンテンツの構造が機械的に理解されやすくなり、検索結果におけるリッチリザルトへの表示や、技術記事としての専門性評価（E-E-A-T）の向上に寄与するかもしれません。

アクセシビリティへの配慮が信頼性を高める

preタグで整形されたテキストは、視覚的には読みやすくても、スクリーンリーダーなどの支援技術を利用するユーザーにとっては、独特の読み上げ挙動となる場合があります。例えば、レイアウト目的でpreタグを使用し、大量の空白文字で見た目を調整するような使い方は避けるべきです。音声読み上げでは空白が連続して読み上げられたり、文脈が分断されたりして、内容が伝わらなくなる恐れがあります。

誰にとっても情報が等しく伝わるように配慮することは、ホームページ（ウェブサイト）の公共性を保つ上で重要です。CSSで実現すべきデザインと、HTMLで表現すべき構造を正しく切り分けることが、結果としてメンテナンス性の高い、高品質なサイト運営につながります。技術的な正しさを追求することは、事業の信頼性を底上げする地道ですが確実な手段です。

ホームページ制作・SEOの1ポイント

ウェブフォントの利用の場合を除き、ホームページの制作時に指定したフォントで、かつPCにインストールされているフォントがブラウザ上に表現されます。

この場合、各フォントの幅などが若干異なるため、特にWindows標準フォントとMacintosh標準フォントといった違いで、改行箇所がずれたりすることがあります。こうした時に整形済みテキストの仕様による表現が役立ちます。このpreタグはSEO対策として直接的に影響をあたえるものであるとは考えにくいですが、ユーザーの読みやすさに関係しているタグですので、必要に応じて使用することでユーザー満足度向上に寄与してくれるかもしれません。

preタグとの組み合わせによる正確なコード表示

前述した「code」「samp」「kbd」の各タグは、文章の一部として使用されるインライン要素です。短い単語であれば問題ありませんが、複数行にわたる長いソースコードやシステムの実行ログをそのまま画面に表示させるためには、「pre」タグと適切に組み合わせる必要があります。

preタグの役割とHTMLの仕様

HTMLの仕様上、コード内に半角スペースや改行を何度入力しても、ブラウザ上ではひとつの半角スペースとして処理されてしまいます。これを解決するのが「pre（整形済みテキスト）」タグです。「pre」タグで囲まれた部分は、記述されたスペースや改行がそのままの形でブラウザに表示されます。複雑なプログラムコードの字下げ（インデント）を正確に表現し、ユーザーに読みやすく提示するために必須のタグと言えます。

preタグの中に各タグを入れ子にする正しい記述方法

複数行にわたるソースコードを掲載する場合は、「pre」タグの中に「code」タグを含める（入れ子にする）のが、現在のHTML5における正しいマークアップルールです。同様に、複数行のシステム出力ログを表示したい場合は「pre」タグの中に「samp」タグを配置します。単に「pre」タグだけで囲むのではなく、内側に意味を持たせるタグを併用することで、見た目のフォーマットを保ちながら、それが何のテキストであるかを検索エンジンへ正確に伝えることができます。

SEOとWebアクセシビリティへの影響

より専門的には、これらのタグを厳密に使い分けることは、ホームページ（ウェブサイト）の品質向上に直結します。音声読み上げソフト（スクリーンリーダー）を利用しているユーザーに対しても、単なる文章の続きではなく、コードやシステムからの出力であることを的確に伝えることが可能になります。ユーザーにとって分かりやすく、検索エンジンにも構造が正しく伝わる適切なマークアップを行うことが、長期的な集客に強いサイト構築につながります。

listing（リスティング）

<listing></listing>

ホームページ制作（ウェブサイト制作）の際に使用する<listing>タグについてのご説明です。

ホームページ制作において<listing>（リスティング）タグは、タグは解釈しながらソースをそのまま表示する場合に使用しますが、html5で廃止されたため、<pre>、<code>で代用します。

このタグもソースコードなどを等幅フォントでそのまま表示する役割を持っていましたが、現在のHTML5の規格では完全に廃止されています。古いシステムや過去の知識に基づいて「listing」タグを使用してしまうと、ブラウザによってはレイアウトが大きく崩れたり、検索エンジンから非推奨の古いコードを使用していると判定されたりする可能性があります。そのため、現在の環境でソースコードを表示する際には、必ず「pre」と「code」の組み合わせを使用します。

<listing> ソースをそのまま表示（タグは解釈）

<listing>タグを使用することで、ソース中の改行やスペースをそのまま等幅フォントで表示します。リスティング。

廃止。

<listing>代替タグ

<listing>は廃止されたため、以下のタグで代用します。

<pre>、<code>

<listing></listing>

ホームページ制作・SEOの1ポイント

ホームページ制作で使用するHTMLの中には、同じような機能を持ったタグがいくつもあります。基本的に英単語のままの意味合いが強いですが、若干異なるケースもあります。HTMLのバージョンによって使用できなくなったものもありますので、該当タグがドキュメント宣言で宣言したバージョンに適合しているかの確認が必要です。

ホームページ（ウェブサイト）制作・作成に役立つHTMLタグ一覧は
⇒html5 tag reference index ホームページ制作の基本タグ

ホームページ（ウェブサイト）のHTML編集方法

ホームページのHTML編集方法について。ホームページ（ウェブサイト）は基本的にHTMLで構成されています。かつてはHTML単独でHTMLの文書スタイルを設定していましたが、現代ではページの基本構成はHTMLで、外観はスタイルシート・CSSで設定されています。ホームページ制作・作成、ホームページ修正の基本はこのHTMLとCSSの編集で行います。

ホームページのHTML編集方法