【網頁設計自學】HTML的簡易架構，以及其程式碼的意義
📘 HTML｜簡易架構與程式碼意義
先看一段標準 HTML 架構
一個基本的 HTML 頁面，通常會長得像下面這樣：
這段就是一個網頁最基本的骨架。簡單來說， <head> 放網頁設定， <body> 放真正會顯示在畫面上的內容。
🔎 HTML 基本架構總覽
可以先用下面這張表快速理解每一段的用途。
| 程式碼 | 用途 | 簡單理解 |
|---|---|---|
| <!DOCTYPE html> | 宣告 HTML 版本 | 告訴瀏覽器這是 HTML5 頁面。 |
| <html lang="zh-Hant"> | HTML 根元素與語言設定 | 代表頁面主要語言是繁體中文。 |
| <head> | 放網頁設定資料 | 例如標題、SEO、CSS、追蹤碼。 |
| <meta charset="UTF-8"> | 設定文字編碼 | 避免中文變亂碼。 |
| <meta name="viewport"> | 設定手機版顯示 | 讓手機、平板顯示正常。 |
| <title> | 設定網頁標題 | 會出現在瀏覽器分頁與搜尋結果。 |
| <body> | 放網頁實際內容 | 讀者真正看得到的東西都放這裡。 |
🧩 各段程式碼的意義
<!DOCTYPE html>
<!DOCTYPE html> 是用來告訴瀏覽器： 「這是一個 HTML5 頁面。」
如果沒有寫，瀏覽器可能會用比較舊的模式去解析網頁，導致版面顯示不正常，也就是常說的「跑版」。
<html lang="zh-Hant">
<html> 是整個 HTML 文件的根元素，代表 HTML 文件從這裡開始。
其中 lang="zh-Hant" 代表這個頁面的主要語言是 繁體中文。
這個設定對搜尋引擎、瀏覽器、翻譯工具與無障礙閱讀工具都有幫助。
<head> ... </head>
<head> 裡面放的是「不一定會直接顯示在畫面上，但對網頁很重要」的資訊。
常見會放在 <head> 裡的內容有：
- 網站標題：<title>
- SEO 描述：<meta name="description">
- CSS 樣式：<style> 或外部 CSS 檔案
- 網站追蹤：例如 Google Analytics
- 社群分享預覽：例如 Open Graph，會影響 FB、LINE 分享時的預覽內容
<meta charset="UTF-8">
<meta charset="UTF-8"> 是用來告訴瀏覽器，這個網頁使用 UTF-8 編碼。
UTF-8 可以正常支援中文、英文、符號與多國語言。如果沒設定好，中文可能會變成亂碼。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
這一段是為了讓網頁在手機和平板上可以正常顯示。
它的意思大致是：
- width=device-width：讓網頁寬度跟裝置螢幕寬度一致。
- initial-scale=1.0：設定一開始的縮放比例為 1。
如果沒有這段，有些網頁在手機上會看起來非常小，閱讀體驗很差，也不利於響應式網頁設計。
<title>你的標題</title>
<title> 是網頁標題，會影響很多地方。
- 顯示在瀏覽器分頁上。
- 可能顯示在 Google 搜尋結果標題。
- 有時會影響 LINE、FB 分享時的標題。
<body> ... </body>
<body> 裡面放的是網頁真正會顯示給讀者看的內容。
例如：
- 文章文字
- 圖片
- 連結
- 按鈕
- 表格
- 自訂 HTML 區塊
- CSS 樣式測試內容
簡單來說，只要是使用者打開網頁後「看得到、點得到、讀得到」的內容，大多都會放在 <body> 裡。
🧪 完整範例：加上標題與內容
把基本架構稍微補上內容，就會變成一個可以顯示文字的簡單 HTML 頁面。
✅ 小結
HTML 的基本架構可以先用一句話記住：
- <!DOCTYPE html>：宣告這是 HTML5。
- <html lang="zh-Hant">：開始 HTML 文件，並設定語言為繁體中文。
- <head>：放網頁設定、標題、SEO、CSS 等資訊。
- <meta charset="UTF-8">：避免中文亂碼。
- <meta name="viewport">：讓手機版顯示正常。
- <title>：設定網頁標題。
- <body>：放真正會顯示在畫面上的內容。
留言
張貼留言