每次點開網頁、逛網拍，你是不是也好奇過，這些漂亮的畫面背後到底是怎麼運作的？這些所有你看到的網頁，其實都是由一條條「程式碼」堆疊出來的，而今天就讓這篇文章，來用最白話的方式為你介紹 HTML，用 3 分鐘的時間帶你速解 HTML 是什麼、它是如何運作的，以及有哪些不可不知的基礎標籤！
HTML 是什麼？從定義到瀏覽器運作原理一次搞懂！
當我們在使用網頁時，為什麼滑鼠點一下，網頁就能顯示出精美的圖片、整齊的排版，還有看起很酷炫的動畫？這背後最大的功臣就是 HTML，以下就讓我們用簡顯易懂的方式，帶你認識 HTML 的定義和運作原理，看看它是怎麼在幕後默默支撐起整個網路世界的：
HTML 的定義：網頁建構的「骨架」
首先，我們要先幫 HTML 正名一下，很多人以為建構網頁就是「寫程式」，但嚴格來說，HTML 全名是「HyperText Markup Language」，中文叫作超文字標記語言，也就是說它並不是一種程式語言，而是一種「標記語言」，如果把一個網頁比喻成蓋房子，那麼大致上會是以下這樣：
- HTML：就是房子的鋼筋水泥與結構骨架，負責規定哪裡是客廳（標題）、哪裡該開扇窗（圖片）、哪裡要放一扇門（超連結）。
- CSS：負責房子的裝潢粉刷，管理顏色、字體、排版美不美觀。
- JavaScript：則是房子的智能家電系統，負責讓房子動起來，像是自動開關燈、跑馬燈或彈出視窗。
所以，想要了解 HTML 是什麼，最直覺的理解就是「它是用來定義網頁內容結構的基礎藍圖」。
HTML 的運作原理
了解完定義，那麼具體來說，HTML 到底是怎麼在電腦裡跑動的呢？其實 HTML 運作原理一點都不神秘，過程就像是「翻譯官在看劇本」：
- 工程師寫劇本（HTML 檔案）：
工程師會用像是「<p>這是一段文字</p>」這樣的「標籤（Tags）」，把文字或圖片包起來，做成一個附檔名為.html的檔案，這份檔案就是給電腦看的劇本。 - 瀏覽器當翻譯官（解析並渲染）：
當你輸入網址或點開網頁時，Chrome、Safari 或 Edge 這類的瀏覽器，就會下載這份 HTML 檔案，瀏覽器就像是一位專業的翻譯官，它看得懂這些標籤，並開始由上往下閱讀劇本。 - 舞臺完美呈現（顯示畫面）：
瀏覽器讀到<h1>就知道「哦！這是大標題，字要放大變粗！」，讀到<img>就知道「這裡要塞一張圖片！」，最後，瀏覽器會把這些標籤隱藏起來，只把漂漂亮亮的網頁畫面，呈現給坐在螢幕前的你！
HTML 基礎標籤介紹入門，了解這些你也懂網頁！
認識完 HTML 的定義與運作原理後，那下個問題又來了，就是這個網頁骨架到底是用什麼東西搭起來的？答案就是「標籤」！如果把網頁比喻成一堵樂高牆，標籤就是一塊塊形狀不同的積木，只要掌握了標籤的基本邏輯，再認識以下四個最常用的基礎標籤，你就能開始動手勾勒出網頁的雛形。
新手必懂四大常見 HTML 基礎標籤
| 標籤名稱 | 標籤語法類型 | 實際用途說明 |
|---|---|---|
標題標籤<h1> 到 <h6> | 成對標籤 | 代表不同層級的標題，<h1> 是最重要的大標題，一頁通常只出現一次，數字越大，字體也越大 |
段落標籤<p> | 成對標籤 | 用來包覆一般的長篇文字、內文敘述，瀏覽器會自動幫它獨立成一個段落並在上下留白 |
換行標籤<br> | 單獨標籤（不需結尾） | 當你想在同一個段落內強制換行，但不想像 <p> 一樣空一大行時使用 |
連結標籤<a> | 成對標籤 | 用來建立超連結，必須搭配 href 屬性，告訴瀏覽器點擊後要跳轉到哪個網址 |
圖片標籤<img> | 單獨標籤（不需結尾） | 用來在網頁上插入圖片，需搭配 src 屬性，來帶入圖片的網址或圖檔路徑 |
無序列表<ul> 搭配 <li> | 成對標籤 | 用來製作「沒有順序先後」的項目清單，預設模式前方會出現小圓點，常用在像是功能選單這方面的設計 |
有序列表<ol> 搭配 <li> | 成對標籤 | 用來製作「有順序、編號」的項目清單，瀏覽器會自動幫你加上 1, 2, 3... 的數字 |
通用區塊標籤<div> | 成對標籤 | 網頁排版最常用的「隱形大盒子」，用來把好幾個標籤群組在一起，方便用 CSS 排版和變換顏色 |
Href、style 又是什麼？HTML 標籤的靈魂伴侶介紹！
認識了各式各樣的 HTML 標籤積木後，你可能又會想「雖然有了圖片標籤 <img>，但瀏覽器怎麼知道我要放哪一張圖片？有了連結標籤 <a>，它又要怎麼知道點下去要連到哪個網站？」 別急，這時候我們就必須請出標籤的超級好幫手－「屬性（Attributes）」，如果說標籤是網頁的骨架，那麼屬性就是有如幫骨架設定身高、體重與特殊功能的「設定值」。
HTML 屬性基本該放在哪裡？
在介紹常用屬性之前，我們先來看看屬性的「常用位置」，屬性有一個鐵律，就是它永遠只能寫在「起始標籤」裡面，並且會以「屬性名稱 = "屬性值"（Name="Value"）」的成對形式出現，而一個標籤裡面可以同時塞入好幾個不同的屬性，中間只要用「空格」錯開就可以了。
四個常與基礎標籤搭配的 HTML 屬性
- ?連結的帶路導航：href（Hypertext Reference）
最常搭配的標籤：連結標籤
<a>用途說明：這是超連結的靈魂！用來指定點擊這個連結後，瀏覽器要帶讀者跳轉到哪一個網址。
範例：
<a href="https://www.example.com">放上錨點文字</a> - ?圖片的來源地圖：src（Source）
最常搭配的標籤：圖片標籤
<img>用途說明：告訴瀏覽器「圖片檔案放在哪裡」，不論是網路上的圖片網址，還是你自己電腦資料夾裡的圖片路徑，都要寫在這裡瀏覽器才抓得到圖。
範例：
<img src="banner.png"> - ?網頁的精準調色盤：style
最常搭配的標籤：所有標籤（如
<p>、<h1>、<div>等）用途說明：雖然網頁視覺通常交給 CSS 負責，但當你想快速針對某個特定標籤改變顏色、調整字體大小或加上邊框時，就可以用 style 屬性在 HTML 裡直接加點「視覺調味料」。
範例：
<p style="color: red; font-size: 20px;">一段紅色且放大的文字範例</p> - ?搜尋引擎的最愛：alt（Alternative Text）
最常搭配的標籤：圖片標籤
<img>用途說明：這叫作「圖片替代文字」，當網路太慢圖片跑不出來時，畫面上會先顯示這段文字告訴讀者「這裡原本是一張什麼圖」，更重要的是，Google 的搜尋爬蟲，會透過 alt 寫了什麼來判斷這張圖的內容，這對於 SEO 佈局很重要。
範例：
<img src="seo-tips.jpg" alt="圖片範例名稱">
HTML 語義化標籤是什麼？對架構、搜尋引擎有影響嗎？
在早期的網頁世界裡，大家排版都很喜歡用 <div style="..."> 這種萬用的「大盒子」把所有內容包起來，這樣做雖然畫面看起來一樣漂亮，但對電腦來說，整頁滿滿的 <div> 就像是一個沒有隔間、沒有整理過的雜亂空間，為了讓網頁結構更清晰，現代網頁便進化出了「語義化標籤（Semantic Tags）」。
語義化標籤－賦予標籤字面名義
簡單來說，語義化標籤就是「顧名思義」的標籤，它不只是一個用來排版的盒子，而是標籤本身的英文字母，就代表了它所包裹的內容是什麼意思，以下我們可以用一個簡單的對比，來看看它跟傳統標籤的差別：
- 傳統無語義標籤（如
<div>、<span>）：就像一個個「素色紙盒」，你可以在裡面裝各式內容，但光看外觀的話，不管是人類還是電腦，都需要花時間整理，才能理解裡面裝了什麼。 - 語義化標籤（如
<header>、<footer>）：就像是「印有商品名稱與圖案的精裝盒」。一看到標籤名字，所有人立刻理解內容大致上會是哪些。
為什麼語義化標籤對網站架構與 SEO 也很重要？
既然無語義的 <div> 搭配 CSS，也能做出一樣好看的網頁，那為什麼一定要使用語義化標籤呢？主要原因有以下幾點核心原因。如果一個網頁的程式碼看過去，全部都是 <div> 包著 <div>，工程師在維護或改版時就像在拆解俄羅斯娃娃一樣痛苦，但如果使用語義化標籤，網站的架構就像是劃分清晰的房屋格局：
<header>：網頁的頁首（通常放 Logo、主選單）。<nav>：網頁的導覽列（放主要的超連結）。<main>：網頁的主要核心內容區。<article>：一篇文章或一篇獨立的報導。<footer>：網頁的頁尾（放版權聲明、聯絡資訊）。
有了這些標籤，網站架構會變得極其工整，任何人來維護都能秒懂！
讓 Google 更有效率地了解網頁
這點是數位行銷人最需要筆記的重點！Google 的搜尋爬蟲每天要閱讀幾十億個網頁，妥妥的是個大忙人。
如果你的網頁充斥著不具意義的 <div>，Google 爬蟲就必須花費加倍的力氣去「猜」哪裡是文章重點、哪裡是側邊欄廣告，但如果你使用了語義化標籤，當爬蟲一讀到 <main> 或 <article>，它就會眼睛一亮，立刻知道「哦！最精華的核心內容在這裡！」，並快速建立索引。
讀完這篇完整的 HTML 介紹，從 HTML 是什麼、基礎標籤的表格清單、屬性的加分搭配，你是不是也發現，原來每天在滑的網頁原始碼背後，藏著這麼多貼心又有趣的設計邏輯呢？HTML 作為網頁開發與數位行銷的第一道大門，只要搞懂它的定義跟運作原理，不論你是想和工程師順暢溝通、想自己動手改網站排版，都能變得游刃有餘，不再看著程式碼發呆！