架設網站

html footer 怎麼寫？

06/04/2025 / No Comments

在學寫網頁的路上，我遇到的第一個「坑」就是 HTML 的 footer。當時以為 footer 就只是網頁的底部加個簡單的文字或連結，說寫就寫，結果一堆細節搞得我頭都大了。什麼語意化、版面適配、SEO 最佳化……可不是隨便加個 `

` 標籤就能做好的！這次我想跟大家分享一些實戰中血淚換來的經驗，特別是關於 footer 怎麼寫，才能看起來專業又實用。無論你是剛起步的新手還是想優化既有網站的前端工程師，希望這篇文能幫助你少走彎路！

HTML Footer的基本框架與結構介紹

HTML Footer 是網頁中非常關鍵的一部分，因為它負責結束整個頁面並提供關鍵的補充資訊。基本結構其實很簡單，使用

標籤即可開始，裡面可以根據需要加入段落、連結、清單或其他內容。以下是一個簡單的框架範例：

在Footer中加入版權聲明和聯絡方式

在 Footer 添加版權聲明是必須的，它不僅增添了專業度，還能保護網站內容的版權。最好直接使用「© 年份 + 網站名稱」的格式，清楚而簡潔。同時，聯絡方式可以放在

內，讓訪客容易找到您。

範例：

善用HTML Footer提升SEO的方法

其實，Footer 可以成為潛在的 SEO 利器！您可以在 Footer 添加內部鏈接，比如常用的頁面（隱私政策、服務條款等），並使用關鍵詞描述每個頁面。這樣能夠增加內部鏈結密度，幫助搜尋引擎更快速理解網站結構。

  • 確保 Footer 中的連結使用描述性文字，例如「隱私政策」代替「點擊我」。
  • 避免堆砌過多關鍵詞，保持內容自然。
  • 對於大型網站，可以將 Footer 分為多欄（例如 WordPress 的 widget 區塊）。

在Footer加入社群媒體連結的技巧

有了社群媒體連結在 Footer 中，訪客能立刻找到您的社群帳號，也是建立信任感的方式之一。使用社群圖標代替文字連結，不僅外觀更吸引人，也減少了佔用的空間。記得使用 包裹圖標，並為每個連結加上明確的描述（以利無障礙使用）。

範例：

使用CSS美化HTML Footer的小秘訣

實際上，HTML Footer 的設計會直接影響整個網站的專業度感覺，而 CSS 是美化的秘密武器。一個小技巧是使用 WordPress 樣式規範，如加上 class="site-footer"，將樣式統一管理。例如，您可以加上背景色、調整字型，讓 Footer 與網站整體風格無縫契合。

    
      .site-footer {
        background-color: #333;
        color: #fff;
        padding: 20px;
        text-align: center;
      }
      .site-footer a {
        color: #ffcc00;
        text-decoration: none;
      }
      .site-footer a:hover {
        text-decoration: underline;
      }

###

什麼是 HTML footer，為什麼重要？

喔，這個問題真的超多人問！HTML 的 `

`，其實就是網頁底部的結構部分。它通常放一些版權聲明、聯絡資訊、隱私政策或是網站導航。如果你是初學者，可能會覺得：「底部有這麼重要？」但老實說，它有助於提升用戶體驗，讓網站看起來更加專業（還有助 SEO 呢！）。

舉個例子吧，像我們經常需要讓用戶快速找到「聯絡我們」或「網站條款」，這些東西就放在 footer 超合適！而且如果你認真優化 footer，例如加入內部連結，還能幫助網頁在搜尋引擎中更容易被索引。

###

HTML footer 怎麼寫才能符合基本結構？

先講個真實故事，我剛學 HTML 時，footer 寫得亂七八糟的—直接用 `

`，結果每次修改樣式都麻煩到爆！後來才發現，其實 HTML5 提供專用的 `

` 標籤，真的好用又直觀。

這是基本範例：

這麼簡單的 code 可以搞定一個基礎 footer。注意啊，所有內容都要包進 `

` 標籤內，這樣 HTML 的結構才乾淨規範。

###

怎麼讓 footer 更美觀？

講白了，乾巴巴的一段文字當然不夠吸睛。所以加點 CSS 吧！我自己就是用偷學來的技巧啦，這段程式碼你一定要試試。

“`css
footer {
background-color: #333; /* 深色背景 */
color: #fff; /* 文字顏色對比 */
text-align: center; /* 置中文字 */
padding: 20px; /* 增加內邊距 */
font-size: 14px; /* 字體大小 */
}

footer a {
color: #ffd700; /* 黃色連結 */
text-decoration: none; /* 移除底線 */
margin: 0 10px; /* 調整間距 */
}

footer a:hover {
text-decoration: underline; /* 滑過時顯示底線 */
}
“`

只需加在你的 CSS 樣式表中，就會立刻感受到不一樣了！我用了類似這樣的樣式，網站瞬間質感提升。不過，別忘了檢查手機和桌機版的對應效果喔！

###

是否需要加入版權聲明或聯絡資訊？

這可是我的踩雷之處，一開始我完全沒放版權聲明或聯絡方式，結果被客戶吐槽！後來才知道，就算是個人網站，至少要簡單交代版權，這樣才顯得專業，也能避免不必要的法律糾纷。

具體可以這樣加：

© 2023 XXX公司名稱。保留一切權利。

聯絡我們：support@abc.com

有了這段，訪問者不僅能找到聯絡方式，你的網站也更可信。簡單吧？

###

如何在 footer 加入導航選項？

另一個實用的功能是把導航列加入 footer。我學到的訣竅是：不要加太多複雜的選項，三到五個已經夠多了！像這樣：

列表結構清晰又容易加樣式，真的很方便！如果你有多個語言版本，可以考慮在這裡加語言切換按鈕，合理又不突兀。

###

總結：開始寫自己的 HTML footer 吧！

其實 HTML footer 不難寫，但要真正做好卻需要點耐心和練習。從版權資訊到導航列、色彩搭配，都會直接影響用戶的體驗與網站的專業度。再提醒一句：常常預覽你的頁面效果，這樣才能確保 footer 看起來一致、好看！

總結

總結一下，其實寫一個好的 HTML footer 並不算太複雜！只要你清楚網站的需求，了解訪客需要什麼樣的資訊，然後合理運用 HTML 和 CSS，基本上就能打造一個實用且吸引人的 footer。當然，這一切都可以隨著時間慢慢優化。相信我，我剛開始也覺得有點棘手，但一步步試，邊學邊改，真的進步很快！

如果你還有其他關於 HTML 或網站設計的問題，歡迎隨時留言給我或一起交流！咱們在做網站這條路上，彼此扶持，少走彎路，多增經驗，加油呀！

You May Also Like

bluehost評價

『主機推薦』Bluehost懶人包完整評價｜最佳初學者部落格

06/03/2025
網站架設

『網站架設』不懂程式語言，教你如何通過10個簡單步驟創建網站｜循序漸進圖文教學

06/03/2025
Bluehost 教學

『Bluehost 教學』初學者如何使用並創建網站或部落格｜含優惠碼下載

06/03/2025

Leave a Reply

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *