NEWSリスト（更新情報）の作り方

企業のホームページでよく見るニュースリストの作り方を調べたところ、ざっと以下の3つの方法を見つけました。

• <ul><li>タグを使う
• <dl><dt><dd>タグを使う
• <table>タグを使う

正直どれが一番良いのか分からないのですが、数の多かった<ul><li>タグを使う方法を備忘録に残しておこうと思います。

作りたいのは以下の3点を載せるニュースリストです。

• 日付
• NEWSカテゴリ
• 更新内容

HTML

  <ul>

    <li>

       <a href="#"><time class="date" datetime="2021-01-01">2021.1.1</time>

       <span class="category-report">更新情報</span>

       <span class="title">ブログを更新しました</span>

       </a>

     </li>

  </ul>

このHTMLはHTML5/CSS3モダンコーディングの本を参考にしました。

カテゴリごとにクラスを付与することで、「更新情報」はピンクの背景色、「イベント情報」は水色の背景色などデザインを付けてユーザーに分かりやすくする予定です。

<datetime>タグについて

• 機械に更新日時等を認識させるために使う
• 特にニュースサイトなど、更新性が重要になるサイトには必須
• 検索結果にも表示されるため、ユーザーが情報鮮度を確認するのにも役立つ

「○時間前」など検索結果に表示されているニュースをよく見ますよね。

あれだ・・・！

ふと思ったんですが、こういう企業ブログで記事更新情報がニュースリストに出ているサイトをよく見ますが、ブログを更新するたびに最新の紹介情報を追記して、古いもののHTMLを消す、という作業をしているのかな。

結構めんどくさい・・・

ブログのCMSを使えばまた違うんだろうけど・・・

分からないことだらけです！