1. ホーム
  2. ハイパーリンク

[解決済み】セクションとアーティクルのHTML5

2022-04-03 06:40:42

質問

ビデオやニュースフィードなど、さまざまなセクションで構成されるページがあります。これらをHTML5でどのように表現すればよいのか、少し困っています。現在、私はそれらをHTML5として持っています <section> というタグがありますが、よくよく調べてみると、より正しいタグは <article> . どなたか、この件について教えていただけませんか?

どれも本当の意味でのブログ記事や"document"ではないので、どの要素を適用すればいいのか、ちょっとわかりにくいですね。

乾杯

EDIT: 私は、このアプリケーションのために article タグは無関係な要素のためのコンテナ・タグのようなので、私の "sections" はそうなのでしょう。しかし、実際のタグ名の記事は、かなり誤解を招きやすいようで、HTML5がよりウェブに配慮して開発されたとは言っているものの、その中身は、以下のようなものです。 アプリケーション しかし、私は多くのタグがよりブログ中心/文書ベースであると感じています。

とにかくご回答ありがとうございました。

解決方法は?

W3 wiki の HTML5 の構造に関するページ と書かれています。

<ブロッククオート

<section> : 異なる記事を目的別に分類するために使用します。 または、1つの記事の異なるセクションを定義するために使用します。

と表示します。 画像 をクリーンアップしたものです。

また <article> タグがあります(上記W3リンクより)。

<ブロッククオート

<article><section> が、明確に異なる。 一方 <section> は、コンテンツまたは 機能です。 <article> は、関連する個々の 個々のブログ記事、ビデオなどの独立したコンテンツ。 画像やニュースなどです。このように考えてください。 各コンテンツは、それぞれ単独で読むのに適しています。 として配信するのが合理的である。 フィードの場合 <article> は、マークアップに適しています。

この例では <section id="main"> には、ブログのエントリが含まれています。それぞれのブログ RSSフィードの1項目として配信するのに適しています。 は、文脈を無視して単独で読んでも意味をなすので、したがって <article> が最適です。

<section id="main">
    <article>
      <!-- first blog post -->
    </article>

    <article>
      <!-- second blog post  -->
    </article>

    <article>
      <!-- third blog post -->
    </article>
</section>

簡単でしょう?しかし、セクションをネストすることもできます。 の記事で、そうすることが理にかなっている場合。例えば、それぞれの記事が これらのブログ記事は一貫して異なるセクションの構造を持っています。 記事の中にもセクションを置くことができます。それは、次のようになります。 このようなものです。

<article>
  <section id="introduction">
  </section>

  <section id="content">
  </section>

  <section id="summary">
  </section>
</article>