HTML的head、body
網頁中的head與body是什麼？HTML的head、body介紹｜天矽科技網頁設計
建立網頁HTML的基本架構
HTML (Hyper Text Markup Language) 超文本標記語言，一種建立網頁的標準標記語言，用來組織架構並呈現網頁內容的程式語言，常與 CSS 與 JavaScript 一起使用在網頁設計上。
HTML 的基本架構會有「基本的宣告、＜head＞和＜body＞」，如下圖所示：
基本的宣告就是指 DOCTYPE 及 語言這段，DOCTYPE 是用來命令且告訴瀏覽器說「這是一個 html 檔」，如果沒有這個宣告的話，網站預設顯示就會以「怪異模式quirks mode」顯示，且一併影響 CSS 的樣式等；接著就是用＜html＞＜/html＞來包住下方的所有程式，而起始的 lang 也就是＜html lang=””＞這段，這表示網頁的內容顯示的語言為何，這裡不會影響網頁呈現。
在＜html＞中，主要會有兩大結構，也就是＜head＞和＜body＞。
＜head＞中的內容通常是用來聲明頁面的名稱、標題、關鍵字與一些meta元素…等，主要不是給人看的，而是給機器運作與搜尋所使用，所以＜head＞中的資料不會顯示在頁面中，而＜body＞中的內容才會是網頁真正跑給使用者看的，比如標題語法、超連結或目錄…等。
※ 怪異模式 quirks mode：
指在計算機領域中，一些網頁瀏覽器為了維持對較舊的網頁設計的向後兼容性，而使用的一種技術，有別於嚴格遵循全球資訊網聯盟(W3C)與網際網路工程任務組(IETF)標準而設計的「標準模式」。
資料來源：維基百科｜怪異模式
HTML head與body
網站的程式內容，基本上都會分別寫在 head 與 body 之中，如上所述，＜head＞中的內容不會顯示在頁面中，它是元素與數據內容的容器，主要是寫給機器運作與搜尋使用的，而＜body＞是網頁所有顯示內容的容器，是網頁真正要跑給使用者看的內容。
我們可以將這兩者理解成：
- head 是腦袋，想法、思考或內含，這種東西是其他人是看不到的，所以不會顯示。
- body 是身體、主體，身體、穿衣打扮及外表是大家都看的到的，所以會顯示、也是主體。
如果有人問「head與body有什麼區別？」就是上述所介紹的，並且 head 與 body 的內容位置也不可互相替換。
➤ ＜head＞
head 主要是用來放置告訴搜尋引擎網站中有什麼樣內容的標籤、定義網頁使用的樣式或控制網頁與外部第三方程式碼的連結，像是 GA、GTM 或 FB Pixel 這種第三方追蹤程式碼就會放在 head 中。
另外在 head 中，常用的標籤還有 title、meta、link、script 與 style 等，列舉幾個常見的範例說明：
- ＜meta charset="UTF-8"＞用來告訴瀏覽器網頁的編碼方式
- ＜meta name="description" content=" "＞用來描寫網站的簡述說明
- ＜meta name="keywords" content=" "＞用來放置網站的搜尋關鍵字
- ＜link rel="canonical" href=" "＞告訴搜尋引擎標準重複頁面的網址
➤ ＜body＞
網站要提供給使用者瀏覽、要跑給使用者看的東西都會放在 body 中，包括網站的標題標籤(h1~h6)、圖片img、超連結或列表表格，或是你現在正在看的文章都是被放在 body 中的內容。
列舉幾項常見語法：
- ＜h1＞＜/h1＞
- ＜h3＞＜/h3＞
- ＜h5＞＜/h5＞
- ＜img alt="說明文字" src="圖片網址" /＞
- ＜a href="網址連結" target="_blank">超連結文字
參考資料：
✓ Jerry Lin｜HTML5 基礎語法-結構
延伸閱讀：
✓ HTML是什麼？HTML基礎應用與解說
✓ HTML5是什麼？讓網頁效能更上一層樓的HTML5基本介紹
✓ 網頁中的meta是什麼？html meta tag介紹
✓ W3C是什麼？網頁設計符合W3C標準結構建立網頁語法有什麼好處？
