這一篇延續之前的主題，討論更進一步的版面區塊切割與大綱輸出 ~~最近忙壞了，此一系列更新有點慢，不過一定會將這本書努力連載完，一起加油從 HTML5 開始改變你的人生吧 ~~ :D
當你打算建立一個網站服務，可能需要設計更複雜的版面，因此只有<header> 與<footer> 是不夠的，必須再導入支援側邊欄的標籤<aside> 以及導覽列<nav> ，如此才能建立所需的網頁功能介面。
從前一個小節設計的頁面繼續進行擴充，我們打算建立的頁面結構如下：
讀者在這個畫面中看到了數個不同的標籤，它們的意義很簡單，列舉如下：
| 標籤 | 說明 |
| <header> | 區塊首。 |
| <footer> | 區塊尾。 |
| <aside> | 區塊邊欄。 |
| <div> | 區塊定義與樣式設定。 |
| <section> | 區塊配置大綱輸出。 |
| <nav> | 區塊導覽功能區域。 |
<header> 與<footer> 前面已經看過了，基本上當你切割出區塊時，在某個區塊中需要配置專屬標題或是尾部資訊時，可以利用這兩個標籤設定，而一般最常見的是整個網頁的頁首與頁尾配置，除此之外，它們也可以被用在其它的標籤內部形成巢狀結構。
<aside> 則是用來配置側邊欄之類的區塊，通常是連結或是其它與主體內容無關的說明資訊，以本書要發展的這個範例來說，它形成畫面右部的邊欄，其中將配置最新上架課程與課程分類等相關連結資訊。
<div> 是一個通用性的標籤，當你配置的區塊沒有特定的意義時，純粹只是為了切割出一個區塊就可以考慮使用這個標籤，而在一般的應用上，<div> 經常被用來包裝其它的標籤，提供樣式的套用，例如這個頁面中，以<div> 包裝呈現頁面中央主體內容的數個<section> 。
<section> 同樣作為配置區塊的用途，不過它有一個很重要的任務－建立網頁文件的大綱結構，這一部份稍後再談。
<nav> 是一個專門提供導覽區塊配置的標籤，通常網站必須配置連結資訊以方便使用者瀏覽網頁內容，而這些連結需要進行配置管理才能提供良好的使用體驗，而<nav> 標籤即負責處理相關的設計。
好了，到目前為止，我們對區塊的切割設計與相關標籤的運用有了進一步的認識，結束之前，針對上述<section> 提及的大綱輸出，這裏還要稍作說明，這牽涉到網頁內容的設計。
當你打算提供某種特定網站服務的時候，呈現的內容通常不會太少，開發人員可以將自己想像成寫書的作者，在某種程度上，設計網站的內容架構，與寫書相當類似，通常一本書總是包含了書名、章、節與主要的內容，這些元素構成了一本書的大綱並且可以輸出成所謂的目錄，網站內容也是一樣的，畫面中的標題、導覽列與所要呈現的內容，同樣都可以編撰成為大綱，因此，以大綱條目規劃你的網站，是一開始設計網站就必須考慮的事。
大綱的編撰直接影響網站內容的組織，決定了使用者的網站使用體驗，而<section> 是支援大綱輸出最重要的標籤之一，瞭解它在這一方面的用途相當重要，初學者經常混淆<section> 與<div> 的用途，現在你可以直接釐清這兩者的差異，當你必須在網頁上切割出一個非特定功能的區塊，如果需要輸出大綱，選擇 <section> ，如果只是要套用樣式，選擇<div> ，當然，你可以利用<div> 對 <section> 進行包裝，而 <section> 區塊中當然也能配置其它複雜的內容，甚至配置子<div> 設定其內部特定的內容樣式。
好了，這一篇先這樣，下一篇來看看如果實作出上面圖示中的區塊配置，同時更進一步的大綱輸出說明。