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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
|
---
title: <hgroup>
slug: Web/HTML/Element/hgroup
tags:
- Deprecated
- Element
- Experimental
- HTML
- HTML5
- Reference
- Web
browser-compat: html.elements.hgroup
translation_of: Web/HTML/Element/hgroup
---
<div>{{HTMLRef}}</div>
<div class="notecard warning">
<h4>Warning</h4>
<p><code><hgroup></code> は使用すべきではありません。どの支援技術も対応しておらず、その結果、その中に配置された見出しの支援に悪影響を及ぼすためです。</p>
<p>詳細については、以下の<a href="#usage_notes">使用上の注意</a>を参照してください。</p>
</div>
<p><strong><code><hgroup></code></strong> は <a href="/ja/docs/Web/HTML">HTML</a> の要素で、文書のセクションの、複数レベルの見出しを表します。これは <code><a href="/ja/docs/Web/HTML/Element/Heading_Elements"><h1>–<h6></a></code> 要素のセットをグループ化します。</p>
<div>{{EmbedInteractiveExample("pages/tabbed/hgroup.html", "tabbed-standard")}}</div>
<table class="properties">
<tbody>
<tr>
<th scope="row"><a href="/ja/docs/Web/Guide/HTML/Content_categories">コンテンツカテゴリー</a></th>
<td><a href="/ja/docs/Web/Guide/HTML/Content_categories#flow_content">フローコンテンツ</a>, 見出しコンテンツ, 知覚可能コンテンツ</td>
</tr>
<tr>
<th scope="row">許可されている内容</th>
<td>1個以上の {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}},{{HTMLElement("h4")}}, {{HTMLElement("h5")}},{{HTMLElement("h6")}}</td>
</tr>
<tr>
<th scope="row">タグの省略</th>
<td>{{no_tag_omission}}</td>
</tr>
<tr>
<th scope="row">許可されている親要素</th>
<td><a href="/ja/docs/Web/Guide/HTML/Content_categories#flow_content">フローコンテンツ</a>を受け入れるすべての要素</td>
</tr>
<tr>
<th scope="row">暗黙の ARIA ロール</th>
<td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td>
</tr>
<tr>
<th scope="row">許可されている ARIA ロール</th>
<td>すべて</td>
</tr>
<tr>
<th scope="row">DOM インターフェイス</th>
<td>{{domxref("HTMLElement")}}</td>
</tr>
</tbody>
</table>
<h2 id="Attributes">属性</h2>
<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>のみがあります。</p>
<h2 id="Usage_notes">使用上の注意</h2>
<div class="note">
<p><code><hgroup></code> 要素は HTML5 (W3C) 仕様から削除されましたが、 WHATWG 版の HTML には依然として含まれています。ほとんどのブラウザーで部分的に実装されており、実装が削除される可能性は低くなっています。<br>
ただし、<code><hgroup></code> 要素の主要な目的は <a href="/ja/docs/Web/HTML/Element/Heading_Elements#the_html5_outline_algorithm">HTML 仕様書で定義されたアウトラインのアルゴリズム</a>によって見出しをどのように表示するかに作用することですが、<strong>どのブラウザーでもアウトラインのアルゴリズムは実装されていないため</strong>、 <code><hgroup></code> のセマンティクスは実際のところ、理論上のものになっています。<br>
HTML5 (W3C) 仕様書では、<code><hgroup></code>を使用せずに<a href="https://www.w3.org/TR/html52/common-idioms-without-dedicated-elements.html#common-idioms-without-dedicated-elements">副見出し、サブタイトル、代替タイトル、スローガン</a>をマークアップする方法についてアドバイスを提供しています。</p>
</div>
<p><code><hgroup></code> 要素は、<em>複数レベル</em>の見出しを構成するために文書のセクションの主見出しと副次的な見出し（副見出しや副題など）をグループ化することが可能です。</p>
<p>言い換えると、 <code><hgroup></code> 要素は副次的な子の <code><a href="/ja/docs/Web/HTML/Element/Heading_Elements"><h1>–<h6></a></code> がアウトライン内で独自のセクションを生成することを妨げます。これらの <code><a href="/ja/docs/Web/HTML/Element/Heading_Elements"><h1>–<h6></a></code> 要素は <code><hgroup></code> の子でなければ通常どおりです。</p>
<p>よって <a href="/ja/docs/Web/HTML/Element/Heading_Elements#the_html5_outline_algorithm">HTML 仕様書で定義されているアウトラインのアルゴリズム</a>で生成される理論的なアウトラインでは、<code><hgroup></code> は全体としてひとつの論理的な見出しを構成します。そして <code><hgroup></code> の子である <code><a href="/ja/docs/Web/HTML/Element/Heading_Elements"><h1>–<h6></a></code> とともに、理論的なアウトライン内でひとつの論理的な見出しを構成するために<em>複数レベル</em>のユニットとしてのアウトラインになります。</p>
<p>このようなアウトラインの (理論的ではない) <em>描画</em>ビューを生成するために、マルチレベルの性質を伝えるため <code><hgroup></code> の見出しをどのように描画するかについて、レンダリングツールのデザインでいくつかの選択が必要です。例えば以下のように、描画されたアウトラインで <code><hgroup></code> を表示するさまざまな方法が考えられます:</p>
<ul>
<li>主見出しの後および最初の副次的な見出しの前にコロンと空白 (“<code>: </code>”) または同様の句読点を置く形で (および同じまたは同様の句読点を、他の副次的な見出しの前に置いて) <code><hgroup></code> を描画されたアウトラインで表示する</li>
<li>主見出しの後に、括弧でくくった副次的な見出しを置く形で、<code><hgroup></code> を描画されたアウトラインで表示する</li>
</ul>
<p>以下の HTML 文書で考えてみましょう。</p>
<pre class="brush: html"><!DOCTYPE html>
<title>HTML Standard</title>
<body>
<hgroup id="document-title">
<h1>HTML</h1>
<h2>Living Standard — Last Updated 12 August 2016</h2>
</hgroup>
<p>Some intro to the document.</p>
<h2>Table of contents</h2>
<ol id=toc>...</ol>
<h2>First section</h2>
<p>Some intro to the first section.</p>
</body></pre>
<p>この文書のアウトラインを描画すると、以下のようになるでしょう。</p>
<p><img alt="" src="outline-colon.png"></p>
<p>ここでは主見出し「<em>HTML</em>」の後にコロンと空白を置いて、副次的な見出し「<em>Living Standard — Last Updated 12 August 2016</em>」が続きます。</p>
<p>あるいは、以下のようにアウトラインを描画することもできるでしょう。</p>
<p><img alt="<hgroup> 要素を含む描画されたアウトライン、第二の見出しの周りに括弧がある" src="outline-paren.png"></p>
<p>ここでは主見出し「<em>HTML</em>」の後に、括弧でくくった副次的な見出し「<em> (Living Standard — Last Updated 12 August 2016)</em>」があります。</p>
<h2 id="Examples">例</h2>
<pre class="brush: html"><hgroup id="document-title">
<h1>HTML</h1>
<h2>Living Standard — Last Updated 12 August 2016</h2>
</hgroup>
</pre>
<h2 id="Accessibility_concerns">アクセシビリティの考慮</h2>
<p><code>hgroup</code> が存在すると、見出しグループの副見出しの部分に関して支援技術に報告される情報が削除される可能性があります。</p>
<h2 id="Specifications">仕様書</h2>
<p>{{Specifications}}</p>
<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
<p>{{Compat}}</p>
<h2 id="See_also">関連情報</h2>
<ul>
<li>他のセクション関連要素: {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}}</li>
<li><a href="/ja/docs/Web/HTML/Element/Heading_Elements">HTML5 文書のセクションとアウトライン</a></li>
</ul>
|
