【HTML】small要素の使い方【Webページ上の注釈や細目を表します】

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要素が２つあります。

１つ目のp要素の中には、『この本の値段は2,000円（税込み）になります。』と書かれた文章があります。

そして、注釈である「（税込み）」というフレーズは、small要素でマークアップされています。

このため、ブラウザでの表示結果の通り、「（税込み）」は「2,000円」の文字に比べて小さく表示されています。

そして、細目であるこの英文は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>