[HTML5試試看-6] 新的內容組織方法

DAY 6

HTML5試試看系列第 6 篇

html 網頁設計鐵人賽

fillano

2010-10-17 23:33:35

6287 瀏覽

HTML5定義了很多「語意」（semantic）標籤，這些東西在網頁外觀上上並沒有直接作用，但是在內容組織上會有很大幫助，也可以協助「機器」更有效地利用內容。
這些標籤包含：

<section>
<nav>
<article>
<aside>
<hgroup>
<header>
<footer>

顧名思義：

section代表了一般的內容章節
nav代表裡面會有連結到內部或外部的文件
article代表了一個獨立的完整文章
aside只是一段旁白
hgroup讓多個標題屬於同一個群組，被視為內容大綱的同一項目
header代表了網頁標題及簡介等內容
footer代表一個段落的...footer（不知道怎翻譯XD...也不能翻成頁腳）

在html中，使用<h1>~<h6>可以做出大綱。在html5中，大綱的產生遵循幾個規則：

在同一個section（或其他分段標籤）層級中，第一個碰到的<h*>標籤代表這個section的大綱項目的基準。之後使用同層級或更高層級的<h*>，都代表同一層級的大綱項目。當然，相對較低的<h*>就會是更低一層的大綱項目。<h*>中數字的差距是相對而不是絕對的。
在一個section中嵌套一個section而形成subsection時，subsection中的<h1>~</h6>會比包覆他的section層級更低一級

這樣講有聽沒有懂...所以來試試看。

想要測試大綱，可以利用線上的大綱工具：html5 outliner 看看大綱是否跟你預期的一樣。

例如以下的html：

 <html lang="en">
 
 <title>HTML5 sections/outlines</title>
 
 
 <header>
   <hgroup>
     <h3>in header level1 using h3</h3>
     <h4> - hodie</h4>
   </hgroup>
 </header>
 <section>  
   <h2>section level1 using h2</h2>
   <h1>second title level1 using h1</h1>
   <section>  
     <h2>section level2 using h2</h2>
     <p>shall we talk about this?
     <h3>section level2 using h3</h3>
     <section>
     	<h6>section level3 using h6</h6>
     	<p>ok this is level3 of section.
     </section>
     <p>section content for testing ha ha ha
   </section>  
   <section>  
     <h2>section level2 using h2</h2>  
     <P>so we do another test...
   </section>  
   <aside>  
     <p>so do you heeard my murmuring?  <h2>I'm in an aside level2 using h2</h2>
   </aside>
 </section>
 <footer>
   <p>(c) 2010 by who and what  <h3>in footer level1 using h3</h3>
 </footer>

把他用html5-outliner來顯示大綱，就會看到：