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

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

## 减少标签层级
在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中，标签的作用与内容之间建立了语义关系。语义化标签可以让浏览器更好地理解网页内容，从而提高用户体验。

```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中，自闭合标签是指在标签内部同时包含了开标签和闭标签的元素，而不需要额外的闭标签。以下是一些常见的自闭合标签：

```html
<img>
<br>
<hr>
<input>
<meta>
<link>
...
```
这些标签在HTML中不需要闭合标签，因为它们没有内容或内容已经在标签内部完全指定。

## 属性

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

## 布尔（boolean）型属性
布尔型属性可以在声明时不赋值。

`checked`, `selected`, `disabled`, `readonly` ...

```html
<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更加具体且应该尽量少使用，所以将它放在第二位。

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

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

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