Web/HTML/Element/section を更新

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

1 files changed, 88 insertions, 34 deletions

diff --git a/files/ja/web/html/element/section/index.html b/files/ja/web/html/element/section/index.html
index 6c8e43f38f..2ad3782145 100644
--- a/files/ja/web/html/element/section/index.html
+++ b/files/ja/web/html/element/section/index.html
@@ -2,39 +2,34 @@
 title: '<section>: 汎用セクション要素'
 slug: Web/HTML/Element/section
 tags:
+  - Element
   - HTML
-  - HTML セクション
-  - 'HTML:フローコンテンツ'
-  - 'HTML:区分コンテンツ'
-  - 'HTML:知覚可能コンテンツ'
+  - HTML sections
+  - HTML:フローコンテンツ
+  - HTML:区分コンテンツ
+  - HTML:知覚可能コンテンツ
   - Reference
-  - ウェブ
-  - 要素
+  - Section
+  - Web
 translation_of: Web/HTML/Element/section
 ---
 <div>{{HTMLRef}}</div>
 
-<p><span class="seoSummary"><strong>HTML の <code>&lt;section&gt;</code> 要素</strong>は、 HTML 文書の中で単独のセクション (区間) を表します。セクションを表現するより意味的に具体的な要素がない場合に使用します。</span>必ずではありませんが、通常はセクションには見出しがあります。</p>
+<p><span class="seoSummary"><strong>HTML の <code>&lt;section&gt;</code> 要素</strong>は、文書の自立した一般的なセクション (区間) を表します。そのセクションを表現するより意味的に具体的な要素がない場合に使用します。</span>少数の例外を除いて、セクションには見出しを置いてください。</p>
 
 <div>{{EmbedInteractiveExample("pages/tabbed/section.html", "tabbed-standard")}}</div>
 
 <div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力していただけるのであれば、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
 
-<p>例えば、ナビゲーションメニューは {{htmlelement("nav")}} 要素で表しますが、検索結果の一覧や地図の表示やコントロールには具体的な要素がないので、 <code>&lt;section&gt;</code> の中に入れることができます。</p>
-
-<div class="note">
-<p><strong>メモ:</strong> 要素の内容が個別の記事をまとめたものであれば、 {{HTMLElement("article")}} 要素がより適しているかもしれません。</p>
-</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#Sectioning_content">区分コンテンツ</a>, <a href="/ja/docs/Web/HTML/Content_categories#Palpable_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>, <a href="/ja/docs/Web/Guide/HTML/Content_categories#sectioning_content">区分コンテンツ</a>, <a href="/ja/docs/Web/Guide/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></td>
+   <td><a href="/ja/docs/Web/Guide/HTML/Content_categories#flow_content">フローコンテンツ</a></td>
   </tr>
   <tr>
    <th scope="row">タグの省略</th>
@@ -42,11 +37,15 @@ translation_of: Web/HTML/Element/section
   </tr>
   <tr>
    <th scope="row">許可されている親要素</th>
-   <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>を受け入れるすべての要素。ただし、 <code>&lt;section&gt;</code> 要素は {{HTMLElement("address")}} 要素の子孫要素として配置してはならない。</td>
+   <td><a href="/ja/docs/Web/Guide/HTML/Content_categories#flow_content">フローコンテンツ</a>を受け入れるすべての要素。ただし、 <code>&lt;section&gt;</code> 要素は {{HTMLElement("address")}} 要素の子孫要素として配置してはならない。</td>
+  </tr>
+  <tr>
+    <th scope="row">暗黙の ARIA ロール</th>
+    <td>要素に<a href="https://developer.paciellogroup.com/blog/2017/04/what-is-an-accessible-name/">アクセシブル名</a>がある場合は<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("alert")}}, {{ARIARole("alertdialog")}}, {{ARIARole("application")}}, {{ARIARole("banner")}}, {{ARIARole("complementary")}}, {{ARIARole("contentinfo")}}, {{ARIARole("dialog")}}, {{ARIARole("document")}}, {{ARIARole("feed")}}, {{ARIARole("log")}}, {{ARIARole("main")}}, {{ARIARole("marquee")}}, {{ARIARole("navigation")}}, {{ARIARole("search")}}, {{ARIARole("status")}}, {{ARIARole("tabpanel")}}</td>
+   <td>{{ARIARole("alert")}}, {{ARIARole("alertdialog")}}, {{ARIARole("application")}}, {{ARIARole("banner")}}, {{ARIARole("complementary")}}, {{ARIARole("contentinfo")}}, {{ARIARole("dialog")}}, {{ARIARole("document")}}, {{ARIARole("feed")}}, {{ARIARole("log")}}, {{ARIARole("main")}}, {{ARIARole("marquee")}}, {{ARIARole("navigation")}}, {{ARIARole("none")}}, {{ARIARole("note")}}, {{ARIARole("presentation")}}, {{ARIARole("search")}}, {{ARIARole("status")}}, {{ARIARole("tabpanel")}}</td>
   </tr>
   <tr>
    <th scope="row">DOM インターフェイス</th>
