Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
3
Help us understand the problem. What are the problem?

smallタグの正しい使い道を考える

どうも7noteです。HTMLには様々なタグがありますが、そのなかでsmallタグの使い道について考察します。

そして独自で出した結論としては・・・

「正直、コピーライトでしか使わないと思う。」

これが私なりの結論です。
文字サイズを小さくしたい時には絶対に利用しない

smallタグの説明文

<small> …… 免責・警告・著作権などの注釈や細目を表す』
引用元:HTML5タグリファレンス(http://www.htmq.com/html5/small.shtml)

またこのようにも書いています。

<small>はメインコンテンツではなく、あくまで注釈や細目などの短いテキストに使用する要素です。
<small>を複数の段落、複数のリスト、複数のセクションなどの長いテキストに対して使用するべきではありません。』
引用元:HTML5タグリファレンス(http://www.htmq.com/html5/small.shtml)

ほかのサイトではこのように説明されています。

『HTML の <small> 要素は、表示上のスタイルとは関係なく、著作権表示や法的表記のような、注釈や小さく表示される文を表します。』
引用元:MDN Web Docs(https://developer.mozilla.org/ja/docs/Web/HTML/Element/small)

smallタグの使い道

一般的に一番使われている箇所はコピーライトではないかと思います。
逆にコピーライト以外でsmallタグを見かけることがほぼありません。

index.html
<small>© 2011 hogehoge Inc.</small>

※コピーライトの書き方についてはコチラ

とはいえqiitaやmdnのサイトを見ると別に<small>タグを使っていません。
つまりは使わなくてもなんの問題もないと思って大丈夫でしょう。

一応紹介されている使い方としては、文章の注釈としていれる使い方も間違いではなさそうです。

index.html
<p>なんと、おにぎりの具の量3倍!!!<sup></sup></p>
<small>※自社比較</small>

さらっと<sup>を使っていますが、sup要素は上付き文字に使います。
http://www.htmq.com/html5/sup.shtml

このように文中で入れる注釈は<sup>等が使われるので、その注釈の内容を表すのに<small>が使えなくもない・・・

でも結局<div><p>で書いてもなんの問題もない。

結局は、smallタグを使うメリットがないのが痛いところですね。
正しいタグを使う方がSEO的には正しいのかもしれませんが、おそらくタグじゃなくdivやpで書かれていたとしても何も影響はないと思います。

まとめ

ほんとに使いどころのない要素なのかも。

<span>を2重にしたくないからかわりに<small>を使うのは使い方的には間違っていますし、<small>タグの代わりにpやdivでも問題ないのなら好きな方を使えばいいかなと思います。
私はいろいろなタグを使ってる方が識別しやすいので、コピーライトだけは<small>を使おうかなと思います。

おそまつ!

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
3
Help us understand the problem. What are the problem?