pタグのアンチパターン: リストタグ (ulタグ, liタグ) を使うべき理由

Last updated at 2024-09-19Posted at 2024-09-19

アジェンダ

Webページを作成する際に、特定の情報が複数ある場合にタグで記述しておりました。
しかし、注意事項や手順などを列挙する場合、リスト形式を使用することで、読み手にとって視認性が高く、わかりやすい表現が可能になるということについて簡単にまとめます。

以前、注意事項などの項目を段落タグ () で表現していた場合、次のような構造になっていたかもしれません:

<p>※こちらの商品は数量限定になります。</p>
<p>※お一人様一点になります。</p>

この方法では、各項目が単に段落として表示されます。しかし、これでは内容が連続的に見えてしまい、個々の注意事項が独立した項目であることが分かりにくくなります。

ここで、リストタグ (<ul> と <li>) を使うと、意味的に適切で視覚的にも分かりやすくなります。例えば、次のように変更します。

<ul>
  <li>※こちらの商品は数量限定になります。</li>
  <li>※お一人様一点になります。</li>
</ul>

これによって、以下の利点があります:

意味の明確化:
- <ul>は「順序のないリスト（unordered list）」を表し、<li>はそのリストの各項目を示します。これにより、注意事項がリストの一部として明確に表現されます。
視認性の向上:
- 各項目が個別のリスト項目として表示されるため、読み手がそれぞれの情報を視覚的に区別しやすくなります。
HTMLの意味論的適合性:
- 段落タグ () は文章のまとまりを示すためのもので、リストを表示するには意味的に適していません。複数の独立したアイテムを列挙する場合は、リストタグの方がより適切です。

注意事項や規則などのように、複数のアイテムを表示する際には、段落タグ () ではなく、リストタグ (<ul> と <li>) を使うと、意味が明確になり、読み手にとって分かりやすい表示が可能になります。