金額を表すのにどのHTML5タグが適切か？実践的なマークアップ方法を徹底解説

金額を表示するためのHTML5マークアップの基本

Webページで金額や価格を表示する場面は数多くあります。HTML5では、目的に応じて複数のマークアップ方法を使い分けることで、より意味的でアクセシブルな記述が可能になります。ここでは、代表的な4つの方法を順番に紹介します。

1. microdata（構造化データ）で商品価格を表示する

schema.orgなどのmicrodataを活用すると、検索エンジンに対して価格情報を正確に伝えることができます。リッチリザルトの表示にも役立つため、ECサイトでは特におすすめの方法です。

<div itemscope itemtype="https://schema.org/Product">
　<span itemprop="price">1980</span>円
</div>

2. strong要素で価格の重要性を示す

strong要素は「その内容が重要である」ことを意味づけます。価格を強調したい場合に最適で、検索エンジンやスクリーンリーダーにも重要度がきちんと伝わる点がメリットです。

<p>価格：<strong>3,980円（税込）</strong></p>

3. classを付けたspan要素でスタイルを調整する

意味的な強調は必要ないものの、見た目だけ変更したい場合は、span要素にクラスを付与してCSSで装飾するのが一般的です。サイト全体で金額表示のデザインを統一できるのも大きな利点です。

<span class="price">¥2,500</span>

4. b要素で視覚的に目立たせる

b要素は重要性を意味せず、単に視覚的に目立たせたいテキストに使用します。金額をハイライトしてユーザーの注目を集めたいケースで活用できます。

<b>9,800円</b>

表形式で給与や株価を表示する場合

従業員の給与や株価などを表組みで一覧表示するときは、列の見出しとしてth要素を使用しましょう。scope属性に「col」を指定することで、その見出しが縦の列全体に対応していることが明確になり、アクセシビリティの面でも効果的です。

<th scope="col">Salary</th>

まとめ

金額の表示方法は、目的に応じた使い分けがポイントです。重要性の強調にはstrong要素、スタイリング目的ならclassを付けたspan要素、構造化データが必要な場面ではmicrodataを選びましょう。また、表内で金額を扱う際は、th要素にscope="col"を指定して列見出しを必ず定義することをおすすめします。