3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Posted at

どうも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制作のちょいテク詰め合わせ

3
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?