HTML 中，Header 標簽起著至關重要的作用，它定義了網頁的頭部結構，為整個網頁的內容分級和組織奠定了基礎。Header 標簽的使用直接影響著網頁的布局、搜索引擎優化（SEO）和訪問者體驗。現在，讓我們深入探討 HTML Header 標簽的奧秘，幫助你打造出結構清晰、易于閱讀和搜索引擎優化的網頁！

HTML Header 標簽介紹

在 HTML 中，它通常位于網頁的頂部，包含著網頁標題、logo、導航菜單等重要元素。Header 標簽可以出現不止一次，這意味著一個網頁可以有多個 header 部分，但通常主 header 部分只會出現一次，用于包含與整個網頁相關的全球性信息。

Header 標簽的正確使用方法

正確使用 Header 標簽對于構建一個良好網頁結構至關重要。以下是你需要注意的關鍵點：

1. 網頁標題 (h1) ： Header 標簽內通常包含一個網頁標題，使用
2. 標簽來定義。這個標題應該準確地描述網頁內容，因為它不僅是網頁的視覺焦點，也是搜索引擎抓取網頁內容的關鍵。
3. 層級與嵌套： Header 標簽內可以包含不同層級的標題，
4. 確保標題層級是清晰的，不要跳級使用，這有助于搜索引擎正確理解網頁結構。此外，你也可以在 Header 標簽內嵌套其他標簽，比如 標簽用于定義導航鏈接。
5. logo 與品牌形象： 在 Header 部分包含你的 logo 和品牌名稱，這有助于提升品牌辨識度和用戶體驗。你可以使用標簽來添加 logo 圖片，并確保它具有合適的替代文本 (alt text) 以利于 SEO 和輔助技術。
6. 元數據與 SEO： Header 標簽也是添加元數據 (meta data) 的理想位置，這可以幫助搜索引擎更好地理解和索引你的網頁。使用 標簽來定義關鍵詞、描述、作者等信息，確保你的網頁在搜索結果中脫穎而出。

最佳實踐與建議

要充分發揮 Header 標簽的潛力，以下是一些最佳實踐建議：

1. 保持簡潔與聚焦： Header 部分應該簡潔明了，只包含必要的信息。避免在 Header 中添加過多內容，這可能會分散讀者注意力并影響網頁性能。
2. 響應式設計： 確保你的 Header 在不同設備和屏幕尺寸上都能良好呈現。使用響應式設計技術，比如媒體查詢，使你的網頁在手機、平板和桌面電腦上都能提供一致且便于使用的體驗。
3. 易于導航： Header 部分應該包含清晰易懂的導航鏈接，幫助讀者快速定位他們感興趣的內容。確保導航鏈接的標簽具有描述性，且與網頁內容相關。
4. 測試與驗證： 使用 HTML 驗證工具確保你的 Header 代碼符合標準。此外，在不同瀏覽器和設備上測試你的網頁，確保 Header 部分在所有環境中都能正常呈現。

結論

HTML Header 標簽是構建網頁結構的基石，它影響著網頁的視覺呈現、用戶體驗和搜索引擎優化。通過正確使用 Header 標簽，你可以打造出層級分明、易于導航和搜索引擎友好的網頁。記住本文的最佳實踐建議，你將能夠創建出高質量、高性能且吸引人的網頁！

文已經過原作者 Shadeed 授權翻譯。

在 CSS3 沒有普及的時候，創建一個網站 header 是一項既可怕又困難的任務 ?。那時，Flexbox 還是個新東西，我們不得不使用老方法，比如 float和clearfix技術。今天，情況完全不同了，Flexbox 得到了廣泛的支持，大大的減少了我們的開發工作，同時也為我們提供了更多的可能性。

有人可能會說，現在 CSS3 這么普及，制作一個網站 header 不是很容易么 ?？并非如此，因為有一些有趣的挑戰需要解決,在本文中我們會介紹其中的幾種。

簡介

首先，這里所說的網站 Header 是用戶訪問網站時首先看到的內容之一。通常，它包含logo或網站名稱以及導航鏈接，如下所示:

不管 Header 的視覺設計如何，關鍵元素都是logo 和導航。

Flexbox

當 flexbox 應用于 Header 元素時，它將使所有子項目在同一行中。然后，你所需要做的就是應用justify-content來分配它們之間的間距。

html

<header class="site-header">
  <a href="#" class="brand">Brand</a>
  <nav class="nav"></nav>
</header>

css

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

很簡單，對吧?對于這樣的用例，是的，可能會比這更復雜。

Header Wrapper

在上面的 lago 和 nav 外沒有包含一層 wrapper，這在大屏幕可能會出現問題。

從上可以看到第一個Header太寬了，因為它沒有內部 wrapper 相比第一個，第二個看起來好多了。所以，我們可以對 HTML 進行如下調整。

<header class="site-header">
  <div class="wrapper site-header__wrapper">
    <a href="#" class="brand"><img src="logo.svg" alt="brand" /></a>
    <nav class="nav"></nav>
  </div>
</header>

flexbox應該移動到.site-header__wrapper元素中。

.site-header__wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

使用 flex-wrap

當屏幕很小的時候，可以水平滾動。見下圖

