テキストの一部の文字を小さくするのに使用していたSmallタグですが、HTML5では意味が変更になっています。
今までは、テキストを小さくするのは別の方法が推奨されています。
今回は、HTML5でのsmallタグの正しい意味と使い方についてご紹介していきます。
- HTMLのsmallタグの基本的な使い方
- smallタグの役割と表示の特徴
- smallタグとsupタグ、subタグとの違い
- SEOやアクセシビリティの観点でのsmallタグの活用方法
基本的な役割を明確化
まずは、「small」タグの役割を明確にしましょう。
「small」タグは、親要素の内容よりも小さいフォントサイズでテキストを表示するために使われるインライン要素です。
HTML５では、「補足情報や注釈を表示する目的」に適したタグとして意味を持っています。
注釈とは。
本文中の語句をとりあげて、その意味を解説すること。
また、その説明。注解。
比喩的に、話などを付け加える補足的な説明をいう。
コトバンク
細目（さいもく）とは。
こまかいところまでくわしくしてある箇条。
こまかな項目。こわけ。
コトバンク
これだけでは、使い方をイメージしにくいと思いますので、WEBサイト上での具体的な方法を挙げいきます。
著作権情報（コピーライト）
footerなどによくある著作権表示がsmallタグの使用にあたります。
本サイトでいうと、「Copyright 2024 I-f – Web Works -」これが著作権情報にあたります。
<p><small>Copyright 2024 I-f - Web Works -</small></p>詳しくは、後ほど実用例で紹介します。
あくまでも一例ですが、上記のような形で使用します。
smallタグはインライン要素なので、pタグのようなブロック要素の中に入れて使用するのが適切です。
細目（細目）
細目は、画像や本文テキストの後に「※」などで、補足をしてある形を見たことがあるかと思います。
そういった場合もsmallタグの使用に該当します。
その他の利用について。
smallタグは、「著作権情報」や「細目」以外にも使用ができます。
- 免責
- 警告
こちらにも、smallタグの使用が推奨されています。
smallタグを使用するときの注意事項。
smallタグは、本来の意味のとおり、囲ったテキストを小さくしてくれます。
テキストのサイズは、ブラウザによりことなります。
そのため、smallタグを設置したら、必ずCSSで調整することをお勧めします。
見ているブラウザでテキストのサイズに問題がなくても、ブラウザを変えるとサイズが変わってしまいます。
また、著作権情報だからといって必ずsmallタグで設置しないといけないかというと、そうではありません。
サイトによっては、smallタグを使用せずに「著作権情報」を表示しているサイトもあります。
HTMLの構造上、上手くいかないときいなどは、無理に使用せずにデザインを優先していいと思います。
(SEO的には、smallタグの方がいいかもしれませんが。)
「small」タグの実用例
「small」タグの実用例を見てみましょう。
See the Pen Untitled by 1buk1 (@1buk1) on CodePen.
上記は、価格などテキストに対しての「補足」事項として、コピーライトなどのテキストに使用例です。
もちろん、CSSでデザインを変更することが可能です。
今回は、「補足」的な意味を持たせたいので、フォントサイズを小さくして、カラーを目立たない色に変更しました。
デザインは、使用用途にあったデザインを適用させあげてください。
SEOとアクセシビリティへの配慮（使用上の注意点）
便利なスモールタグですが、乱用は禁物です。
乱用しすぎると、主要なテキストが軽視される可能性があります。
使い所は絞って、使いましょう。
また、アクセシビリティの観点でも注意が必要です。
言わずもがな、「small」タグはテキストを小さくして補足的な効果をもたらします。
が、テキストが小さくなると、視認性が下がるので、適宜調整してあげましょう。
補足のテキストではありますが、見えなくなってしまうほどの小さくしてはいけません。
それぞれ、解説します。
SEOの観点でのsmallタグの活用方法
smallタグを正しく使うことで、Googleに内容の意味を正確に伝えることができます。
例えば、価格の補足情報や著作権表示の記述にsmallタグを使えば、検索エンジンはその部分が補足的な情報であると判断してくれます。
また、「補足情報」「smallタグのSEO効果」などの関連キーワードを適切に活用することで、他サイトとの差別化を図ることもできます！
smallタグの誤用（重要な情報に使用）を避け、コンテンツの評価を下げないように注意しましょう。
アクセシビリティ向上のためのポイント
テキストを小さくしすぎないだけではなく、以下の点にも注意を向けるといいと思います。
視覚障がいのあるユーザーのために、補足情報を正確に読み上げられるようaria-labelやtitle属性を活用すると良いです！
<p>価格: <strong>¥500</strong> <small aria-label="税込み">税込</small></p>
<p><small title="2024年に作成された著作権情報">© 2024 あなたの会社名</small></p>ここまでしてあげると、スクリーンリーダーが「税込み」と読み上げることで、情報の意味を明確にしてくれます。
また、title属性を付与することで、ユーザーがマウスオーバーした際に追加情報をツールチップとして表示しするようになります。
他のHTMLタグとの違い
「small」タグは、「sup」や「sub」と混同しやすいタグですので、ここでは簡単に違いを解説しておきます。
See the Pen small,sup,subの違い。 by 1buk1 (@1buk1) on CodePen.
「smallタグ」は、ご覧の通り文字サイズを小さくして、補足や注釈を表示するためのテキストですが、テキスト位置は変わりません。
しかし、「sup」「sub」は文字も変更になります。
supタグ:は、上付き文字を作るためのタグです。数学の指数や脚注に使用します。
例: 「102（10の2乗）」
subタグ:は、下付き文字を作るためのタグで、化学式や下付き脚注に適しています。
例: 「H2O（水の化学式）」
このように、使用の目的も、表示も違うので、違いに気をつけて用途にあった方法で適切に使用しましょう。
まとめ
smallタグは、著作権表示・細目に使用することが望ましく、ただテキストを小さくするのには使用しないようにしましょう。
テキストを小さくしたい場合には、spanを使用して、テキストサイズを指定する方法が適切です。
タグは、意味を持っています。
むやみに利用せず、適切な意味を理解して、サイトの構築にあたってください。