iT邦幫忙

DAY 6
6

HTML5試試看系列 第 6

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

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

  1. <section>
  2. <nav>
  3. <article>
  4. <aside>
  5. <hgroup>
  6. <header>
  7. <footer>

顧名思義:

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

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

  1. 在同一個section(或其他分段標籤)層級中,第一個碰到的<h*>標籤代表這個section的大綱項目的基準。之後使用同層級或更高層級的<h*>,都代表同一層級的大綱項目。當然,相對較低的<h*>就會是更低一層的大綱項目。<h*>中數字的差距是相對而不是絕對的。
  2. 在一個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來顯示大綱,就會看到:

這些好像有點枯燥Orz...明天來看看播放影音的標籤好了。

參賽文章


上一篇
[HTML5試試看-5] HTML文件結構今昔
下一篇
[HTML5試試看-7] audio媒體播放
系列文
HTML5試試看30

1 則留言

我要留言

立即登入留言