HTML 5 網頁標頭與基本骨架怎麼寫？新手入門核心語法解析

HTML 5 發布於 2016 年，是目前網頁製作的主流，除了少數於 2016 年以前製作的網站，目前都已是 HTML 5 的時代。

到 2021 年 11 月為止，依據經驗手邊經手的網站多半已經都更換為 HTML 5，但仍然有 20% 的網站（個人觀看與經手，不代表整體市場），尚未更新至 HTML 5。

關於 HTML 發展詳情請看 HTML 意思是什麼，之前已做過簡介。

宣告 HTML 5

HTML 5 的宣告，在網頁的一開始加上以下程式碼：

<!DOCTYPE html>

與 HTML 4 相比，HTML 5 的宣告相對簡潔，以下是 HTML 4 的宣告，提供做為比較：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

製作 HTML 5 網頁的基本結構

HTML 語法基本組成說明

網頁的語法組成都是對稱的，由標籤（Tag）來告知瀏覽器此區段的開始，由結尾標籤來告知該區段的結束，而標籤的中間，包裹著實際的內容。

HTML 基本結構

製作 HTML 5 網頁，與 HTML 4 一樣，基本由 html、head、body 組成。

<html></html>

宣告該區段為 HTML 文件（網頁）。

head 區段

宣告網頁的基本資訊，也被稱作「標頭」，主要將資訊提供給搜尋引擎（如 Google、Bing 等）、社群軟體（如 Facebook、Instagram、LINE 等）、瀏覽器（如 Chrome、Safari）讀取，提供的資訊包含標題、描述、Canonical 網址、社群連結等網頁重要資訊。

該區段的訊息，幾乎不會直接顯示在網頁上給一般用戶看到。

該區段也是存放相關 Meta tag、JS、CSS、Font 的地方。

<html>
    <head>
        <!-- 放 meta tag、JS、CSS、Font -->
    </head>
</html>

body 區段

網頁的內容，所有網頁看得到的資訊，都放在 body 中。

<html>
    <head>
        <!-- 放 meta tag、JS、CSS、Font -->
    </head>
    <body>
        <!-- 網頁內容 --> 
    </body>
</html>

HTML 5 基本結構 Example

<!DOCTYPE html>
<html>
  <head></head>
  <body></body>
</html>

HTML 5 Example

不免俗，來一個 Hello World 範例：

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>這是一個 Hello World 範例頁面</p>
  </body>
</html>

參考資料與延伸閱讀

• MDN Web Docs：HTML <!DOCTYPE> 宣告規範
• MDN Web Docs：html 根元素說明
• MDN Web Docs：head 網頁標頭元素說明
• MDN Web Docs：body 文件主體元素說明
• WHATWG HTML Living Standard：The global structure of an HTML document
• 延伸閱讀：無障礙網頁的基石：善用 HTML map 標籤與 area 屬性打造完美的螢幕閱讀器導覽體驗
• 延伸閱讀：SSL/TLS(HTTPS)憑證爆資安危機——嚴重評級「重度」之後真的是「印度」?!