Web/HTML/Element/hgroup を更新

2021/03/08 時点の英語版に同期

1 files changed, 37 insertions, 36 deletions

diff --git a/files/ja/web/html/element/hgroup/index.html b/files/ja/web/html/element/hgroup/index.html
index 68e33d95f2..ac206a5871 100644
--- a/files/ja/web/html/element/hgroup/index.html
+++ b/files/ja/web/html/element/hgroup/index.html
@@ -2,31 +2,26 @@
 title: <hgroup>
 slug: Web/HTML/Element/hgroup
 tags:
+  - Deprecated
+  - Element
   - Experimental
   - HTML
-  - HTML セクション
   - HTML5
-  - 'HTML:フローコンテンツ'
-  - 'HTML:知覚可能コンテンツ'
-  - 'HTML:見出しコンテンツ'
   - Reference
-  - ウェブ
-  - 要素
+  - Web
 translation_of: Web/HTML/Element/hgroup
 ---
-<div>{{HTMLRef}}</div>
+<div>{{HTMLRef}}{{deprecated_header}}</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>{{EmbedInteractiveExample("pages/tabbed/hgroup.html", "tabbed-standard")}}</div>
 
-<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
-
 <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>, 見出しコンテンツ, 知覚可能コンテンツ</td>
+   <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>
@@ -38,11 +33,15 @@ translation_of: Web/HTML/Element/hgroup
   </tr>
   <tr>
    <th scope="row">許可されている親要素</th>
-   <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>を受け入れるすべての要素</td>
+   <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>{{ARIARole("tab")}}, {{ARIARole("presentation")}}</td>
+   <td>すべて</td>
   </tr>
   <tr>
    <th scope="row">DOM インターフェイス</th>
@@ -51,23 +50,23 @@ translation_of: Web/HTML/Element/hgroup
  </tbody>
 </table>
 
-<h2 id="Attributes" name="Attributes">属性</h2>
+<h2 id="Attributes">属性</h2>
 
 <p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>のみがあります。</p>
 
-<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2>
+<h2 id="Usage_notes">使用上の注意</h2>
 
 <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>
- HTML5 (W3C) 仕様書では、<code>&lt;hgroup&gt;</code>を使用せずに<a href="https://www.w3.org/TR/html5/common-idioms.html#sub-head">副見出し、サブタイトル、代替タイトル、スローガン</a>をマークアップする方法についてアドバイスを提供しています。</p>
+ ただし、<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>
+ 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>
 
 <p><code>&lt;hgroup&gt;</code> 要素は、<em>複数レベル</em>の見出しを構成するために文書のセクションの主見出しと副次的な見出し（副見出しや副題など）をグループ化することが可能です。</p>
 
 <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/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>このようなアウトラインの (理論的ではない) <em>描画</em>ビューを生成するために、マルチレベルの性質を伝えるため <code>&lt;hgroup&gt;</code> の見出しをどのように描画するかについて、レンダリングツールのデザインでいくつかの選択が必要です。例えば以下のように、描画されたアウトラインで <code>&lt;hgroup&gt;</code> を表示するさまざまな方法が考えられます:</p>
 
@@ -94,17 +93,17 @@ translation_of: Web/HTML/Element/hgroup
 
 <p>この文書のアウトラインを描画すると、以下のようになるでしょう。</p>
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/14599/outline-colon.png" style="height: 99px; width: 450px;"></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="Rendered outline that includes an &lt;hgroup> element, with parens around the secondary heading" src="https://mdn.mozillademos.org/files/14601/outline-paren.png" style="height: 106px; width: 450px;"></p>
+<p><img alt="&lt;hgroup&gt; 要素を含む描画されたアウトライン、第二の見出しの周りに括弧がある" src="outline-paren.png"></p>
 
 <p>ここでは主見出し「<em>HTML</em>」の後に、括弧でくくった副次的な見出し「<em> (Living Standard — Last Updated 12 August 2016)</em>」があります。</p>
 
-<h2 id="Examples" name="Examples">例</h2>
+<h2 id="Examples">例</h2>
 
 <pre class="brush: html">&lt;hgroup id="document-title"&gt;
   &lt;h1&gt;HTML&lt;/h1&gt;
@@ -112,34 +111,36 @@ translation_of: Web/HTML/Element/hgroup
 &lt;/hgroup&gt;
 </pre>
 
-<h2 id="Specifications" name="Specifications">仕様書</h2>
+<h2 id="Specifications">仕様書</h2>
 
 <table class="standard-table">
- <thead>
+  <thead>
   <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
+    <th scope="col">仕様書</th>
+    <th scope="col">状態</th>
+    <th scope="col">備考</th>
   </tr>
- </thead>
- <tbody>
+  </thead>
+  <tbody>
   <tr>
-   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-hgroup-element', '&lt;hgroup&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
+    <td>{{SpecName('HTML WHATWG', 'semantics.html#the-hgroup-element', '&lt;hgroup&gt;')}}</td>
+    <td>{{Spec2('HTML WHATWG')}}</td>
+    <td></td>
   </tr>
- </tbody>
+  </tbody>
 </table>
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+<h2 id="Accessibility_concerns">アクセシビリティの考慮</h2>
+
+<p><code>hgroup</code> が存在すると、見出しグループの小見出し部分について支援技術に報告された情報を削除する可能性があります。</p>
 
-<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
 
 <p>{{Compat("html.elements.hgroup")}}</p>
 
-<h2 id="See_also" name="See_also">関連情報</h2>
+<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 class="deki-ns current" href="/ja/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">HTML5 文書のセクションとアウトライン</a></li>
+ <li><a href="/ja/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines">HTML5 文書のセクションとアウトライン</a></li>
 </ul>