第六章 HTML5 結構元素與版面設計

這一章要多看, 因為是靠經驗來設計

結構語意元素

header、hgroup	代表頁首、特定區塊頭部部分。一般代表頁首時可包含主標題次標題 Logo 一般代表特定區塊頭部部分時可包含主標題次標題歷史版本發佈日期
hgroup	區塊內容的標題區域 , 由一群h元素組成，主要是要包裝多個標題成為單一標題區塊。
nav	代表的是一個巡覽連結的區塊、主要是首頁的巡覽連結，是一個網站的入口，所以很適合用 nav 。另外文章的重點段落也很適合用 nav 來做，另外像是Tag、關鍵字、社交連結、廣告、分類連結通常與主內容無關，應使用 aside 元素
aside	表示文件中與主資料具有輕度關聯的區塊
article	表示它是一個獨立且自足的特定內容區塊，例如一篇文章內容 (與文章的回應)
section	表示一個文章中每一個小節，或應用程式的項目，以書的章搭配h1, h2, h3...來識別文件的結構。針對需要大網編排輸出的層級設定分組區塊定義長篇文章中的分章定義必須對應大網的標題時
footer
figure	figure 會為圖表劃出一個獨立區塊。使用在相簿列表之類的。另外像技術文章的程式碼範例也可使用figure

html5 相容於舊版ie

區塊元素可以在建立內容的標題同時支援大綱的輸出

                                            //舊版browser 可以用下列方法讓瀏灠器理解
                                            document.createElement('article');
                                            document.createElement('aside');
                                            document.createElement('figcaption');
                                            document.createElement('figure');
                                            document.createElement('footer');
                                            document.createElement('header');
                                            document.createElement('hgroup');
                                            document.createElement('section');

或是使用 html5shiv

HTML5 元素分類

Metadata content	中介資料內容 base、command、link、meta、noscript、script、style、title
Flow content
Sectioning content	表示文件中一個區段，對應文件的大綱 article、aside、nav、section
Heading content	定義區段(section)標題 h1, h2, h3......hgroup
Phrasing content	文字內容標示標籤 a, abbr, area, b, br, .....
Embedded content	支援外部匯入內容至目前網頁 audio, canvas, embed, iframe, img, math, object, svg, video
Interactive content	a, button, details, textbox