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

Program

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 &copy; 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 ExplorerGoogle ChromeMicrosoft EdgeSafariFirefoxOpera
small要素
〇:サポートあり、△:制限あり、×:サポートなし。?:不明

以上、small要素の使い方について、ご参考になさってくださいね。

タイトルとURLをコピーしました