HTML 超連結 (Hyperlink) 是什麼？實務應用例子

這篇文章最後更新日期：2024 年 5 月 10 日
作者： Mack Chan

跟據權威的《維基百科》記載和文獻，超連結 (Hyperlink) 是指超文字內由一檔案連接至另一檔案的連結。作用與論文中的參考或注釋類似，以方便讀者隨時參考某一詞彙的定義。

超連結有點像是文學作品中的參考資料列表，它可以結合電腦網路和適當的存取協定來追蹤資料的原始出處，並被儲存、檢視，或顯示為關聯檔案中的一部份。

超連結中，最為通行的形式就是在全球資訊網上使用的 URL。瀏覽器通常會用一些特殊的方式來顯示超連結。如不同的文字色彩、大小或樣式。而且，游標移動到超連結上時，也會轉變為手形指示出來。

超連結在大部分的瀏覽器裡是顯示為加上底線的藍色字體，當這個連結已經被快取過時，則轉為紫色。當使用者觸發超連結時 (例如，用滑鼠左鍵按下超連結)，瀏覽器將會顯示出連結的目標。

若目標並非 HTML 檔案時，將依其檔案格式以及瀏覽器自身之外掛程式而啟動外部程式以開啟檔案。

跟超連結相關聯的是超文字 (Hypertext)，它是一種可以顯示在電腦顯示器或電子裝置上的文字，現時超文字普遍以電子文件的方式存在，其中的文字包含有可以連結到其他欄位或者文件的超連結，允許從當前閱讀的文字直接切換到超連結所指向的所有文字。

---

超連結 (Hyperlink) 在各個中文地區的別名

國家 / 地區	詞語 / 字串
中國大陸	超鏈接 鏈接
香港 台灣	超鏈結 超連結 鏈結 連結
英語地區	Hyperlink Link Inline Links Anchor Links Fat Links

---

什麼是網頁裡的超連結 (Hyperlink)？

全世界數十億計的網頁 (Web Page) 都是透過超連結互相連結，一個網站可能只有 5 頁，也有大型媒體網站擁有 100,000 個頁面。當中每個頁面可能 1 個超連結也沒有，也有可能有超過 100 條超連結。所以我們現在資訊爆炸的時代，就是依賴這些頁面互相連結而成。

---

超連結 (Hyperlink) 的主要用途是什麼？

網際網路 (Internet) 就是把整個世界上，不同位置主機裡的網頁「互相連結」而成，但要如何在數十年前就達到這個目標的呢？就是透過簡單的超連結 (Hyperlink) 協助。

在 1970 年代，最早期只是美國少數大學互相連結和交換資料，互聯網並未出現，但當人們享受到這種便利之後，就連結更多大學的電腦，大家交換學術上的研究和論文，這是第一次出現人類的「上網」行為。

接著這種互相連結的行為，甚至發展到包含政府、軍事、教育、商業應用和個人用途。直到 2022 年，更出現像 Web 3.0、NFT、區塊鏈和數碼貨幣等的應用，在未來「超連結」是不會消失的。

---

超連結 (Hyperlink) 的常見種類

3 種連結的方式並沒有衝突，一個正常的網站，應該 3 種方式交叉使用，才符合 Google 的網頁部署和規劃建議，所以新手請適量加入已下的連結類型。

類型一：錨點連結 (Anchor Links)
在相同的頁面或文章裡，移動到不同的章節和內容，並不需要重新下載頁面，例如從 [文章目錄] 連結 [作者簡介] 的章節。

類型二：內部連結 (Internal Link)
連結到你網站裡的其他頁面，例如從 [關於我們] 頁面連結到 [產品目錄] 頁面，兩個頁面都屬於你的網站之內。

類型三：外部連結 (External Link)
連結到第三方的頁面，那些頁面是「其他單位」擁有的，例如連結到 Facebook 或 Youtube 平台。

---

超連結的 HTML 語法應用

下方簡單介紹數種超連結的基本形態，這邊不累贅描寫過多細節內容，詳情可以到 W3Schools 教學網站裡研習和測試。

標準的結構：單純的文字連結

<a href=”https:// 網址”>文字連結</a>

默認情況下，鏈接將在所有瀏覽器中顯示如下：

• 未訪問的超連結帶有下劃線和藍色
• 訪問過的超連結帶有下劃線和紫色
• 活動超連結帶有下劃線和紅色

連結開啟的方式：

舉例：如果超連結希望點擊之後，在新的分頁打開，語法如下
<a href=”https:// 網址” target=”_blank”>文字連結</a>

