1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
|
---
title: <header>
slug: Web/HTML/Element/header
tags:
- Element
- HTML
- HTML sections
- Reference
translation_of: Web/HTML/Element/header
---
<div>{{HTMLRef}}</div>
<p><span class="seoSummary"><strong>HTML の <code><header></code> 要素</strong>は、導入的なコンテンツ、ふつうは導入部やナビゲーション等のグループを表します。見出し要素だけでなく、ロゴ、検索フォーム、作者名、その他の要素を含むこともできます。</span></p>
<div>{{EmbedInteractiveExample("pages/tabbed/header.html", "tabbed-standard")}}</div>
<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力していただけるのであれば、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
<table class="properties">
<tbody>
<tr>
<th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th>
<td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>, <a href="/ja/docs/Web/HTML/Content_categories#Palpable_content">知覚可能コンテンツ</a></td>
</tr>
<tr>
<th scope="row">許可されている内容</th>
<td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>。但し、子孫に他の <code><header></code> や {{HTMLElement("footer")}} がないこと。</td>
</tr>
<tr>
<th scope="row">タグの省略</th>
<td>{{no_tag_omission}}</td>
</tr>
<tr>
<th scope="row">許可されている親要素</th>
<td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>を受け入れるすべての要素。ただし、{{HTMLElement("address")}}、{{HTMLElement("footer")}}、他の {{HTMLElement("header")}} 要素の子孫要素として配置してはなりません。</td>
</tr>
<tr>
<th scope="row">暗黙の ARIA ロール</th>
<td><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Banner_role">banner</a>, または <code><a href="/ja/docs/Web/HTML/Element/article">article</a></code>, <code><a href="/ja/docs/Web/HTML/Element/aside">aside</a></code>, <code><a href="/ja/docs/Web/HTML/Element/main">main</a></code>, <code><a href="/ja/docs/Web/HTML/Element/nav">nav</a></code>, <code><a href="/ja/docs/Web/HTML/Element/section">section</a></code> の各要素、または <code>role=<a href="/ja/docs/Web/Accessibility/ARIA/Roles/Article_Role">article</a></code>, <code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Complementary_role">complementary</a></code>, <code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Main_role">main</a></code>, <code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Navigation_Role">navigation</a></code>, <code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Region_role">region</a></code> の要素の子孫である場合は<a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td>
</tr>
<tr>
<th scope="row">許可されている ARIA ロール</th>
<td>{{ARIARole("group")}}, {{ARIARole("presentation")}}, {{ARIARole("none")}}</td>
</tr>
<tr>
<th scope="row">DOM インターフェイス</th>
<td>{{domxref("HTMLElement")}}</td>
</tr>
</tbody>
</table>
<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2>
<p><code><header></code> 要素は区分コンテンツではありません。つまり、この要素が新たな<a href="/ja/docs/Sections_and_Outlines_of_an_HTML5_document">アウトライン</a>を生成することはありません。すなわち <code>header</code> 要素は通常、自身を囲む <code>section</code> の見出し (<code>h1</code>–<code>h6</code> 要素) を含むことを意図していますが、<strong>必須ではありません</strong>。</p>
<h3 id="Historical_Usage" name="Historical_Usage">歴史的な使用法</h3>
<p><code><header></code> 要素は {{glossary("HTML5")}} まで仕様書には現れていませんでしたが、実は HTML の最初期に存在していました。 <a href="http://info.cern.ch/">the very first website</a> に見られるように、元は <code><head></code> 要素として使用されていました。ある時点で、別な名前を使用することが決定されました。これによって <code><header></code> が自由になり、のちに別な役割を担うことができるようになりました。</p>
<h2 id="Attributes" name="Attributes">属性</h2>
<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>のみがあります。</p>
<h2 id="Examples" name="Examples">例</h2>
<h3 id="Page_Header" name="Page_Header">ページのヘッダー</h3>
<pre class="brush: html notranslate"><header>
<h1>Main Page Title</h1>
<img src="mdn-logo-sm.png" alt="MDN logo">
</header>
</pre>
<h3 id="Article_Header" name="Article_Header">記事のヘッダー</h3>
<pre class="brush: html notranslate"><article>
<header>
<h2>The Planet Earth</h2>
<p>Posted on Wednesday, <time datetime="2017-10-04">4 October 2017</time> by Jane Smith</p>
</header>
<p>We live on a planet that's blue and green, with so many things still unseen.</p>
<p><a href="https://janesmith.com/the-planet-earth/">Continue reading....</a></p>
</article>
</pre>
<h2 id="Specifications" name="Specifications">仕様書</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">仕様書</th>
<th scope="col">状態</th>
<th scope="col">備考</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', 'semantics.html#the-header-element', '<header>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', 'sections.html#the-header-element', '<header>')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
<p>{{Compat("html.elements.header")}}</p>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li>他の区分化関連要素: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("footer")}}, {{HTMLElement("section")}}, {{HTMLElement("address")}}</li>
<li><a href="/ja/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines">HTML のセクションとアウトラインの使用</a></li>
</ul>
|
