
Webページ上の注釈、細目、捕捉情報は、small要素で表しましょう。
small要素の基本的な使い方
はじめに、以下のプログラムと、ブラウザでの表示結果を見てください。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>small要素</title>
</head>
<body>
<p>この本の値段は2,000円<small>(税込み)</small>になります。</p>
<p><small>Copyright © Example Corp. All rights Reserved.</small></p>
</body>
</html>

body要素の中に、「文のかたまり(段落)」を示すp要素が2つあります。
1つ目のp要素の中には、『この本の値段は2,000円(税込み)になります。』と書かれた文章があります。
そして、注釈である「(税込み)」というフレーズは、small要素でマークアップされています。
このため、ブラウザでの表示結果の通り、「(税込み)」は「2,000円」の文字に比べて小さく表示されています。
また、2つ目のp要素の中には、『Copyright © Example Corp. All rights Reserved.』と書かれた英文があります。
そして、細目であるこの英文はsmall要素でマークアップされ、全体的に文字が小さく表示されています。
small要素を使わないと、どのように表示される?
では、small要素でマークアップした場合と、small要素を使わない場合とで、比較してみましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>small要素</title>
</head>
<body>
<p>この本の値段は2,000円<small>(税込み)</small>になります。</p>
<p>この本の値段は2,000円(税込み)になります。</p>
<p><small>Copyright © Example Corp. All rights Reserved.</small></p>
<p>Copyright © Example Corp. All rights Reserved.</p>
</body>
</html>

先ほどの2つの文章に、それぞれ同じ内容でsmall要素を使わない文章を追加しました。
それぞれの文章は、上段がsmall要素でマークアップがなされ、下段の文章はsmall要素を使っていません。
そして、表示結果に示すように、small要素を使うことで、マークアップされたフレーズ(文章)は、小さく表示されていることがハッキリとわかります。
各種ブラウザでの表示結果
small要素の各種ブラウザにおける最新のサポート状況は、以下のようになってます。
【HTML】 | Internet Explorer | Google Chrome | Microsoft Edge | Safari | Firefox | Opera |
small要素 | ○ | ○ | ○ | ○ | ○ | ○ |
以上、small要素の使い方について、ご参考になさってくださいね。