停止過度使用 Div！語意 HTML 最佳實務實用指南

本指南探討了使用語意 HTML 元素相對於 div 的優勢。讓我們來看一些實際例子。

為什麼選擇語意標籤而不是 div？ 好處是顯著的：

1. 提高可讀性：結構良好的語意 HTML 更容易閱讀和理解。
2. 增強的搜尋引擎優化：搜尋引擎可以輕鬆索引語義正確的內容，從而提高您的搜尋排名。
3. 更好的可訪問性：螢幕閱讀器和輔助技術可以有效地對您的網站進行分類和索引。
4. 整體更好的實踐：這只是 Web 開發的最佳實踐。

範例：典型的語意 HTML 結構

這是一個展示語意元素的常見 HTML 樣板：

<code class="language-html"><header>
  <img alt="停止過度使用 Div！語意 HTML 最佳實務實用指南" src="logo.png">
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
    </ul>
  </nav>
</header>
<main>
  <h2>About Us</h2>
  <p>Lorem ipsum...</p>
  <h2>How It Works</h2>
  <p>Lorem ipsum...</p>
  <aside>Sidebar content...</aside>
</main>
<footer>
  <p>Terms & Conditions</p>
</footer></code>

說明：

• <header></header>：包含標誌和主導航。
• <nav></nav>：包含主要導航連結。
• <main></main>：包含頁面的主要內容。
• <h2></h2> 和 <p></p>：邏輯地建構主要內容。
• <aside></aside>：代表次要內容，例如側邊欄。
• <footer></footer>：包括不太重要的訊息，例如條款和條件。

MDN Web 文件範例

觀察MDN的JavaScript引導頁的結構：

<code class="language-html"><main>
  <h1>JavaScript Guide</h1>
  <p>Learn JavaScript...</p>
  <nav>
    <ul>
      <li><a href="#toc">Table of Contents</a></li>
    </ul>
  </nav>
</main></code>

重點：

• <main></main>元素明確定義了核心內容。 它是獨立的且可重複使用。
• 導航適當地放置在 <main></main> 部分中，因為它對於指南的可用性至關重要。

何時使用 div

僅在沒有語意元素準確反映內容意義時才使用 div 進行樣式或版面。

<code class="language-html"><div>
  <p>Why a div here?  The info-bar groups unrelated elements (breadcrumbs and a button) purely for layout; they lack a shared semantic purpose.</p>
  <h2>Summary</h2>
  <p>Use semantic tags when:</p>
  <ul>
    <li>Content is related (<article>).</article>
</li>
    <li>It's self-contained (<article>).</article>
</li>
    <li>It's critical navigation (<nav>).</nav>
</li>
    <li>It's secondary content (<aside>).</aside>
</li>
  </ul>
  <p>Use divs when:  You need a container solely for styling.</p>
  <p>If you found this helpful, please like and follow! Thanks for reading!</p>
  <p>Connect with me on:</p>
  <p><strong>LinkedIn</strong> | <strong>Medium</strong> | <strong>Bluesky</strong></p>
</div></code>

以上是停止過度使用 Div！語意 HTML 最佳實務實用指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！