<h4要素> - 見出し
公開日:
h1〜h6要素は、コンテンツの見出しを表す要素です。h1が最も高いランクで、番号が上がるにつれてランクが下がっていきます。ランクとは、コンテンツの階層のことだと考えると分かりやすいと思います。
概要
- 名前
- h4
- カテゴリー
- Flow content
- Heading content
- Palpable content
- 配置できる場所
- hgroup要素の子要素。
- Flow contentが期待される場所。
- コンテンツモデル
- Phrasing content。
- タグの省略
- 開始タグも終了タグも省略できません。
- DOM Interface
- HTMLHeadingElement
- デフォルトのスタイル
h4 { display: block; -webkit-margin-before: 1.33em; -webkit-margin-after: 1.33em; -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>【デモ】<h4要素> - 見出し</title>
<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/h4/">
<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>