@@ -55,36 +54,90 @@ translation_of: Web/HTML/Element/section
  </tbody>
 </table>
 
-<h2 id="Attributes" name="Attributes">属性</h2>
+<h2 id="Attributes">属性</h2>
 
 <p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes" rel="internal">グローバル属性</a>のみがあります。</p>
 
-<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2>
+<h2 id="Usage_notes">使用上の注意</h2>
+
+<p>前述のように、 <code>&lt;section&gt;</code> は汎用的な区分要素ですので、それを表現するためのより具体的な要素がない場合にのみ使用してください。例えば、ナビゲーションメニューは {{htmlelement("nav")}} 要素で囲むべきですが、検索結果のリストや地図表示とそのコントロールなどは特定の要素を持たないので、 <code>&lt;section&gt;</code> の中に入れることができます。</p>
+
+<p>また、次のようなことも考慮してください。</p>
 
 <ul>
- <li>それぞれの <code>&lt;section&gt;</code> は識別可能であるべき、特に <code>&lt;section&gt;</code> の子要素に見出し ({{HTMLElement('h1')}}-{{HTMLElement('h6')}} 要素) を含めるべきです。</li>
- <li><code>&lt;section&gt;</code> 要素の内容が単独で配信して意味がある場合は、代わりに {{HTMLElement("article")}} 要素を使用してください。</li>
- <li><code>&lt;section&gt;</code> 要素を単なる汎用コンテナーとして使用しないでください。このような場合、特にスタイル付けのみの目的で区切るのは {{HTMLElement("div")}} の役割です。大まかに言えば、 section は文書のアウトラインに論理的に現れるものに使用してください。</li>
+  <li>この要素の内容が単独の、自立した記事として配信されて意味のある不可分の単位のコンテンツ (例えば、ブログ投稿やブログのコメント、新聞記事など) を表す場合は、 {{HTMLElement("article")}} 要素を使用したほうがいいでしょう。</li>
+  <li>内容が、メインコンテンツと一緒に機能する有用な付帯情報を表しているものの、メインコンテンツの一部ではない場合 (関連リンクや著者の経歴など) は、 {{HTMLElement("aside")}} を使用してください。</li>
+  <li>内容が文書のメインコンテンツを表す場合は、 {{HTMLElement("main")}} を使用してください。</li>
+  <li>スタイル付けのためのラッパーとしてのみ使用する場合は、 {{HTMLElement("div")}} を使用してください。大まかに言うと、 <code>&lt;section&gt;</code> は文書のアウトラインの中に論理的に現れるべきです。</li>
 </ul>
 
-<h2 id="Example" name="Example">例</h2>
+<p>繰り返しになりますが、それぞれの <code>&lt;section&gt;</code> はできるだけ、特に見出し
+({{HTMLElement('h1')}}-{{HTMLElement('h6')}} 要素) を <code>&lt;section&gt;</code> の子要素に含めて識別できるようにするべきです。見出しのない <code>&lt;section&gt;</code> の例については以下を参照してください。</p>
+
+<h2 id="Example">例</h2>
+
+<h3 id="simple_usage_example">単純な使い方の例</h3>
 
-<h3 id="Before" name="Before">導入前</h3>
+<h3 id="Before">導入前</h3>
 
 <pre class="brush: html">&lt;div&gt;
-  &lt;h1&gt;Heading&lt;/h1&gt;
-  &lt;p&gt;Bunch of awesome content&lt;/p&gt;
+  &lt;h2&gt;見出し&lt;/h2&gt;
+  &lt;p&gt;素晴らしいコンテンツの数々&lt;/p&gt;
 &lt;/div&gt;</pre>
 
