web-dev-qa-db-ja.com

記事リストのセマンティックHTML

次の画像のような記事の典型的なインデックス（抜粋のないブログのような）：

example

これらのアイテムはリスト（<ul><li>）またはdivだけですか？

そしてまた、彼らは図/ figcaptionでなければなりませんか？当然のことながら、画像もメインコンテンツではなく記事の一部であるため、タイトル/説明は画像のキャプションではなく、記事のキャプションである可能性があります。

どう思いますか？

編集：実例- https://news.google.com/?hl=ja

htmlsemantic-markup
31
felixjet

スニペットごとにarticleを使用します（ニュースティーザーなど）。

各articleにはh1要素は見出し、img要素は画像、p要素はテキストです。

おそらく完全版にリンクしたいので、すべての要素を1つのa要素（HTML5では許可されています）または見出しなどでのみ囲むことができます。

したがって、次のようになります。

<article>
  <h1><a href="" title=""><!-- news title --></a></h1>
  <img src="" alt="" />
  <p><!-- news description --></p>
</article>

この画像自体に別のキャプションを付ける必要がある場合にのみ、figureを使用してください。ニュースの説明（ここではpに含まれています）は通常、その画像のキャプションではありません。

articleの子の順序を変更できます。セクション要素の機能のおかげで、見出しは最初の要素である必要はありません。

ulを使用できますが、必須ではありません。ただし、olは、順序が内容を理解する上で本当に意味がある場合にのみ使用する必要があります（つまり、順序が異なるとドキュメントの意味が変わります）。典型的な例：アイテムが関連性でランク付けされている場合（例：最も関連性の高いティーザーが上部にある）、olを使用する必要があります。

について あなたの質問 ティーザーをarticleにする必要がある場合：

article（HTML5要素）を「記事」（英語）という用語と混同しないでください。 articleには別個の definition があり、必ずしも「記事」という用語の理解とは関係ありません。

ティーザーもarticleにする必要があります–ティーザーarticleとフルテキストarticleはdifferentarticles。ただし、同じエンティティを参照しています。

28
unor

これは意見の質問なので、優先順位に行き着きます。あなたの画像に基づいて、私は<ul> <li>ただし、divを使用しても同じ結果が得られます。

1
Jack M.

各アイテムが記事を表す場合、各アイテムは <article> elements を使用して表される必要があります。

記事の順序付けられたリストまたは順序付けされていないリストであると思われる場合は、それぞれ<ol>または<ul>要素を使用できます。

私は、マークアップをできるだけシンプルに、必要に応じて複雑にすることをお勧めします。

<div>
  <article>
    <img>
    <div>…</div>
  </article>
  <article>
    <img>
    <div>…</div>
  </article>
  …
</div>
0
zzzzBov

ここでの答えは、望まれるべき多くのものを残します。 HTML仕様には、コメント付きのブログ投稿マークアップの例があります。

https://www.w3.org/TR/2013/CR-html5-20130806/sections.html#the-article-element

受け入れられた回答は、<article>要素が使用されているため、尋ねられた質問にはまったく答えません。

これがW3.ORGからの答えです

要素を転用してARIAの役割、状態、またはプロパティを追加してアクセス可能にする代わりに、組み込みのHTML要素[HTML51]または属性を組み込み済みの必要なセマンティクスと動作で使用できる場合は、そうします。

調査後に進めている論理は次のとおりです。レビューのリストがあります。各レビューは、参考になった投票によって並べ替えられます。レビューは参考になった投票によって並べ替えられるため、最初のレベルは順序付きリストになります。それ以外の場合は、ネストされたコメントなど、順序付けされていないリストで十分です。

<ol>
    <li class="review" role="article"> <!-- reviews ordered by votes-->
        <header>
            <h2>Review title</h2>
        </header>
        <p>Review body</p>
        <section class="comments">
            <ul>
                <li class="comment" role="article"> <!-- comments with votes-->

                </li>
            </ul>
        </section>
    </li>
</ol>

洞察に満ちた答え @Terrill Thompsonによるスクリーンリーダーは、セマンティックリストマークアップによって支援されると説明しています。だから、はい、記事のリストは理にかなっています。物事が複雑になってくると、彼はそれがいかに混乱する可能性があるかについて言及します。ここで、ARIA、role、およびtabindex属性を絶対に追加してテストする必要があります。

その回答には、ユーザーを W3.ORG での会話に誘導するコメントがあります。定義により、<article>は、「スタンドアロンコンテンツ」であるべきリストの一部ではありません。ただし、ここでの質問、私自身、そしておそらくあなたがこれを読んでいる場合は、articleが記事の真のリストに適用される、より深い回答が必要です。

といった：

  • 抜粋付きのブログ記事のリスト
  • の検索結果
  • レビュー
  • コメント
0
Ben Racicot

他の人が言ったように、各記事にはarticleタグを付ける必要があると思います。

リスト全体をasideタグで囲むこともお勧めします。したがって、ページに1つのメイン記事（mainで囲まれている）がある場合、それは他の記事の影響を受けません。

これが 良い記事 についてasideです。

0
gamliela