昨天我們提到怎麼爲網頁中的文字進行初步的編排，包括添加粗體斜體等樣式、換行與分段，還有在段落間加上標體與分隔線。

不過如果跟著做，會發現我們寫出來的網頁還是跟平常看到的網頁不太一樣。

我們的網頁，就像是用Word寫出來的簡單文章。跟其他網頁比起來，好像還少了什麼。

網頁中的不同區塊

如果大家多留意的話，會發現多數的網頁除了主要內容之外，通常還會分成幾種不同的區塊。

雖然每個網頁實際上分成哪些區塊都不同，但有一些區塊是多數網頁都會有的。就像是下圖中的網頁一樣。

圖片來源：MDN

可以將圖中的網頁分成五種區塊。每種區塊分別傳達了不同資訊，或是說具備了不同功能。這五種區塊分別是：[1]

• header 頁首
• navigation bar 導覽列（或說選單列）
• main content 主要內容
• sidebar 側邊欄
• footer 頁尾

這些區塊裡放了什麼

• header頁首
  通常會有整個網站的標題跟logo。可以讓使用者知道目前是在什麼網站。

• navigation bar導覽列
  通常會有前往其他頁面的連結。可以讓使用者快速切換至其他頁面。

• main content主要內容
  就是當前網頁的主要內容。可能是單則內容，如一篇文章或一部影片；也可能同時有多則內容，像是臉書的動態牆；也可能是一系列的標題與照片，如果要看到實際內容要再點進去看，就像是新聞媒體的首頁。

• sidebar側邊欄
  通常會是其他網頁的連結，或是廣告等。以新聞報導為例，可能就會是熱門新聞，吸引使用者點進去看。

• footer頁尾
  在頁尾的區塊中，通常會有版權聲明、聯絡資訊，以及其他常用的連結。

網頁的版面佈局

前面提到的五種區塊只是常見的網頁區塊劃分方式。不見得每個網頁都會有這些區塊，也可能有些網頁會區分出更多區塊。

比如說，有些網頁沒有側邊欄的區塊，屬於單欄式版面（自己就是一欄）。而有些網頁可能會同時有左右兩邊的側邊欄，屬於三欄式版面。

即便是同一個網頁，也可能會因應瀏覽裝置的尺寸，以不同類型的版面呈現。
可能某個網頁在電腦上瀏覽的時候有側邊欄，但改用手機或平板等螢幕較小的裝置瀏覽時，原先的側邊欄就移到主要內容的區塊之下，變成單欄式網頁了。[2]

因應多樣化的需求，網頁至今已經發展出不同種類的版面佈局，如下圖所示。但這不是今天的重點，就先帶過～

圖片來源：RAMOTION

劃分區塊的HTML元素

過去在劃分這些區塊時，通常會以<div>搭配class或id屬性的方式來處理。但這樣難以表達這些區塊本身的意義，屬性名稱不一致也會造成管理上的麻煩。[3]

於是後來HTML新增了用於劃分網頁區塊的語意化結構元素（semantic structural elements），包括<header>、<nav>、<main>、<aside>、<section>、<article>、<footer>等。

昨天有提到意義的重要性。因此在劃分網頁的區塊時，應該優先使用這些語意化元素。
雖然用其他方式也能劃分網頁的區塊，卻無法傳達區塊本身的涵義，不利於後續的其他應用。

是這樣沒錯，但不是這樣

雖然就名稱上來看，<header>對應到頁首，<nav>對應到導覽列，<aside>對應到側邊欄，<footer>對應到頁尾。但實際上這些元素的意義不只是這樣，所以也可能有其他用法（咦？

同樣的，即便<article>從名稱上來看是指文章，但實際上的意義也有些差別，也可能用來裝其他東西。

至於<section>以名稱來看是指區塊，似乎沒有限定是什麼區塊，好像什麼都可以裝，實際上卻不是如此。

那麼，要怎麼使用這些元素才對呢？ 這邊就先讓我們下集待續～

[1]:MDN, Structuring documents
[2]:MDN, What do common web layouts contain?
[3]:Cami, Day14：小事之 HTML 語意化標籤 上篇