[英]HTML5 <section>'s inside <article> and header
I'm trying to make a semantic HTML5 code and not sure if it will be right. 我正在尝试制作语义HTML5代码,但不确定它是否正确。 Visualy I have an article/post divided in 3 cols: Visualy我有一篇文章/帖子分为3个小册子:
IMAGE (200px) | 图像 (200像素)| H1+ Summary + More Link (350px) | H1 +摘要+更多链接 (350px)| Additional Section with 2 headers H2 (150px) 附加部分有2个标题H2 (150px)
In CSS I'll float:left - figure, .post-summary, .post-aside . 在CSS中我会浮动:left - figure,.post-summary,.post-aside 。
Here is Ver.1: 这是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>
Ver. 版本。 2 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">
<h2>The Charges:</h2>
<p>Lorem ipsum text ...</p>
<h2>The Verdict:</h2>
<p>Lorem ipsum text...</p>
</section>
</article>
Which one is right? 哪一个是对的?
Depends on what you want.. 取决于你想要什么..
div — the "generic flow container" we all know and love. div - 我们都知道和喜爱的“通用流量容器”。 It's a block-level element with no additional semantic meaning. 它是一个块级元素,没有额外的语义含义。
section — a "generic document or application section". 部分 - “通用文件或申请部分”。 A section normally has a heading (title) and maybe a footer too. 一节通常有标题(标题),也可能是页脚。 It's a chunk of related content, like a subsection of a long article, a major part of the page (eg the news section on the homepage), or a page in a webapp's tabbed interface. 它是一大块相关内容,如长文章的子部分,页面的主要部分(例如主页上的新闻部分),或webapp标签界面中的页面。
http://boblet.tumblr.com/post/130610820/html5-structure1 Link to article http://boblet.tumblr.com/post/130610820/html5-structure1 文章链接
I would use it this way ( your v2 ): 我会这样使用它( 你的v2 ):
<div> <!-- Main article div -->
<article> <!-- First article -->
<section><!-- Header, about the author... --></section>
<section><!-- related info .. --></section>
<section><!-- conclusion --></section>
</article>
<article>
<section></section>
<section></section>
<section></section>
</article>
</div>
That's not right... both of them, and the answer too... DON'T USE DIV ! 这不对......他们两个,也是答案......不要使用DIV! USE SECTION INSTEAD ! 使用部分INSTEAD!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.