Web/HTML/Element/hgroup を更新 (#1452)

- 2021/06/03 時点の英語版に同期
- fix #1404

1 files changed, 18 insertions, 26 deletions

diff --git a/files/ja/web/html/element/hgroup/index.html b/files/ja/web/html/element/hgroup/index.html
index ac206a5871..50fb215618 100644
--- a/files/ja/web/html/element/hgroup/index.html
+++ b/files/ja/web/html/element/hgroup/index.html
@@ -9,18 +9,25 @@ tags:
   - HTML5
   - Reference
   - Web
+browser-compat: html.elements.hgroup
 translation_of: Web/HTML/Element/hgroup
 ---
-<div>{{HTMLRef}}{{deprecated_header}}</div>
+<div>{{HTMLRef}}</div>
 
-<p><strong>HTML の <code>&lt;hgroup&gt;</code> 要素</strong>は、文書のセクションの、複数レベルの見出しを表します。これは <code><a href="/ja/docs/Web/HTML/Element/Heading_Elements">&lt;h1&gt;–&lt;h6&gt;</a></code> 要素のセットをグループ化します。</p>
+<div class="notecard warning">
+  <h4>Warning</h4>
+  <p><code>&lt;hgroup&gt;</code> は使用すべきではありません。どの支援技術も対応しておらず、その結果、その中に配置された見出しの支援に悪影響を及ぼすためです。</p>
+  <p>詳細については、以下の<a href="#usage_notes">使用上の注意</a>を参照してください。</p>
+</div>
+
+<p><strong><code>&lt;hgroup&gt;</code></strong> は <a href="/ja/docs/Web/HTML">HTML</a> の要素で、文書のセクションの、複数レベルの見出しを表します。これは <code><a href="/ja/docs/Web/HTML/Element/Heading_Elements">&lt;h1&gt;–&lt;h6&gt;</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>
+   <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>
@@ -58,7 +65,7 @@ translation_of: Web/HTML/Element/hgroup
 
 <div class="note">
 <p><code>&lt;hgroup&gt;</code> 要素は HTML5 (W3C) 仕様から削除されましたが、 WHATWG 版の HTML には依然として含まれています。ほとんどのブラウザーで部分的に実装されており、実装が削除される可能性は低くなっています。<br>
- ただし、<code>&lt;hgroup&gt;</code> 要素の主要な目的は <a href="/ja/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#the_html5_outline_algorithm">HTML 仕様書で定義されたアウトラインのアルゴリズム</a>によって見出しをどのように表示するかに作用することですが、<strong>どのブラウザーでもアウトラインのアルゴリズムは実装されていないため</strong>、 <code>&lt;hgroup&gt;</code> のセマンティクスは実際のところ、理論上のものになっています。<br>
+ ただし、<code>&lt;hgroup&gt;</code> 要素の主要な目的は <a href="/ja/docs/Web/HTML/Element/Heading_Elements#the_html5_outline_algorithm">HTML 仕様書で定義されたアウトラインのアルゴリズム</a>によって見出しをどのように表示するかに作用することですが、<strong>どのブラウザーでもアウトラインのアルゴリズムは実装されていないため</strong>、 <code>&lt;hgroup&gt;</code> のセマンティクスは実際のところ、理論上のものになっています。<br>
  HTML5 (W3C) 仕様書では、<code>&lt;hgroup&gt;</code>を使用せずに<a href="https://www.w3.org/TR/html52/common-idioms-without-dedicated-elements.html#common-idioms-without-dedicated-elements">副見出し、サブタイトル、代替タイトル、スローガン</a>をマークアップする方法についてアドバイスを提供しています。</p>
 </div>
 
@@ -66,7 +73,7 @@ translation_of: Web/HTML/Element/hgroup
 
 <p>言い換えると、 <code>&lt;hgroup&gt;</code> 要素は副次的な子の <code><a href="/ja/docs/Web/HTML/Element/Heading_Elements">&lt;h1&gt;–&lt;h6&gt;</a></code> がアウトライン内で独自のセクションを生成することを妨げます。これらの <code><a href="/ja/docs/Web/HTML/Element/Heading_Elements">&lt;h1&gt;–&lt;h6&gt;</a></code> 要素は <code>&lt;hgroup&gt;</code> の子でなければ通常どおりです。</p>
 
-<p>よって <a href="/ja/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#the_html5_outline_algorithm">HTML 仕様書で定義されているアウトラインのアルゴリズム</a>で生成される理論的なアウトラインでは、<code>&lt;hgroup&gt;</code> は全体としてひとつの論理的な見出しを構成します。そして <code>&lt;hgroup&gt;</code> の子である <code><a href="/ja/docs/Web/HTML/Element/Heading_Elements">&lt;h1&gt;–&lt;h6&gt;</a></code> とともに、理論的なアウトライン内でひとつの論理的な見出しを構成するために<em>複数レベル</em>のユニットとしてのアウトラインになります。</p>
+<p>よって <a href="/ja/docs/Web/HTML/Element/Heading_Elements#the_html5_outline_algorithm">HTML 仕様書で定義されているアウトラインのアルゴリズム</a>で生成される理論的なアウトラインでは、<code>&lt;hgroup&gt;</code> は全体としてひとつの論理的な見出しを構成します。そして <code>&lt;hgroup&gt;</code> の子である <code><a href="/ja/docs/Web/HTML/Element/Heading_Elements">&lt;h1&gt;–&lt;h6&gt;</a></code> とともに、理論的なアウトライン内でひとつの論理的な見出しを構成するために<em>複数レベル</em>のユニットとしてのアウトラインになります。</p>
 
 <p>このようなアウトラインの (理論的ではない) <em>描画</em>ビューを生成するために、マルチレベルの性質を伝えるため <code>&lt;hgroup&gt;</code> の見出しをどのように描画するかについて、レンダリングツールのデザインでいくつかの選択が必要です。例えば以下のように、描画されたアウトラインで <code>&lt;hgroup&gt;</code> を表示するさまざまな方法が考えられます:</p>
 
@@ -111,36 +118,21 @@ translation_of: Web/HTML/Element/hgroup
 &lt;/hgroup&gt;
 </pre>
 
-<h2 id="Specifications">仕様書</h2>
+<h2 id="Accessibility_concerns">アクセシビリティの考慮</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-hgroup-element', '&lt;hgroup&gt;')}}</td>
-    <td>{{Spec2('HTML WHATWG')}}</td>
-    <td></td>
-  </tr>
-  </tbody>
-</table>
+<p><code>hgroup</code> が存在すると、見出しグループの副見出しの部分に関して支援技術に報告される情報が削除される可能性があります。</p>
 
-<h2 id="Accessibility_concerns">アクセシビリティの考慮</h2>
+<h2 id="Specifications">仕様書</h2>
 
-<p><code>hgroup</code> が存在すると、見出しグループの小見出し部分について支援技術に報告された情報を削除する可能性があります。</p>
+<p>{{Specifications}}</p>
 
 <h2 id="Browser_compatibility">ブラウザーの互換性</h2>
 
-<p>{{Compat("html.elements.hgroup")}}</p>
+<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/Guide/HTML/Using_HTML_sections_and_outlines">HTML5 文書のセクションとアウトライン</a></li>
+ <li><a href="/ja/docs/Web/HTML/Element/Heading_Elements">HTML5 文書のセクションとアウトライン</a></li>
 </ul>