web/docs/guide/style/html.md

尽量遵循HTML标准和语义，但是不应该以浪费实用性作为代价；

任何时候都要用尽量小的复杂度和尽量少的标签来解决问题。

减少标签层级

在HTML中，标签层级越深，页面的可读性就越差。因此，在编写HTML代码时，应该尽量减少标签层级，使页面结构更清晰。

<!-- Not so great -->
<span class="avatar"> // [!code error]
  <img src="...">     // [!code error]
</span>               // [!code error]

<!-- Better -->
<img class="avatar" src="..."> // [!code focus]

语义化标签

语义化标签是指在HTML中，标签的作用与内容之间建立了语义关系。语义化标签可以让浏览器更好地理解网页内容，从而提高用户体验。

<!-- bad -->
<div id="main">
  <div class="article">
    <div class="header">
      <h1>Blog post</h1>
      <p>Published: <span>21st Feb, 2015</span></p>
    </div>
    <p>…</p>
  </div>
</div>

<!-- good -->
<main>
  <article>
    <header>
      <h1>Blog post</h1>
      <p>Published: <time datetime="2015-02-21">21st Feb, 2015</time></p>
    </header>
    <p>…</p>
  </article>
</main>

自闭合标签无需闭合

在HTML中，自闭合标签是指在标签内部同时包含了开标签和闭标签的元素，而不需要额外的闭标签。以下是一些常见的自闭合标签：

<img>
<br>
<hr>
<input>
<meta>
<link>
...

这些标签在HTML中不需要闭合标签，因为它们没有内容或内容已经在标签内部完全指定。

属性

在属性上，使用双引号，不要使用单引号。

布尔（boolean）型属性

布尔型属性可以在声明时不赋值。

checked, selected, disabled, readonly ...

<input type="text" disabled>

<input type="checkbox" value="1" checked>

<select>
  <option value="1" selected>1</option>
</select>

属性顺序

HTML 属性应当按照以下给出的顺序依次排列，确保代码的易读性。

• class
• id, name
• data-*
• src, for, type, href, value , max-length, max, min, pattern
• placeholder, title, alt
• aria-*, role
• required, readonly, disabled

class是为高可复用组件设计的，所以应处在第一位；

id更加具体且应该尽量少使用，所以将它放在第二位。

<a class="..." id="..." data-toggle="modal" href="#">
  Example link
</a>

<input class="form-control" type="text">

<img src="..." alt="...">