HTML 語法	描述說明
_self	默認。在單擊時在同一窗口/選項卡中打開文檔
_blank	在新分頁或選項卡中打開文檔
_parent	在父框架中打開文檔
_top	在整個窗口中打開文檔

絕對路徑與相對路徑的差異？

<h2>絕對路徑</h2>
<p><a href=”https://www.apple.com”>Apple</a></p>
<p><a href=”https://www.google.com/”>Google</a></p>

<h2>相對路徑</h2>
<p><a href=”html_images.asp”>HTML Images</a></p>
<p><a href=”/css/default.asp”>CSS Tutorial</a></p>

---

在 WordPress 插入 [文字超連結]

在文章中插入超連結，應該是站長的日常工作。選取段落裡的重點文字，點擊連結符號，在彈出選項裡，可以輸入超連結網址、是否另外開新的頁面、設定為 Nofollow 或 Sponsored 的連結屬性。

---

在 WordPress 插入 [圖片超連結]

在長篇文章和頁面裡的圖片插入「超連結」是很常見的做法，在 WordPress 編輯器裡的步驟很簡單和直觀。

步驟一：點擊「鎖鏈」按鈕
除了預設的連結網址，WordPress 允許你連結到站內的「媒體檔案」和「附件頁面」。

步驟二：從進階的頁面設定
在輸入「超連結」的右方有「下箭頭」，建議每次都打開，內裡可以調整是否「另開新視窗」、「連結的 Rel 屬性值」和「連結的 CSS 類別」等等設定。

---

在 WordPress 插入 [按鈕超連結]

在長篇文章和頁面裡的按鈕插入「超連結」是很常見的做法，在 WordPress 編輯器裡的步驟很簡單和直觀。

步驟一：點擊「鎖鏈」按鈕
請確保你正在編輯那個按鈕，因為每個都是獨立的。

步驟二：從進階的頁面設定
可以「搜尋或輸入網址」，例如站內或站外連結也可。

步驟三：點擊「在新分頁中開啟」按鈕
這裡可以調整是否「另開新視窗」 ，預設是「關閉」狀態。

步驟四：確認設定
每次都要按一下確認，不然設定可能會失效。

---

在 WordPress 插入 [錨點超連結]

輸入你建立的 HTML 錨點，開頭為井字 (#) 符號。舉例來說，如果你想要建立名稱為「了解我是誰」的錨點，請將連結設為「#about-me」。接著，只要訪客按一下你建立的連結，就是連結這一頁裡簡介你的章節。

---

延伸閱讀：認識 [標題區塊] 的知識

理論上，你可以在文章的大部分地方新增「標題區塊」，請緊記標題的主要作用為「段落」定出一個小的結論和中心思想。它的外觀一般會相比段落的文字來說。

會使用比較「粗體」或尺寸大的字體，但新手「請勿把標題視作放大字體」之用，如果希望正確和認真調整內文的字體大小，請前往佈景主題相關的設定區域調整。

---

延伸閱讀：認識 [段落區塊] 的知識

段落工具列擁有靠左對齊文字、文字置中、靠右對齊文字等多種段落功能選項，設定粗體、斜體、超連結等文字格式功能，以及許多其他功能。

因為使用率最高的區塊是段落，所以被 WordPress 選為預設值當之無愧，這意味你直接在編輯器輸入文字內容，本身就是使用「段落區塊」之中，無需額外設定或轉換形態。

---

常見問題 FAQ

---

參考資料和引用文獻：

• 維基百科：WordPress 是什麼？
• 維基百科：超連結 是什麼？
• 維基百科：What is Hyperlink?
• 維基百科：超文字 是什麼？
• 維基百科：網際網路 (Internet) 是什麼？
• WordPress：Make WordPress Core
• WordPress：連結是什麼？
• iThemes Media：Adding Links in WordPress
• WPBeginner：Beginner’s Guide on How to Add a Link in WordPress
• W3Schools：瞭解完整的超連結語法應用
• 網站迷谷：標題區塊
• 網站迷谷：段落區塊
• 網站迷谷：圖片區塊
• 網站迷谷：按鈕區塊
• 網站迷谷：WordPress 目錄外掛
• 網站迷谷：區塊編輯器
• 網站迷谷：傳統編輯器
• 網站迷谷：WordPress 佈景主題推薦
• 網站迷谷：WordPress 外掛推薦

---

WordPress 學員人數
15,000+ 人 (持續增加之中)