＜small要素＞ - 注釈、細目

公開日: 2017/02/09

small要素は、注釈や細目を表す要素です。具体的には、著作権や免責事項、法的規制などの情報をマークアップするのに適しています。文字を小さくするために利用してはいけません。

概要

名前

small

カテゴリー

Flow content

Phrasing content

Palpable content

配置できる場所

Phrasing contentが期待される場所。

コンテンツモデル

Phrasing content。

タグの省略

開始タグも終了タグも省略できません。

DOM Interface

HTMLElement

デフォルトのスタイル

small {
	font-size: smaller;
}

仕様書

https://html.spec.whatwg.org/multipage/semantics.html#the-small-element

属性

グローバル属性

全てのタグで利用できるグローバル属性を指定できます。

説明

正しい使い方

small要素は、注釈や細目であることを意味付けするための要素です。例えば、ウェブサイトや記事のフッターに著作権を掲載するのに適しています。

HTML

<!-- 著作権情報 -->
<p><small>© 2001-2010 SYNCER</small></p>

例えば、下記は価格案内で注釈を入れる例です。

HTML

<!-- 価格の注釈 -->
<p>宿泊代: 8,500円 <small>(東京都の宿泊税100円は含まれていません)</small></p>

間違った使い方

small要素は、その名前が原因で間違った使い方をしてしまうことが珍しくありません。次のような使い方をしないようにしましょう。

文字を小さくする

文字を小さくするためにsmall要素を使うのは適切ではありません。文字を小さくしたいならスタイルシートを利用しましょう。

HTML

<!-- 間違った例 -->
<p>この前行ったケーキ屋さん、<small>大きい声では言えないけど、</small>とっても美味しかった。</p>

<!-- 正しい例 -->
<p>この前行ったケーキ屋さん、<span class="aaa">大きい声では言えないけど、</span>とっても美味しかった。</p>

デモを開く

CSS

.aaa {
	font-size: smaller ;
}

度合いを弱める

small要素には、em要素の強調の意味や、strong要素の重要の意味を弱める役割はありません。重要や強調の意味を弱めるには、そもそもそれらの要素を使用しないで下さい。

サンプルコード

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>【デモ】＜small要素＞ - 注釈、細目</title>
		<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/small/">
		<style>
			body {
				background-color: #fff ;
			}
		</style>
	</head>
	<body>

<p>small要素は、注釈や細目をマークアップするための要素です。著作権情報などをマークアップしましょう。</p>

<h1>ラーメン店の見つけ方</h1>
<p>コンビニにラーメン特集本が売ってるので、それを読みましょう。</p>

<p><small>© 2001-2010 SYNCER</small></p>

	</body>
</html>

デモを開く

</head><body>までを含めて下さい。

<!DOCTYPE html> <html> <head> <base href="/602/"> <meta charset="utf-8"> <title>【デモ】＜small要素＞ - 注釈、細目</title> <link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/small/"> </head> <body>

</div> <script>...</script> </body> </html>

<style>

body { background-color: #fff ; }

</style>

</script>