2022.07.20
【動画編集ソフト】アフターエフェクトとプレミアプロってなにが違うの?違...
制作
動画
2021.04.27
HTML4.01まではテキストを小さく表示するために使われていたsmall
タグ。
しかし、HTML5からは意味が変更されており、テキストを小さくするだけの場合はspan
タグとCSSで小さくすることが推奨されるようになりました。
今回はHTML5以降のsmall
タグの意味と使い方についてご紹介いたします。
目次
まず、HTML4.01からHTML5でsmall
タグの意味はどのように変更されたのかというと、HTML4.01までのsmall
タグは最初にもお話ししたようにテキストを小さくするために使用するタグでした。
HTML5からは意味のあるタグに変更され、注釈や細目を表すタグとなりました。
(細目とは小さな文字で表示するテキストのことで、欄外注釈、補足、著作権表示などのことを指しています。)
HTML5からは「注釈や細目を表すタグ」となりましたが、言葉だけでは使い方のイメージが沸かないかと思います。
ここからは「注釈や細目を表すタグ」とは実際にどの部分に使うことになるのかをいくつかご紹介していきたいと思います!
基本的にsmall
タグはインライン要素のためp
タグなどのブロックレベル要素中に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>
HTML5から意味を持つようになったタグは色々あるため、きちんと理解し適切に利用することで質の良いサイトを作ることができます!
他のタグについてもご紹介しているため、ぜひご活用ください!
関連記事はこちら