html如何設置標題

# HTML如何設置標題

在網頁開發中，標題（Heading）是結構化內容的核心元素之一。HTML提供了6級標題標簽（`<h1>`到`<h6>`），用于定義文檔的層級關系。本文將詳細介紹標題的設置方法、最佳實踐以及常見問題。

## 一、基礎標題標簽

HTML標題通過`<h1>`至`<h6>`標簽實現，數字越小表示級別越高：

```html
<h1>這是主標題（通常用于頁面主題）</h1>
<h2>二級標題（章節標題）</h2>
<h3>三級標題（子章節）</h3>
<!-- 以此類推 -->

重要特性：

1. 默認樣式：瀏覽器會自動為標題添加粗體和大小樣式（h1最大，h6最?。?/li>
2. 塊級元素：標題會獨占一行并產生上下邊距
3. 語義化：幫助屏幕閱讀器和搜索引擎理解內容結構

二、標題使用規范

1. 層級關系

應遵循嚴格的嵌套規則：

<h1>網頁主題</h1>
  <h2>第一章</h2>
    <h3>第一節</h3>
    <h3>第二節</h3>
  <h2>第二章</h2>

2. SEO優化建議

• 每個頁面建議只有一個<h1>
• 避免跳過標題級別（如h1直接接h3）
• 關鍵詞優先出現在高級標題中

三、樣式自定義

通過CSS可以覆蓋默認樣式：

h1 {
  color: #333;
  font-size: 2.5rem;
  margin-bottom: 20px;
  font-family: 'Arial', sans-serif;
}

四、特殊場景處理

1. 副標題實現

<h1>主標題 <small>副標題</small></h1>

或使用CSS：

.subtitle {
  font-size: 60%;
  color: #666;
}

2. 響應式標題

@media (max-width: 768px) {
  h1 { font-size: 1.8rem; }
}

五、常見錯誤

1. 濫用標題：僅用于裝飾文本
2. 過度嵌套：超過6級標題
3. 空洞標題：無實質內容的標題標簽
4. 隱藏標題：通過CSS隱藏但保留DOM節點（影響SEO）

六、擴展知識

ARIA角色增強

<h1 aria-label="產品介紹">...</h1>

與section標簽配合

<section>
  <h2>服務條款</h2>
  <p>內容...</p>
</section>

通過合理使用標題標簽，不僅可以提升網頁可訪問性，還能優化搜索引擎排名。建議結合HTML5語義化標簽（article/section等）構建更清晰的文檔結構。 “`

注：本文約650字，包含基礎用法、規范建議和實用技巧，采用Markdown格式編寫，可直接用于技術文檔或博客發布。