何年もの間 XHTML でコーディングした後、ようやく HTML5 に飛び込んで単純なポートフォリオ Web サイトを構築しています。
私が構築している Web サイトでは、ホームページに 12 個のサムネイルが表示されます。サムネイルをロールオーバーすると、キャプションが表示されます。画像とキャプションの両方が投稿にリンクしています。
古い XHTML の方法
<div class="thumb">
<a href="portfolio_1" title="Portfolio item 1"><img width="225" height="150" src="images/thumb_1.jpg" alt="Portfolio item 1" /></a>
<h3><a href="portfolio_1" title="Portfolio item 1">Portfolio item 1</a></h3>
</div>
新しい方法
<ol>
<li class="thumb">
<article>
<figure>
<a href="portfolio_1" title="Production test 8"><img width="225" height="150" src="images/thumb_1.jpg" alt="Portfolio item 1" /></a>
<figcaption><a href="portfolio_1" title=""><h3>Portfolio item 1</h3></a></figcaption>
</figure>
</article>
</li>
</ol>
新しいコードでは、各ポートフォリオ アイテムのリストを使用しました。リスト内で記事を作成し、画像と画像キャプションに figure タグを使用しました。
私の質問 は、この HTML5 セマンティックはやり過ぎですか? 元の XHTML バージョンよりも多くのコードがあり、リストを完全になくした方がよいかどうか疑問に思っています。
フィードバックをお待ちしております。