HTMLで注釈を表示するsmall要素を誰でも理解できるように解説する

HTMLで注釈を表示させる際には、small要素を使うことがあります。

small要素はその名前の通り、テキストを通常より小さく表示させる効果があります。

この見た目を調整するという役割は有名ですが、注釈を表すという文法上の意味についてはあまり知られていないかもしれません。

またテキストを小さくするという目的でも、実際に使われることは多くありません。

この記事は、普段注目されることが少ないsmall要素について解説しています。

その実態を改めて知るためにお役立てください。HTMLで注釈を表示させたい時には本記事は必見です。

smallの記述法

small要素はテキストに対して使用します。

インライン要素なので、pなどのブロックレベル要素の中で使用するとよいでしょう。

具体的には以下のような形です。

HTML
<p><small>テキスト</small></p>

smallの役割

small要素は、HTML4.01までは単にテキストを小さくするという役割しか持っていませんでした。

HTML5から注釈や細目を表すという役割を与えられています。

免責、警告、法的規制、著作権、ライセンス要件といったものです。

small要素が文字を小さくする役割しか持っていないと思われることが多いのは、その名前が大きな理由です。

しかし、HTML5で加えられた新たな役割があまり認知されていないという原因もあります。

SEOの意味はない

注釈や細目というのは、主な内容を補うためにあるものです。

不要ではないとしても、重要度はやや低いと言えます。

またテキストを小さくするというデフォルトの設定や要素名から、あまり重要ではないものを示す要素だとも思われがちです。

そうしたことから、small要素は検索エンジンに重要ではないテキストを伝えるための要素だと解釈されることが多々あります。

しかし、実際にはこのような役割は持っていません。

small要素で囲んだテキストが、SEOに及ぼす影響はまったくありません。

重要な内容があったとしても問題なく使用できます。

間違った使用によってgoogleからペナルティを受ける心配もありません。

ただし、重要な内容であればデフォルトの設定で、小さく目立たないまま表示しておくのは良くありません。

small要素の中に重要な内容が含まれているのであれば、テキストのサイズや色を変える、太字にするなどの対策をとることをおすすめします。

また、他の重要であるということを示す要素と併用するという方法もあります。

HTML
<p><strong><small>重要な注釈</small></strong></p>

strongは重要な内容であるということを示す要素です。検索エンジンにそのことを伝えるSEOの役割を持っています。

一方のsmall要素はSEOの役割を持っていないので、2つの要素を重ねたとしても役割がぶつかることはありません。

上記のコードは、「重要な注釈」という文法上もSEO上も正しい意味を持っています。

smallの使い方

注釈や細目という役割なので、長いテキストに適用することは好ましくありません。

例えば、規約ページの文章すべてをsmallで囲うような使用法は避けるべきです。

基本的に短いテキストに使用するようにしましょう。

以下のような使用法があります。

コピーライト

著作権を示すコピーライトは、small要素がもっともよく使われるテキストです。

HTML
<footer><p><small>&copy;2021 xxx.com</small></p></footer>

フッターである、Webページの下部に表示させる時に使用します。

文中の注釈

テキストの中で、内容を補足するときなどに使う方法です。

HTML
<p>1,980円<small>（税込）</small></p>

文中の値や補助的な記載の際にsmall要素は有効活用できます。

注釈の説明

「※」などの注釈を示す箇所を、後から説明するときなどに使います。

HTML
<p>従来の2倍！<br><small>自社製品比</small></p>

CSSでテキストの大きさを変更

small要素がデフォルトでテキストを小さくする効果があるというのは、前述の通りです。

しかし、デフォルトのままでは、デザインを忠実に再現することは出来ません。

どの程度小さくするのかは、CSSで必ず設定しておくべきです。

CSS
small {
font-size:0.8em;
}

このように一度設定しておけば、注釈が出てくる度に同じ大きさで表示できるので便利です。

注釈も大きさは変えたくないというときは、以下のように記述するとよいでしょう。

CSS
small {font-size:1.0em;}

まとめ

small要素について解説してきました。

名前は知っているけど使ったことはなく、詳しいことは初めて知るという人が多いでしょう。

使わなかったとしても、コーディングに支障をきたすことはないからです。

しかし、注釈や細目をCSSで一括制御できるというのは、上手に使えば便利なものです。

また、テキストを意味合いによって分けられるというのは、HTMLの構造理解に役立ちます。

ワンランク上のコーディングを目指すのであれば、small要素を使ってみるのもよいでしょう。