SYNCER

SYNCER

<h3要素> - 見出し

公開日:

h1〜h6要素は、コンテンツの見出しを表す要素です。h1が最も高いランクで、番号が上がるにつれてランクが下がっていきます。ランクとは、コンテンツの階層のことだと考えると分かりやすいと思います。

概要

名前
h3
カテゴリー
Flow content
Heading content
Palpable content
配置できる場所
hgroup要素の子要素。
Flow contentが期待される場所。
コンテンツモデル
Phrasing content。
タグの省略
開始タグも終了タグも省略できません。
DOM Interface
HTMLHeadingElement
デフォルトのスタイル
h3 {
	display: block;
	font-size: 1.17em;
	-webkit-margin-before: 1em;
	-webkit-margin-after: 1em;
	-webkit-margin-start: 0px;
	-webkit-margin-end: 0px;
	font-weight: bold;
}
仕様書
https://html.spec.whatwg.org/multipage/semantics.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements

属性

グローバル属性

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

サンプルコード

HTML

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

			h2 {
				margin-left: 12px ;
			}

			h3 {
				margin-left: 24px ;
			}

			h4 {
				margin-left: 36px ;
			}
		</style>
	</head>
	<body>

<p>コンテンツの階層で使い分けましょう。</p>

<h1>h1: ページのタイトル</h1>
<h2>h2: 1章の見出し</h2>

	<h3>h3: 1章1項の見出し</h3>

	<h3>h3: 1章2項の見出し</h3>

<h2>h2: 2章の見出し</h2>

	<h3>h3: 2章1項の見出し</h3>

		<h4>h4: その1</h4>

		<h4>h4: その2</h4>

	<h3>h3: 2章2項の見出し</h3>

	</body>
</html>

デモを開く

デモ

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

<body> <div id="___body">

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

<style>

</style>

<script>

</script>