A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://developer.cdn.mozilla.net/ja/docs/Web/HTML/Reference/Elements/section below:

<section>: æ±Žç”¨ã‚»ã‚¯ã‚·ãƒ§ãƒ³è¦ç´ - HTML | MDN

<section>: 汎用セクション要素

Baseline Widely available

<section> は HTML の要素で、文書の自立した一般的なセクション（区間）を表します。そのセクションを表現するより意味的に具体的な要素がない場合に使用します。少数の例外を除いて、セクションには見出しを置いてください。

試してみましょう 
<h1>Choosing an Apple</h1>
<section>
  <h2>Introduction</h2>
  <p>
    This document provides a guide to help with the important task of choosing
    the correct Apple.
  </p>
</section>

<section>
  <h2>Criteria</h2>
  <p>
    There are many different criteria to be considered when choosing an Apple —
    size, color, firmness, sweetness, tartness...
  </p>
</section>
属性

この要素にはグローバル属性のみがあります。

使用上の注意

前述のように、 <section> は汎用的な区分要素ですので、それを表現するためのより具体的な要素がない場合にのみ使用してください。例えば、ナビゲーションメニューは <nav> 要素で囲むべきですが、検索結果のリストや地図表示とそのコントロールなどは特定の要素を持たないので、 <section> の中に入れることができます。

また、次のようなことも考慮してください。

繰り返しになりますが、それぞれの <section> はできるだけ、特に見出し (h1 - h6 要素) を <section> の子要素に含めて識別できるようにするべきです。見出しのない <section> の例については以下を参照してください。

例 単純な使い方の例 導入前 
<div>
  <h2>見出し</h2>
  <p>素晴らしいコンテンツの数々</p>
</div>
結果 導入後 
<section>
  <h2>見出し</h2>
  <p>素晴らしいコンテンツの数々</p>
</section>
結果 見出しのないセクションの使用

<section> が見出しなしで使用されている状況は、伝統的な文書構造よりも、ウェブアプリケーションや UI のセクションでよく見られます。文書内では、コンテンツの内容を示す見出しのない独立したセクションがあっても、実際には何の意味もありません。このような見出しは、すべての読者にとって便利ですが、特にスクリーンリーダーのような支援技術のユーザーにとっては便利であり、また、 SEO にも有効です。

しかし、二次的なナビゲーションの仕組みを考えてみましょう。グローバルナビゲーションがすでに <nav> 要素で囲まれている場合、 <section> の中に前へ/次へのメニューを入れることも考えられます。

<section>
  <a href="#">前の記事</a>
  <a href="#">次の記事</a>
</section>

また、アプリを制御するためのボタンバーのようなものはどうでしょうか。必ずしも見出しが必要ではないかもしれませんが、それでも文書の明確なセクションであることに変わりはありません。

<section>
  <button class="reply">返信</button>
  <button class="reply-all">全員に返信</button>
  <button class="fwd">転送</button>
  <button class="del">削除</button>
</section>

支援技術やスクリーンリーダーに適した CSS を使って非表示にするには、次のようにします。

.hidden {
  position: absolute;
  top: -9999px;
  left: -9999px;
}
結果

コンテンツによっては、見出しを入れることで SEO 施策にもなるので、選択肢の一つとして検討してみてはいかがでしょうか。

技術的概要 コンテンツカテゴリー フローコンテンツ, 区分コンテンツ, 知覚可能コンテンツ 許可されている内容 フローコンテンツ タグの省略 なし。開始タグと終了タグの両方が必須です。 許可されている親要素 フローコンテンツを受け入れるすべての要素。ただし、<section> 要素は <address> 要素の子孫要素として配置してはならない。 暗黙の ARIA ロール region （要素にアクセシブル名がある場合）、それ以外の場合は対応するロールなし 許可されている ARIA ロール alert, alertdialog, application, banner, complementary, contentinfo, dialog, document, feed, log, main, marquee, navigation, none, note, presentation, search, status, tabpanel DOM インターフェイス HTMLElement 仕様書 ブラウザーの互換性 関連情報

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4