ブログの投稿一覧ページのマークアップを見る

MDN Blog

• MDN Blog

<main lang="en-US">
  <header>
    <h1>Blog it better</h1>
  </header>

  <section>
    <article><!-- 省略 --></article>
    <article><!-- 省略 --></article>
    <article><!-- 省略 --></article>
  </section>
</main>

• <header> - HTML: ハイパーテキストマークアップ言語 | MDN

• <article>: 記事コンテンツ要素 - HTML: ハイパーテキストマークアップ言語 | MDN

<article>
  <header>
    <figure>
      <a href="">
        <img alt="" src="" height="200">
      </a>
    </figure>
    <h2>
      <a href="">投稿のタイトル</a>
    </h2>
    <div>
      <a href="" target="_blank" rel="noreferrer">
        <img src="" alt="Author avatar">
        著者の名前
      </a>
      <time>日付</time>
      <span>XX minute read</span>
    </div>
  </header>
  <p>投稿の概要</p>
  <footer>
    <a href="" target="_self">
      <span>Read more →</span>
    </a>
  </footer>
</article>

• <time>: （日付）時刻要素 - HTML: ハイパーテキストマークアップ言語 | MDN

The Mozilla Blog

• Latest - The Mozilla Blog

<main>
  <div>
    <header>
      <h2>Latest Posts</h2>
    </header>

    <div>
      <section><!-- 省略 --></section>
      <section><!-- 省略 --></section>
      <section><!-- 省略 --></section>
    </div>

    <nav>
      <div>
        <span aria-current="page">1</span>
        <a href="">2</a>
        <a href="">3</a>
        <span>…</span>
        <a href="">151</a>
        <a href="">next</a>
      </div>
    </nav>
  </div>
</main>

• <nav>: ナビゲーションセクション要素 - HTML: ハイパーテキストマークアップ言語 | MDN
• aria-current - Accessibility | MDN

<section>
  <a href="">
    <div>
      <img width="800" height="800" src="" alt="" decoding="async" fetchpriority="high" srcset="" sizes="">
    </div>
    <div>
      <div>
        <div>
          <div>カテゴリ名</div>
        </div>
        <h2>投稿のタイトル</h2>
        <span>Read More</span>
      </div>
    </div>
  </a>
</section>

Zenn

• Zenn｜エンジニアのための情報共有コミュニティ

<section>
  <div>
    <div>
      <h3>Tech</h3>
      <span aria-label="プログラミングなどの技術についての知見" role="tooltip">
        <span aria-label="詳細を確認する">？</span>
      </span>
    </div>

    <div>
      <div>
        <article><!-- 省略 --></article>
      </div>
      <div>
        <article><!-- 省略 --></article>
      </div>
      <div>
        <article><!-- 省略 --></article>
      </div>
    </div>
  </div>
</section>

<article>
  <a href="">
    <span>
      <span style="background-image: url(絵文字の画像のURL);"></span>
    </span>
    <span>🍄</span>
  </a>
  
  <div>
    <a href="">
      <h2>投稿のタイトル</h2>
    </a>
    <div>
      <div>
        <a href="">
          <img alt="著者の名前" height="26" loading="lazy" referrerpolicy="no-referrer" src="" width="26">
        </a>
      </div>
      <div>
        <div>
          <a href="">著者の名前</a>
        </div>
        <div>
          <time datetime="">XX日前</time>
          <span>
            <svg x="0px" y="0px" viewBox="0 0 110 110" xml:space="preserve" aria-label="いいねされた数" height="14" width="14"></svg>
            XXX
          </span>
        </div>
      </div>
    </div>
  </div>
</article>

Google Japan Blog

• Google Japan Blog