【HTML Living Standard】small要素の使い方

small要素の使い方について、初心者にもわかりやすく解説します。

作成日: 2025年09月29日更新日: 2026年03月26日

基本的な使い方

smallオブジェクトは、HTMLドキュメント内で副次的なコメントや著作権表示、法的声明など、補足的で重要度が低い内容を表すオブジェクトです。この要素は、文書の主要なコンテンツに対して付加的な情報を提供することを目的としています。具体的には、周囲のテキストと比較して、コンテンツの重要度を相対的に低く表現したい場合に利用されます。

ブラウザのデフォルトスタイルでは、通常、small要素に含まれるテキストを周囲のテキストよりも小さく表示します。しかし、これは純粋に視覚的な目的ではなく、コンテンツの意味的な重要度を示すために使用されるべきです。例えば、免責事項、著作権表示、法的要件に関する小さな活字、サイドコメントといった情報に適しています。単にテキストの見た目を小さくしたい場合は、CSSのfont-sizeプロパティを使用することが推奨されます。

small要素を適切に利用することで、コンテンツの意味的な構造が明確になり、スクリーンリーダーなどの支援技術や検索エンジンがページの内容をより正確に理解するのに役立ちます。HTML Living Standardでは、この要素の役割は、二次的なコメントや「スモールプリント」コンテンツをマークアップすることであると定義されています。

公式リファレンス: : The Side Comment element

構文(syntax)


1<small>コンテンツ</small>

引数(parameters)

引数なし

引数はありません

戻り値(return)

戻り値なし

戻り値はありません

サンプルコード

HTML smallタグで注釈表示する


1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>HTML smallタグのサンプル</title>
7</head>
8<body>
9    <h1>smallタグの使用例</h1>
10
11    <p>
12        これは通常のテキストです。
13        <small>このテキストはsmallタグによって囲まれており、補足情報や免責事項など、相対的に重要度の低い内容を示します。</small>
14        テキストは続きます。
15    </p>
16
17    <p>
18        著作権表示: <small>&copy; 2023 サンプル株式会社. 全ての権利を留保します。</small>
19    </p>
20
21    <p>
22        備考: <small>この情報は変更される可能性があります。最新の情報は公式ウェブサイトをご確認ください。</small>
23    </p>
24
25    <!--
26        smallタグは、副次的なコメント、免責事項、著作権表示、法的制限など、
27        細字で表示されるべき内容（通常、視覚的に小さく表示されます）に使用されます。
28    -->
29</body>
30</html>

HTMLのsmallタグは、ウェブページ上で相対的に重要度の低い内容を示すために使用される要素です。主に、本文に対する補足情報、免責事項、著作権表示、法的制限、注意書きといった、副次的な情報を示す際に活用されます。このタグで囲まれたテキストは、多くのブラウザにおいて、通常、標準のテキストよりも小さなフォントサイズで視覚的に表示されます。

サンプルコードでは、通常の文章の一部として補足説明を加えたり、著作権表示や注意事項を示したりする箇所でsmallタグが使われています。これにより、その部分のテキストが本文の主要な内容とは異なる、重要度の低い情報であることを明示しています。

smallタグは、単に文字サイズを小さくするだけでなく、そのコンテンツが持つ意味合いとして「重要度が低い情報」であることをブラウザや検索エンジンに伝えるセマンティックな役割を持っています。これは、アクセシビリティや検索エンジン最適化（SEO）の観点からも重要です。

HTMLの要素であるため、smallタグ自体が特定の引数を取ったり、プログラム的な戻り値を返したりすることはありません。代わりに、このタグで囲まれたテキストは、ウェブページ上にその意味合いと共に表示されるという挙動をします。コンテンツの意味を適切に構造化することで、ウェブページの品質向上に繋がりますので、ぜひ理解を深めてください。

smallタグは、補足情報、免責事項、著作権表示など、本文とは別に提示される相対的に重要度の低い内容を示すために使用します。単に文字を小さく見せる目的で使うのは避け、視覚的なスタイル調整はCSSで行うようにしましょう。このタグは段落全体を囲むのではなく、付随的なテキストの一部に適用するのが適切です。重要な情報に使うと、視覚的に小さくなり読みにくくなる可能性があるため注意が必要です。意味のある用途で正しく使い、アクセシビリティも考慮することが大切です。

HTML small 要素の使い方と適用例


1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>&lt;small&gt;要素のサンプル</title>
7</head>
8<body>
9    <h1>&lt;small&gt;要素の使い方</h1>
10
11    <p>これは通常のテキストです。</p>
12
13    <!-- <small>要素は、著作権表示や免責事項など、付随的な情報を表すために使用します。 -->
14    <!-- 内容が重要度が低い、あるいは補足的な意味合いを持つテキストをマークアップする際に適しています。 -->
15    <p>
16        ウェブサイトのフッターなどで見られることがあります。
17        <small>© 2023 サンプル株式会社. 全ての権利を保有します。</small>
18    </p>
19
20    <p>
21        <small>この情報は変更される可能性があります。</small> ご了承ください。
22    </p>
23</body>
24</html>

HTMLの要素は、ウェブページ上で重要度が低い、あるいは補足的な情報を表すために使用されます。具体的には、著作権表示、免責事項、法的制約、あるいは記事のサイドコメントなど、主要なコンテンツに付随するテキストをマークアップする際に適しています。この要素は、単に文字を小さく表示するだけでなく、その内容が「付随的な情報である」というセマンティックな意味をブラウザや検索エンジンに伝えます。これにより、ウェブページのコンテンツ構造がより明確になります。

一般的なプログラミング言語の関数やメソッドに見られるような「引数」や「戻り値」という概念は、HTMLの要素にはありません。要素も同様に、特定の値を入力として受け取ったり、処理結果を返したりすることはありません。代わりに、タグとタグで囲まれたテキストが、その要素の内容として扱われます。

提供されたサンプルコードでは、ウェブサイトのフッターなどでよく見られる「© 2023 サンプル株式会社. 全ての権利を保有します。」といった著作権表示や、「この情報は変更される可能性があります。」といった注意書きに要素が使われています。これらは、メインコンテンツに直接関わるわけではないものの、ユーザーにとって重要な補足情報であり、要素で適切にマークアップされています。このように、コンテンツの補助的な情報を明確に区別し、ウェブページの可読性やアクセシビリティを向上させる目的で利用されます。

要素は、文字の見た目を小さくするために使うものではありません。著作権表示や免責事項、法的注意書きなど、本質的な内容ではない付随的な情報や、文書全体における重要度が低い補足情報をマークアップするために使用します。

単にテキストのサイズを小さく見せたい場合は、CSS（Cascading Style Sheets）を使用してスタイルを適用するのが正しい方法です。意味を持たせずに安易に要素を使用すると、文書構造を誤解させたり、スクリーンリーダーなどの補助技術利用者にとって混乱を招く可能性があります。

サンプルコードのように、ウェブサイトのフッターにある著作権表示など、付随的な情報をセマンティックに表現する際に活用してください。ただし、視覚的に文字が小さくなるため、可読性を損ねないよう、重要な情報には使用せず、またCSSで適切なフォントサイズを調整することも検討してください。