HTMLのsmallタグについて書いています。
smallタグは、著作権表示、免責事項、注釈、またはその他の補助的なコメントなど、メインコンテンツからは重要度が低いと考えられるテキストを表すために使用されます。
smallタグで囲まれたテキストは、通常、ブラウザのデフォルトスタイルによって、周囲のテキストよりも小さいフォントサイズで表示されます。
smallタグの基本的な使い方
smallタグは、重要度の低いテキストを囲むだけで使用できます。
<p>この製品の価格は10,000円です。<small>（税抜）</small></p>
<p>© 2025 〇〇株式会社 <small>All Rights Reserved.</small></p>
上記のHTMLは、ブラウザで以下のように表示されます。（chromeのデフォルトのスタイル）
smallタグで囲まれたテキストが、周囲のテキストよりも小さく表示されていることが確認できます。
smallタグの意味合い
smallタグは、囲まれたテキストが補足的であり、メインコンテンツの理解に不可欠ではないことを示す意味合い（セマンティクス）を持っています。
これは、著作権情報、免責事項、注釈、出典など、付加的な情報を示す際に適切です。
スクリーンリーダーなどの支援技術は、smallタグで囲まれたテキストを、通常のテキストとは異なるトーンで読み上げることがあります。
smallタグにスタイルを適用する
smallタグのデフォルトのスタイル（小さいフォントサイズ）は、CSS で上書きしたり、さらに他のスタイルを追加したりすることができます。
.footnote {
font-size: 0.8em; /* デフォルトよりもさらに小さく */
color: #777; /* 薄いグレーの文字色 */
font-style: italic; /* 斜体にする */
}
<p>詳細については<small class="footnote">[1] 参考文献を参照してください。</small></p>
上記の例では、smallタグにfootnoteクラスを適用し、CSSでフォントサイズ、文字色、フォントスタイルを変更しています。
ブラウザで表示すると、下記ようになりました。
smallタグを使用する際の注意点
- 重要度の低いテキストに限定する:
smallタグは、あくまで補助的な情報を示すためのものです。メインコンテンツの重要な部分を小さく表示するために使用するべきではありません。 -
過度な使用は避ける: ページ内の多くのテキストを
smallタグで囲むと、かえって読みにくくなる可能性があります。本当に重要度の低い情報に限定して使用しましょう。 -
スタイルの調整: デフォルトの小さいフォントサイズが見にくい場合は、CSSで適切なフォントサイズや色などを設定して、可読性を確保することが重要です。
smallタグの使用例
smallタグは、以下のような場合に適切に使用できます。
- 法的情報: 著作権、利用規約、プライバシーポリシーなど。
- 引用元: 参考文献、出典など。
- 注釈: 本文の補足説明、脚注など。
- メタ情報: 最終更新日など。
- 価格表示の補足: 税抜価格、キャンペーン期間など。
smallタグの代替となる方法
重要度の低いテキストを表現する他の方法としては、CSSを使用してフォントサイズや色を変更する方法があります。
しかし、smallタグはセマンティックな意味を持つため、補足的な情報をマークアップする際にはsmallタグを使用することが推奨されます。
CSSは、あくまでその表示スタイルを調整するために使用するべきです。
まとめ
smallタグは、HTMLで重要度の低い補足的なテキストをマークアップするためのセマンティックな要素です。
著作権表示、注釈、免責事項など、メインコンテンツを補完する情報を示す際に適切に使用することで、Webページの構造と意味をより明確にすることができます。
CSSと連携して視覚的なスタイルを調整し、可読性を確保することも重要です。
重要度の低いテキストをマークアップする際には、smallタグの適切な使用を心がけましょう。
コメント