varタグ -変数名を表す｜HTML辞典

<var>タグとは？

<var> タグは、変数名を表すためのタグです。
プログラムの変数、数学の数式、科学的な表記などを示す際に使用されます。

コンテンツモデル

フローコンテンツ（Flow Content）、フレージングコンテンツ（Phrasing Content）。

閉じタグの有無

<var> は 開始タグ（<var>）と閉じタグ（</var>）の両方が必要 です。

基本的な記述方法

<p>円の面積を求める式: <var>π</var> × <var>r</var><sup>2</sup></p>

使用できる主な属性

<var> タグには特別な属性はありません。

CSSを使ったデザイン変更

<var> タグのデフォルトのスタイルは 斜体（italic） ですが、独自のスタイルを適用できます。

var {
    font-style: normal;
    font-weight: bold;
    color: #0055cc;
}

適切な使用例

✅ 数学の変数を表記する

<p>方程式: <var>x</var> + 2 = 5</p>

✅ プログラムの変数を示す

<p>この関数は <var>count</var> という変数を使用します。</p>

✅ 物理学や科学の記号を表す

<p>質量エネルギー等価の式: <var>E</var> = <var>mc</var><sup>2</sup></p>

適切でない使用例（誤った使い方）

❌ <var> を単なる強調目的で使用する

<!-- NG: 強調のために使用 -->
<p>この製品は <var>超お得</var> です！</p>

✅ 正しい書き方（変数や数式の表記に使用）

<p>計算式: <var>a</var> × <var>b</var> = <var>c</var></p>

❌ <var> をコードの変数として使用する（コード内では <code> を使うべき）

<!-- NG: プログラムコード内で <var> を使用 -->
<pre><code>let <var>count</var> = 10;</code></pre>

✅ 正しい書き方（コードの変数は <code> を使用）

<pre><code>let count = 10;</code></pre>

<var>タグと他のタグの違い

タグ	役割	特徴	適切な用途
<var>	変数を示す	斜体で表示（デフォルト）	数学、物理、プログラムの変数
<code>	プログラムのコードを示す	等幅フォントで表示	JavaScript、HTML などのコード
<samp>	コンピューター出力を示す	等幅フォントで表示	システムの出力結果

使用上の注意点

✅ <var> は変数や数式にのみ使用する

• 一般的な強調には使用しない。

✅ code や samp とは用途が異なる

• プログラムのコードには <code> を使う。
• コンピューター出力には <samp> を使う。

関連タグ

• <code> – プログラムのコードを示す
• <samp> – システムの出力を示す
• <pre> – 整形済みテキストを表示

まとめ

<var> タグは、HTML文書内で 数学、科学、プログラムの変数を示すためのタグ です。
数式や計算式を明示的に表現でき、視認性や可読性の向上に役立ちます。