HTML base 標籤教學：運作原理、絕對相對路徑影響與常見注意事項

HTML base 標籤教學與運作原理：絕對相對路徑影響與注意事項

HTML <base> 標籤主要是控制網頁的連結屬性，可以指定網頁頁面的文件與連結根目錄，也可以指定網頁超連結的開啟方式，HTML base 屬性包含 href 與 target。

HTML base 教學說明與範例

HTML base 標籤原理說明

<base> 標籤的原理是透過 JavaScript 中的 document.baseURL 進行查詢與更改，當沒有設定時，預設會使用 location.href。

白話來說，當頁面設定 HTML <base> 之後，所有的圖片檔案路徑與超連結都會被全面套用。

以下透過兩段 HTML 程式碼對照，來顯示使用 HTML base 對超連結與圖片檔案路徑的差別。

HTML base 標籤設定教學

HTML <base> 標籤在使用上有其限制，每一個 HTML 文件中只能有一個 <base> 標籤。

下面是一個 HTML <base> 標籤的使用教學，所有相關設定都必須放置在 <head> 當中：

<html>
  <head>
    <title>HTML base 標籤教學說明</title>
    <!-- HTML base href, target 範例設定 -->
    <base href="https://seanacnet.com" target="_blank">
  </head>
  <body>

    <a href="about-html-base">
      關於 html base 用法
    </a>

    <img src="img/about-html-base.img" alt="關於 html base 用法圖示">

  </body>
</html>

上面範例的執行結果，與下方沒有使用 <base> 標籤的完整路徑寫法完全相同：

<html>
  <head>
    <title>HTML base 標籤教學說明比較</title>
  </head>
  <body>
    <a href="https://seanacnet.com/about-html-base" target="_blank">
      關於 html base 用法
    </a>

    <img src="https://seanacnet.com/img/about-html-base.img" alt="關於 html base 用法圖示">
  </body>
</html>

你可以透過 <base> 標籤中的 href 來指定整個網頁的連結開頭，只要有設定，任何網頁中的相對路徑連結都會被 <base> 中的 href 覆蓋過去。

實際運作範例

你可以把 <base> 標籤想像成具有較高的優先級與強制性，讓我們看一個綜合範例。

<html>
  <head>
    <title>Example 1</title>
  </head>
  <body>

    <h1>這是一個 HTML base 標籤範例</h1>
    <p>
       <a href="https://ex_domain_xxx/index.html">
         Hello World!
       </a>
    </p>
    <p>
       <a href="/index.html">
         Go Home
       </a>
    </p>
    <div>
      <img src="https://ex_domain_aaa/img/ex1.img" alt="範例圖片一">
      <img src="https://ex_domain_bbb/img/ex2.img" alt="範例圖片二">
      <img src="https://ex_domain_ccc/img/ex2.img" alt="範例圖片三">
    </div>

  </body>
</html>

在範例中，假設網頁有 3 張外部圖片與 2 個超連結，分別指向不同的 Domain 來源。如果在 <head> 中加入 <base> 標籤來定義 href：

<head>
  <base href="https://seanacnet.com">
</head>

則整頁 HTML 執行的最終結果會變成：

<html>
  <head>
    <title>Example 1 最終結果</title>
    <base href="https://seanacnet.com">
  </head>
  <body>

    <h1>這是一個 HTML base 標籤範例</h1>
    <p>
       <a href="https://seanacnet.com/index.html">
         Hello World!
       </a>
    </p>
    <p>
       <a href="https://seanacnet.com/index.html">
         Go Home
       </a>
    </p>
    <div>
      <img src="https://seanacnet.com/img/ex1.img" alt="範例圖片一">
      <img src="https://seanacnet.com/img/ex2.img" alt="範例圖片二">
      <img src="https://seanacnet.com/img/ex2.img" alt="範例圖片三">
    </div>

  </body>
</html>

從最終結果可以看出，網頁執行完畢後，不管是超連結或圖片的路徑，都會統一被更換為 <base> 所設定的 href。

HTML base 標籤注意事項

值得注意的是，雖然 <base> 在網頁執行結果上會替換掉頁面的所有相對連結，但並不包含 Open Graph 標籤 (og:url、og:image 等)，例如：

<html>
  <head>
    <title>Example 1 最終結果</title>
    <base href="https://seanacnet.com">
    <meta property="og:url" content="https://ex1.com/index.html">
    <meta property="og:image" content="https://ex1.com/ex1.jpg">
  </head>
</html>

上方的 og:url 與 og:image 並不受 <base> 標籤影響。因此在實務開發上，不要期望透過 <base> 標籤去更改 Meta Open Graph 中的連結，因為它們不會有所變化。

背後的原因在於社群平台與搜尋引擎爬蟲抓取網頁資訊的機制：當爬蟲初步抓取網頁資訊時，通常不會完整執行頁面中的 JavaScript，而 <base> 的運作與 JavaScript 的 document.baseURL 息息相關，這也解釋了為什麼 Open Graph 標籤會維持原本的寫法。

HTML base 標籤瀏覽器相容性

在瀏覽器的相容性表現上，目前所有主流瀏覽器皆完整支援 <base> 標籤，詳細資訊可參考 MDN Web Docs <base> 瀏覽器相容性。

參考資料與延伸閱讀

• MDN Web Docs：HTML base 元素技術文件與屬性說明
• MDN Web Docs：base HTML document base URL element 官方技術規格
• MDN Web Docs：Location.href 屬性說明
• WHATWG HTML Living Standard：The base element 官方規範
• MDN Web Docs：Specification 官方技術規格
• 延伸閱讀：JS location.href 用法教學：如何取得完整 URL 與網址參數
• 延伸閱讀：Javascript location.protocol 語法教學：如何判斷網頁 http 或 https