作者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/m.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