如果沒有設置flex-wrap: wrap，當屏幕過小的時候就會出現水平滾動，如果不想這樣，可以加上 flex-wrap: wrap` ?。

Header 的多種形式

我喜歡使用flexbox的原因是它可以很容易地處理 header 設計的多種變化。基于前面的 header 設計，我擴展了 header 元素的一些選項，如添加按鈕、搜索輸入和更改子項目的順序。

Header 變化 1

假設我想要在導航鏈接旁邊添加了一個按鈕。這應該如何處理?我們應該把它作為鏈接添加到導航欄中嗎?還是應該和導航分開?我更喜歡這樣做。

<header class="site-header">
  <div class="wrapper site-header__wrapper">
    <a href="#" class="brand"><img src="logo.svg" alt="brand" /></a>
    <nav class="nav"></nav>
    <a href="/track-shipment" class="button">Track</a>
  </div>
</header>

這種情況下，我們不能在用 justify-content: space-between來處理間隙，相反，我會在 nav 元素上使用 margin-left: auto，

這樣，它就會自動向右靠齊。

將導航和 track 按鈕分開對于移動設備非常有用，因為我們需要保留該按鈕并在其旁邊顯示一個移動切換按鈕。

Header 變化 2

與第一個變化類似，這個變化增加了一個搜索輸入，占用了剩余的可用空間。對于flexbox，這可以通過使用flex屬性來實現。

html

<header class="site-header">
  <div class="wrapper site-header__wrapper">
    <a href="#" class="brand"><img src="logo.svg" alt="brand" /></a>
    <div class="search"></div>
    <nav class="nav"></nav>
    <a href="/track-shipment" class="button">Track</a>
  </div>
</header>

css

.search {
  flex: 1;
}

現在，搜索輸入將填充 brand 和nav 之間的可用空間。但是，這有一些限制。在較小的視口上，header 將如下所示:

搜索輸入寬度不應小于此寬度，因為這樣很難輸入和查看全文。下面有兩種解決方案：

我更喜歡第二種解決方案，因為它不會過早隱藏導航。一般來說，如果元素不影響布局，我會盡量避免隱藏它。

Header 變化 3

對于這個示例，HTML標記是相同的，但是 header 里的元素順序是不同的。我們如何才能做到這一點? 你可能想到用 order 屬性來解決這個問題 ?

html

<header class="site-header">
  <div class="wrapper site-header__wrapper">
    <a href="#" class="brand"><img src="logo.svg" alt="brand" /></a>
    <nav class="nav"></nav>
    <a href="/track-shipment" class="button">Track</a>
  </div>
</header>

css

.site-header {
  display: flex;
  justify-content: space-between;
}

.nav {
  order: -1;
}

這樣有個問題，間隔空間不會使 logo 居中，它只是分散項目之間的空間。

解決方案是給每個子項一個flex: 1，這將在它們之間分配可用空間。

.brand,
.nav,
.button {
  flex: 1;
}

這樣，由于flex: 1，按鈕元素變寬了， 解決此問題的唯一方法是將其包裹到另一個元素中。

HTML

<header class="site-header">
  <div class="wrapper site-header__wrapper">
    <a href="#" class="brand"><img src="logo.svg" alt="brand" /></a>
    <nav class="nav"></nav>
    <div class="button-wrapper">
      <a href="/track-shipment" class="button">Track</a>
    </div>
  </div>
</header>

這樣，我們就可以將下面的logo和按鈕居中。

.logo {
  text-align: center;
}

/* 不要介意這里的命名，這只是出于演示*/
.button-wrapper {
  text-align: end; /* end 等同于LTR語言中的right */
}

但是，如果添加了更多導航鏈接，這種方法很容易失敗。我們需要確保導航鏈接的數量不會超過特定的限制。下面一個logo偏離中心的例子 ?:

正如在上圖中看到的，logo沒有居中。所以要記住這一點，以避免這種意想不到的問題 ?。

使用 Flexbox 構建 Header 的有用技巧

flex-basis

如果某個元素需要在移動設備上占據整個寬度（不能隱藏的重要導航），我會使用flex-basis: 100% ?。

從上面的模型看，做起來可能很簡單。實際上不是。通常，header 可能有一個內部間距（padding），當我們強制某項占據全部寬度時，除非清除padding ，否則它不會生效。但是，刪除padding不切實際，因為它將影響設計中的其他元素 ?。

下面解決此問題的一種解決方法 ?：

1. 將flex: 1 0 100%添加到導航元素。
2. 如有需要，請更改其order。有時，可能還有其他元素，我們想確保導航是最后一個。
3. 加上一個等于寬度等于 padding 的負 margin，這也會讓導航占據整個寬度。
4. 在導航中添加 padding，這會增加一些適當的空間。
5. 最后，使用了justify-content: center將導航項居中（不重要）

.nav {
  flex: 1 0 100%; /* [1] */
  order: 2; /* [2] */
  margin: 1rem -1rem -1rem -1rem; /* [3] */
  padding: 1rem; /* [4] */
  display: flex; /* [5] */
  justify-content: center; /* [5] */
}

間距

著 Chrome 和 Firefox 支持flex gap屬性，現在在flex項目之間添加間距比以往任何時候都容易。考慮以下標題

要做到上圖的高亮間距，只需將gap: 1rem添加到flex父節點。沒有了gap，我們還是需要用舊的方式來間隔 ?。

/* 老的方式 */
.brand {
  margin-right: 1rem;
}

.sign-in {
  margin-right: 1rem;
}

/* 新的方式 */
.site-header {
  /* Other flexbox styles */
  gap: 1rem;
}

作者：Shadeed 譯者：前端小智 來源：ishadeed

原文：https://ishadeed.com/article/website-headers-flexbox/

認效果：

展開效果：

廢話不多說，直接上代碼：