＜strong要素＞ - 重要

公開日: 2017/02/09

strong要素は、重要を表す要素です。他のコンテンツと比べて詳細、重大、深刻、緊急であることを表現できます。

概要

名前

strong

カテゴリー

Flow content

Phrasing content

Palpable content

配置できる場所

Phrasing contentが期待される場所。

コンテンツモデル

Phrasing content。

タグの省略

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

DOM Interface

HTMLElement

デフォルトのスタイル

strong {
	font-weight: bold;
}

仕様書

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

属性

グローバル属性

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

説明

定型部分との区別

例えば、見出しの中で、定型部分と区別するために利用できます。

HTML

<!-- 「第4章 :」の部分は、見出しの内容ではない -->
<h2>第4章: <strong>ラーメンと財布の関係</strong></h2>
<p>…</p>

<!-- 「第5章 :」の部分は、見出しの内容ではない -->
<h2>第5章: <strong>ラーメンと体重の関係</strong></h2>
<p>…</p>

見出しに余計な一言を入れた場合にも、strong要素を使って重要部分を区別をすることができます。

HTML

<!-- 日記のメインは「今日食べたラーメン」 -->
<h1><strong>今日食べたラーメン</strong>、その他いろいろ</h1>
<p>…</p>

重要な通知

strong要素はドキュメントの中で緊急に知らせる必要がある部分や、警告をマークアップするのに利用できます。例えば、過去にレビューをしたけど現在は存在しない店舗、アプリケーションのセキュリティ情報のお知らせなどに有用です。

HTML

<h1>なんとかラーメン屋のレビュー</h1>

<p><strong>このラーメンは2017年1月に閉店しました。現在は行っても存在しないのでご注意下さい。</strong></p>

<p>この店のラーメンは何と言ってもスープが美味い。何故なら…</p>

リマインダーのサービスなどで、ユーザーが真っ先に読むべき部分をマークアップするのにも適しています。

HTML

<h1>Aさんのリマインダー</h1>

<ul>
	<li><strong>B社への振り込み (12:00まで)</strong></li>
	<li>シュレッダーの修理</li>
	<li>会議で売り上げを報告</li>
	<li>社内ブログの更新</li>
</ul>

サンプルコード

HTML

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

<p>strong要素は、重要を表す要素です。他の部分と比べてより深刻、重大、緊急であることを表現できます。</p>

<h1>架空ラーメン店のレビュー</h1>

<p><strong>このラーメン店は2017年2月に閉店しています。現在はありません。</strong></p>

<h2>メニュー表</h2>
<p>架空ラーメン店のメニューは次の通りです。</p>

	</body>
</html>

デモを開く

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

<!DOCTYPE html> <html> <head> <base href="/601/"> <meta charset="utf-8"> <title>【デモ】＜strong要素＞ - 重要</title> <link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/strong/"> </head> <body>

<p>strong要素は、重要を表す要素です。他の部分と比べてより深刻、重大、緊急であることを表現できます。</p> <h1>架空ラーメン店のレビュー</h1> <p><strong>このラーメン店は2017年2月に閉店しています。現在はありません。</strong></p> <h2>メニュー表</h2> <p>架空ラーメン店のメニューは次の通りです。</p>

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

<style>

body { background-color: #fff ; }

</style>

</script>