【HTML5】HTML5からのsmallタグの使い方

コーディング

HTML4.01まではテキストを小さく表示するために使われていたsmallタグ。
しかし、HTML5からは意味が変更されており、テキストを小さくするだけの場合はspanタグとCSSで小さくすることが推奨されるようになりました。
今回はHTML5以降のsmallタグの意味と使い方についてご紹介いたします。

HTML4.01からHTML5への変更点

まず、HTML4.01からHTML5でsmallタグの意味はどのように変更されたのかというと、HTML4.01までのsmallタグは最初にもお話ししたようにテキストを小さくするために使用するタグでした。
HTML5からは意味のあるタグに変更され、注釈や細目を表すタグとなりました。
（細目とは小さな文字で表示するテキストのことで、欄外注釈、補足、著作権表示などのことを指しています。）

smallタグの使い方

HTML5からは「注釈や細目を表すタグ」となりましたが、言葉だけでは使い方のイメージが沸かないかと思います。
ここからは「注釈や細目を表すタグ」とは実際にどの部分に使うことになるのかをいくつかご紹介していきたいと思います！

基本的にsmallタグはインライン要素のためpタグなどのブロックレベル要素中にsmallタグを書きます。
インライン要素とブロックレベル要素については下記の記事で詳しくご紹介しています！

【HTML5】HTML5からのsmallタグの使い方

フッターなどの著作権表示

一番使われると思う部分はフッターなどに書く著作権表示（コピーライト）です。
細目のテキストであるため、下記のような使い方をする機会が多いです。

<footer>
  <p><small>© 2021 spiqa design</small></p>
</footer>

注釈のテキスト

HTML5から持つようになった意味にもあるように注釈のテキストをマークアップする際にも使用します。
実際に使うと下記のような状態になります。

<div>
　<p>
　　今ならなんと500円〜から映画・ドラマが見放題！！　　　　　　
　　<small>※プランによって見ることができる作品は異なります。</small>
　</p>
</div>

補足のテキスト

別称がある場合などに（〜と呼ばれることも多い）と書くこともあると思いますが、このような内容にもsmallタグを使用します。

<p>WordPress<small>（WP）</small>の使い方についてご紹介します。</p>

料金表示の「税込」などの表記

最近は税込価格で書くことが義務化されていますが、「税込」やプランによっては補足のテキストを書くこともあると思います。
その場合にサイズを変える機会も多いと思いますが、マークアップをする時はspanタグではなくsmallタグを使用することもあります。

<!-- 税込表記 -->
<dl>
　<dt>プラン1</dt>
　<dd>10,000円<small>（税込）</small></dd>
　<dt>プラン2</dt>
　<dd>15,000円<small>（税込）</small></dd>
</dl>

<!-- 補足のテキスト -->
<dl>
　<dt>スマートプラン</dt>
　<dd>3,000円<small>（月上限10GBまで）</small></dd>
　<dt>使い放題プラン</dt>
　<dd>5,000円<small>（月上限なし）</small></dd>
</dl>

使う時の注意点

上記の例のように注釈のテキストに使うタグのため、テキストが他のコンテンツに比べて一回り小さい場合に全体を囲む使い方や、文中に大小を付けるために使う下記のような使い方は適切ではありません。
smallという名前から小さくする場合に使いたくなってしまいますが、テキストを小さくするだけの場合はspanタグを使う方が適切です。

<dl>
 <dt>A社</dt>
 <dd>5,000円で使い放題！！</dd>
 <dt>B社</dt>
 <!-- ↓補足のテキストではないため不適切 -->
 <dd><small>7,000円で使い放題。</small></dd>
 <!-- ↓サイズを小さくしたい場合は下記が適切 -->
 <dd><span>7,000円で使い放題。</span></dd>
</dl>

 <!-- ↓補足のテキストではないため不適切 -->
<p><small>期間限定</small>今なら10,000円<small>キャッシュバック！！</small></p>
 <!-- ↓サイズを小さくしたい場合は下記が適切 -->
<p><span>期間限定</span>今なら10,000円<span>キャッシュバック！！</span></p>