HTML編碼標準和約定

規範HTML代碼需遵循四個要點：1.優先使用語義化標籤如

寫HTML代碼看起來簡單，但要寫得規範、清晰、可維護，其實並不容易。很多人一開始只是追求功能實現，但隨著項目變大，代碼風格不統一、結構混亂的問題就會逐漸暴露出來。好的HTML編碼規範不僅能提升代碼可讀性，還能減少協作中的溝通成本。

1. 使用語義化標籤

HTML5 提供了很多語義化標籤，比如<header></header> 、 <nav></nav> 、 <main></main> 、 <section></section> 、 <article></article>等。這些標籤不僅讓結構更清晰，也對SEO和無障礙訪問有幫助。

建議：

• 避免濫用<div>和<code><span></span> ，優先使用語義標籤。
• 比如導航欄用<nav></nav> ，頁腳用<footer></footer> ，而不是一堆<div class="nav"> 。<li>語義標籤有助於屏幕閱讀器理解頁面結構，對無障礙訪問很重要。</li> <hr> <h3 id="保持縮進和格式統一"> 2. 保持縮進和格式統一</h3> <p>雖然瀏覽器不關心代碼格式，但人得看懂。縮進不統一、標籤不閉合、屬性順序混亂，都會影響閱讀和維護效率。</p> <p><strong>建議：</strong> </p> <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175338272678406.jpeg" class="lazy" alt="HTML Coding Standards and Conventions"><ul> <li>使用兩個或四個空格縮進，團隊統一即可，不建議用Tab。</li> <li>每個標籤單獨一行，嵌套一層縮進一級。</li> <li>屬性值統一使用雙引號，不要混用單引號或無引號。</li> <li>標籤閉合要規範，尤其是像<code><img src="/static/imghw/default1.png" data-src="..." class="lazy" alt="HTML編碼標準和約定" > 、 <br>這類自閉合標籤也要寫成<img src="/static/imghw/default1.png" data-src="..." class="lazy" alt="HTML編碼標準和約定" > （雖然HTML5允許不寫斜杠，但統一寫法更清晰）。

舉個例子：

 <div class="container">
  <header class="site-header">
    <h1>Welcome to My Site</h1>
  </header>
  <main>
    <p>This is a paragraph.</p>
  </main>
</div>

3. 類名命名要有意義，風格統一

類名是HTML和CSS交互的關鍵，命名不規範會帶來維護困難，尤其是多人協作時。

建議：

• 使用語義清晰的命名方式，比如nav-bar 、 post-list 、 user-profile 。
• 統一命名風格，比如BEM（Block Element Modifier）或SMACSS，選一種團隊統一使用。
• 避免使用抽象的命名如box 、 wrap ，除非上下文非常明確。
• 類名統一小寫，單詞之間用短橫線連接（kebab-case）。

比如：

 <div class="user-card">
  <img  class="user-card__avatar lazy"  src="/static/imghw/default1.png"  data-src="avatar.jpg"  / alt="HTML編碼標準和約定" >
  <div class="user-card__info">
    <h3 class="user-card__name">John Doe</h3>
  </div>
</div>

4. 註釋和模塊化結構

寫註釋不是浪費時間，尤其是一些複雜結構或特殊用途的代碼塊，加上註釋可以節省很多回頭解釋的時間。

建議：

• 對複雜模塊加註釋說明，比如：

   <!-- Main navigation bar -->
  <nav class="nav-bar">...</nav>

• 長頁面可以按模塊劃分註釋，方便快速定位。
• 保持模塊結構清晰，比如頭部、主內容區、側邊欄、頁腳各自獨立成塊。

---

基本上就這些。 HTML規範看起來不復雜，但堅持統一寫法、注意細節，才能真正提升代碼質量。很多問題不是不會寫，而是容易忽略這些“小地方”。