wordpressのarchive.phpなどに使うhtmlタグについて

Question

現在、自分と友人用にテーマを作成しています。

いろいろなテーマを見てみたのですが、
archive.phpなどで記事のリストを表示する場合、

• <ul><li>～</li></ul>
• <article>～</article>
• <section>～</section>
• <div>～</div>

の４種類を見たのですが、どれが正解なんでしょうか？
どれでも変わらないのでしょうか？

Answer 1

はじめまして

１．まずこちらの違いがあります。

• ul/liはリスト
• articleは読み物
• sectionは文章の区切り
• divはレイアウト上の枠組み

今回の「一覧ページ」（＝アーカイブ（archive））の作成、カスタマイズには
少なくとも

• divはレイアウト上の枠組み
• ul/liはリスト

の２つは必ずでて来るし、関係あります。

【一般的な一覧ページの構造】

<div>～</div>で、一覧ページの表示位置を指定し、その中に入れ子状態で <ul>～</<ul>で、項目の属性を指定し、その中に <li>項目１</<li>　項目１ <li>項目２</<li>　項目２ <li>項目３</<li>　項目３ ・・・ と列記します。

Wrodpressでの一覧ページのHTMLコード部分

<div>
<ul>　＃項目の属性を指定
<li>項目１</<li>　＃項目１
<li>項目２</<li>　＃項目２
<li>項目３</<li>　＃項目３
</<ul>
</div>

２．wordpress寄りの話

「archive.phpなどで記事のリストを表示する場合」とありましたので
少し参考になる情報を書いておきます。

archive.php以外に用途別にデザインできるPHPファイルが複数あります。

こちらを見てみると

アーカイブ（archive）と呼ばれる「一覧ページ」の１つ。
WordPressのアーカイブには、
カテゴリー別、タグ別、日付別、著者別、カスタム分類別などがある。
これらを全部「archive.php」という名のテンプレートで表示することもできる。

デザインフォーマットを変えたい場合などには、
それぞれに「archive.php」より優先度の高いテンプレート名があるので、それを利用する。

category.php（カテゴリー別アーカイブページ用）
tag.php（タグ別アーカイブページ用）
date.php（日付別アーカイブページ用）
author.php（著者別アーカイブページ用）
taxonomy.php（カスタム分類別アーカイブページ用）
本ブログでは、カテゴリー別とタグ別は、タイトル部分の色などを変えたかったので、archive.phpではなく、個別のテンプレート（category.phpとtag.php）に分けることにした。

とあります。

サイトのデザイン方針に応じて使い分けてみて下さい。

Answer 2

• ul/liはリスト
• articleは読み物
• sectionは文章の区切り
• divはレイアウト上の枠組み

であって, あなたの作ろうとしているリストの役割として最も近そうなもの(「なんでこの要素を選択したの？」と言う質問に答えらそうなもの)を使えば良いです.
※HTMLにおける要素の選択に"ベスト"は有っても"正解"(こうしなければならない)はありません.

NOTE:追記
なおこの回答はHTMLにおける一般論ですので, Wordpressの文脈においてはkawakawa2018さんの回答を参考になさって下さい.

Comments

[am_]

パソコンがフリーズしてお礼を書くのが遅くなりすみません。
section と div は何だか違う気がしますね...。
リストなので ul/li でやろうと思います。
ありがとうございました！

Answer 3

どれが正解なんでしょうか？

正解はありません。いずれもCSSで頑張れば全く同じ見た目のものを作ることができます。

だからといって

どれでも変わらないのでしょうか？

というわけではありません。タグにはそれぞれきちんと意味と役割があります（それは既に回答が出ているとおり）
きちんと意味を理解し、役割を持たせた使い方をするのが本来です。