作者zxcvforz (塔欧兹)
看板Web_Design
标题[问题] HTML5 section 与 h1/2/3?
时间Sat Apr 12 10:41:52 2014
现在做的是个人的网站，主要还是以学习「正确」的 HTML5 为主。
网站的首页上，我想要写成这样子的架构：
<h1>网站名称</h1>
<h2>分类一最新：</h2>
<h3>文章标题</h3>
<!-- 这里放「分类一」最新的文章整篇内容 -->
<h2>分类二最新：</h2>
<h3>文章标题</h3>
<!-- 这里放「分类二」最新的文章摘要 -->
<h2>分类三最新：</h2>
<h3>文章标题</h3>
<!-- 这里放「分类三」最新的文章摘要 -->
<p>这是页尾放些 powered by x 之类的东西假装很专业。</p>
现在的问题是我想把这三个分类做成浮动的区块，
分类一：占 45em 宽
分类二：占 20em 宽
分类三：占 20em 宽
当访客浏览器够宽，分类二（甚至是分类三）就会排在右边变两/三栏式。
当访客浏览器不够宽，分类二和三就会排在分类一下面成两栏。
这种情况下，「正确」的 HTML5 是否应该用 section 包住每一个浮动区块？
还是说这边用 section 是错误的，只能用 div 硬上？
如果用 section，那各 section 里面原本的 h2 和 h3 是不是该从 h1 重新算？
<h1>网站名称</h1>
<section id="bigsec">
<h1>分类一</h1>
</section>
<section id="smallsec">
<h1>分类二</h1>
</section>
这样子才对吗？
--
Sent from my HR-93.
--
※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 1.34.87.23
※ 文章网址: http://webptt.com/cn.aspx?n=bbs/Web_Design/M.1397270516.A.E04.html
1F：推 qwer820404:根据w3c文件， h1 h2 h3这些在预设的css是用em去定议的 04/12 18:44
2F：→ qwer820404:所以我们现在要看em的部份影响范围 04/12 18:44
3F：→ qwer820404:em 这个单位用法是 会继承父级元素 (父级的font-size) 04/12 18:46
4F：→ qwer820404:以预设状态来说body的font-size 是16px 04/12 18:47
5F：→ qwer820404:所以1em =16px，以此类推 04/12 18:47
6F：→ qwer820404:但如果你的元素是用section or div这类的东西去包 04/12 18:47
7F：→ qwer820404:那就要去看section or div他的font-size是多少 04/12 18:48
8F：推 qwer820404:然後提醒一下 你可以去测试看看position设定後 04/12 18:50
9F：→ qwer820404:会不会影响到h1这些的继承逻辑 04/12 18:51
10F：→ qwer820404:希望有回答到你的问题 04/12 18:52
感谢回答，不过我的问题并非 em 大小，那单纯是举例说明我想做的效果。
我的问题是，正确的 HTML 标签应该是怎麽写？
以往的话直接 DIV 包一包就了事，但是现在混了 article、section、
header、footer、aside、nav 等新标签，实在不知道应该怎麽用才对。
就定义上来说，所有语义标签都不适合的情况下，才去用 DIV。
因此我觉得应该是用 section 来包。
<header><h1>网站名称</h1></header>
<section id="main">
<section class="big">分类一的框框</section>
<section class="small">分类二的框框</section>
<section class="small">分类三的框框</section>
</section>
<footer>(C) Copyright</footer>
问题就在於各 section 里的标题应该用 h1 还是 h2。
另外， "big" 和 "small" 的 section 又似乎应该用 article，
因为他们各自是独立的，虽然都摆在首页，但相互之间毫无关联；
但是 "small" 的两个又只是摘要，并非全文，
这是否代表用 article 不合适呢？
或者，把 "big" 视为 article，然後 "small" 的视为 aside。
<header><h1>网站名称</h1></header>
<article><h?>分类一文章名称</h?>文章全文</article>
<aside>
<section><h?>分类二</h?>摘要</section>
<section><h?>分类三</h?>摘要</section>
</aside>
<footer>(C) Copyright</footer>
变成这样，是否更符合 HTML 的意义呢？
※ 编辑: zxcvforz (1.34.87.23), 04/12/2014 23:49:38
11F：推 qwer820404:没有必要为了使用html5新的tag而去烦恼这件事情吧 04/13 02:49
12F：→ qwer820404:说穿了他们还是区块元素 只是先帮你定义好了 04/13 02:49
13F：推 qwer820404:我收回上面二句话 04/13 02:57
14F：推 qwer820404:看一下 4.3 Sections的部份 应该就能得到你要的答案 04/13 03:02
15F：→ lyforever:hgroup? 04/13 14:53
17F：→ zxcvforz:谢谢楼上，我再研究一下！ 04/17 14:09
根据 W3：
article 用於原则上为完整而且独立的个体，可重覆使用、可汇出。
例如讨论串里的每一篇回文、部落格的每一篇文章、访客的每一篇留言。
例如部落格文章为 article，里面可再将访客留言巢状标记成 article。
当网页本身就只是一个 article 时不需要再包 article 标记。
section 用於章、节等有独自主题，适合加入 h1~6 标题的区块。
例如章节、分页式对话框的每一个分页等等。
网站首页的简介、新内容、联络资讯也各属一个 section。
基本上，只有在这个区块应该列入该网页大纲时才用 section，
否则为排版或程式用途的区块应使用 div。
aside 用於非本文但是与本文有所关联的区块。重点在於「非本文」。
例如排版上为凸显效果而独立出来的引言（"pull quotes"），
或是要摆在侧栏的导览选单、广告等等。
至於 section 里应该统一用 h1 还是照网页整体架构去降级，
依 W3 的范例是应该要照整体架构去降级。
另外，section 并非必要。一个依 h1~h6 架构撰写的网页，在 HTML 语义上，
有没有把每个区块用 section 再包起来，毫无分别。
因此原本的问题最终解答是如此做：
<body>
<header><h1>网站名称</h1></header>
<div>
<section><h2>...</h2></section>
<section><h2>...</h2></section>
</div>
<footer>(C) Copyright</footer>
</body>
DIV 单纯是为了制定浮动区块的范围，如果要让浮动区块自由占整个 BODY，
那麽连这个 DIV 都不必了；但 section 则是让各分类独立浮动而有所必要。
如果不做浮动区块的话，前面的 div 和 section 都不用了。
※ 编辑: zxcvforz (1.34.87.23), 04/18/2014 05:42:51