<main lang="en-US">
<header>
<h1>Blog it better</h1>
</header>
<section>
<article><!-- 省略 --></article>
<article><!-- 省略 --></article>
<article><!-- 省略 --></article>
</section>
</main>
<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>
<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>
<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>
<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>