我正在尝试制作语义HTML5代码,但不确定是否正确。视觉上,我有一篇文章/帖子分为3个栏:
图像(200像素)| H1 +摘要+更多链接(350px)| 具有2个标题H2的附加部分 (150像素)
在CSS我会浮动:左 - 人物,.POST-总结,.POST休耕。
这是Ver.1:
<article>
<figure>
<a href="#"><img src="images/temp/entry_01.jpg" alt=""></a>
<figcaption>Title for Case Study</figcaption>
</figure>
<div class="post-summary">
<section>
<h1>MAIN Article Title</h1>
<p>Lorem ipsum...</p>
<a href="#">read more</a>
</section>
</div>
<div class="post-aside">
<section>
<h2>The Charges:</h2>
<p>Lorem ipsum...</p>
</section>
<section>
<h2>The Verdict:</h2>
<p>Lorem ipsum...</p>
</section>
</div>
</article>
Run Code Online (Sandbox Code Playgroud)
版本 2
<article>
<figure>
<a href="#"><img src="images/temp/entry_01.jpg" alt=""></a>
<figcaption>Title for Case Study</figcaption>
</figure>
<section class="post-summary">
<h1>MAIN Article Title</h1>
<p>Lorem ipsum...</p>
<a href="#">read more</a>
</section>
<section class="post-aside"> …Run Code Online (Sandbox Code Playgroud)