在開發 Web 應用時，項目往往從簡單開始，但隨著需求的增長，文檔結構會變得復雜起來。

標簽雖然靈活，但濫用會導致代碼雜亂、難以維護。原因在于 `

` 是純粹的容器，沒有任何語義意義。

幸好，HTML 提供了語義化標簽這一優雅的解決方案。

根據 W3Schools 的定義：語義化元素是帶有明確意義的 HTML 元素。它們不僅能讓瀏覽器理解，還能清晰地傳達意圖給開發者和用戶。

為什么要使用語義化標簽？

• 提升可訪問性：語義化標簽幫助輔助技術（如屏幕閱讀器）更好地導航內容。
• 增強 SEO：搜索引擎能更準確地理解內容結構，提高頁面排名。
• 易維護性和可讀性：清晰的代碼結構更易閱讀和協作。
• 減少代碼冗余：更少的額外類名或屬性，代碼更簡潔。

總之，除非別無選擇，盡量少用 <div>。

下面是 7 個可以替代 <div> 的語義化標簽及其應用場景。

1. <section>：組織相關內容

<section> 用于將相關內容分組，就像書中的章節，每個部分圍繞特定主題。

示例：

<section>
  <h2>我們的服務</h2>
  <p>我們提供網站開發、設計和營銷等多種服務，助您取得成功。</p>
</section>

2. <article>：獨立的內容單元

<article> 適合表示獨立的內容單元，例如文章、博客或新聞條目。

示例：

<article>
  <h3>早晨鍛煉的好處</h3>
  <p>晨練可以提升能量，改善心情，是開啟一天的絕佳方式。</p>
</article>

3. <nav>：導航鏈接

<nav> 用于定義導航區域，就像網站的目錄或地圖，指引用戶瀏覽站點。

示例：

<nav>
  <ul>
    <li><a href="#home">首頁</a></li>
    <li><a href="#about">關于我們</a></li>
    <li><a href="#services">服務</a></li>
    <li><a href="#contact">聯系我們</a></li>
  </ul>
</nav>

4. <header>：頭部內容

<header> 用于頁面或部分內容的頭部區域，通常包括標題和導航。

示例：

<header>
  <h1>我的個人博客</h1>
  <p>分享世界各地的故事與見解。</p>
</header>

5. <footer>：底部內容

<footer> 用于表示頁面或部分內容的底部，通常包括版權聲明、聯系信息等。

示例：

<footer>
  <p>? 2024 我的個人博客。保留所有權利。</p>
  <a href="#privacy-policy">隱私政策</a>
</footer>

6. <main>：主要內容區域

<main> 用于包含網頁的主要內容，不包括頭部、底部或側邊欄。

示例：

<main>
  <h2>歡迎訪問我們的網站</h2>
  <p>我們為您提供量身定制的解決方案。</p>
</main>

7. <aside>：補充內容

<aside> 用于表示與主內容間接相關的信息，例如側邊欄或附加說明。

示例：

<aside>
  <h4>相關文章</h4>
  <ul>
    <li><a href="#article1">改善睡眠的 10 個小技巧</a></li>
    <li><a href="#article2">經濟實惠的健康飲食指南</a></li>
  </ul>
</aside>

可視化：語義化標簽的頁面結構

使用語義化標簽構建頁面時，頁面結構會更加清晰。例如：

<header>...</header>
<nav>...</nav>
<main>
  <section>...</section>
  <article>...</article>
  <aside>...</aside>
</main>
<footer>...</footer>

這樣不僅方便開發人員理解頁面布局，還能讓搜索引擎和輔助設備更好地解析內容。

結論

濫用 <div> 會導致代碼冗雜且不易維護。通過使用 <section>、<article>、<nav>、<header>、<footer>、<main> 和 <aside> 等語義化標簽，你可以創建更清晰、更具可讀性和更高效的網頁結構。