-<h3 id="After" name="After">導入後</h3>
+<h3 id="After">導入後</h3>
+
+<pre class="brush: html">&lt;section&gt;
+  &lt;h2&gt;見出し&lt;/h2&gt;
+  &lt;p&gt;素晴らしいコンテンツの数々&lt;/p&gt;
+&lt;/section&gt;
+</pre>
+
+<h3 id="using_a_section_without_a_heading">見出しのないセクションの使用</h3>
+
+<p><code>&lt;section&gt;</code> が見出しなしで使用されている状況は、伝統的な文書構造よりも、ウェブアプリケーションや UI のセクションでよく見られます。文書内では、コンテンツの内容を示す見出しのない独立したセクションがあっても、実際には何の意味もありません。このような見出しは、すべての読者にとって便利ですが、特に画面リーダーのような支援技術のユーザーにとっては便利であり、また、 SEO にも有効です。</p>
+
+<p>しかし、二次的なナビゲーションの仕組みを考えてみましょう。グローバルナビゲーションがすでに <code>&lt;nav&gt;</code> 要素で囲まれている場合、 <code>&lt;section&gt;</code> の中に前へ/次へのメニューを入れることも考えられます。</p>
 
 <pre class="brush: html">&lt;section&gt;
-  &lt;h1&gt;Heading&lt;/h1&gt;
-  &lt;p&gt;Bunch of awesome content&lt;/p&gt;
+  &lt;a href="#"&gt;前の記事&lt;/a&gt;
+  &lt;a href="#"&gt;次の記事&lt;/a&gt;
 &lt;/section&gt;
 </pre>
 
-<h2 id="Specifications" name="Specifications">仕様書</h2>
+<p>また、アプリを制御するためのボタンバーのようなものはどうでしょうか。必ずしも見出しが必要ではないかもしれませんが、それでも文書の明確なセクションであることに変わりはありません。</p>
+
+<pre class="brush: html">&lt;section&gt;
+  &lt;button class="reply"&gt;返信&lt;/button&gt;
+  &lt;button class="reply-all"&gt;全員に返信&lt;/button&gt;
+  &lt;button class="fwd"&gt;転送&lt;/button&gt;
+  &lt;button class="del"&gt;削除&lt;/button&gt;
+&lt;/section&gt;
+</pre>
+
+<p>見出しのないセクションは、文書のアウトラインには表示されません。このような HTML ブロックを文書のアウトラインの中に強制的に入れたいが、視覚的な出力には何の影響も与えたくない場合は、非表示にした見出しを入れることができます。</p>
+
+<pre class="brush: html">&lt;section&gt;
+  &lt;h2 class="hidden"&gt;コントロール&lt;/h2&gt;
+  &lt;button class="reply"&gt;返信&lt;/button&gt;
+  &lt;button class="reply-all"&gt;全員に返信&lt;/button&gt;
+  &lt;button class="fwd"&gt;転送&lt;/button&gt;
+  &lt;button class="del"&gt;削除&lt;/button&gt;
+&lt;/section&gt;
+</pre>
+
+<p>支援技術や画面リーダーに適した CSS を使って非表示にするには、次のようにします。</p>
+
+<pre class="brush: html">.hidden {
+  position: absolute;
+  top: -9999px;
+  left: -9999px;
+}
+</pre>
+
+<p>コンテンツによっては、見出しを入れることで SEO 施策にもなるので、選択肢の一つとして検討してみてはいかがでしょうか。</p>
+
+<h2 id="Specifications">仕様書</h2>
 
 <table class="standard-table">
  <thead>
@@ -113,16 +166,17 @@ translation_of: Web/HTML/Element/section
  </tbody>
 </table>
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+<h2 id="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>
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
 
 <p>{{Compat("html.elements.section")}}</p>
 
-<h2 id="See_also" name="See_also">関連情報</h2>
+<h2 id="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("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}}</li>
  <li><a href="/ja/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines">HTML のセクションとアウトラインの使用</a></li>
  <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Region_role">ARIA: Region ロール</a></li>
+ <li><a href="https://www.smashingmagazine.com/2020/01/html5-article-section/">Why You Should Choose HTML5 article Over section</a>, by Bruce Lawson</li>
 </ul>