HTML编码规则

目的：改善协作编码、代码质量。

忽略协议

忽略资源（图片及其他多媒体、样式表、脚本）URL的协议部分（http:, https:），变绝对URL为相对URL，好处：

解耦资源依赖协议类型
文件变小

<!-- 不推荐 -->
<script src="http://www.url.com/js/resource.js"></script>
<!-- 推荐 -->
<script src="//www.url.com/js/resource.js"></script>
<!-- 不推荐 -->
<link rel="stylesheet" href="https://www.google.com/css/maia.css">
<!-- 推荐 -->
<link rel="stylesheet" href="//www.google.com/css/maia.css">
<!-- 不推荐 -->
<img alt="description" href="http://www.google.com/images/icon.png">
<!-- 推荐 -->
<img alt="description" href="//www.google.com/images/icon.png">

缩进

使用2个空格，不使用tab

<ul>
  <li>Fantastic<li>
  <li>Great<li>
</ul>

大小写

全部使用小写，适用于HTML元素名、属性名、属性值；

<!-- 不推荐 -->
<A HREF="/">Home</A>
<!-- 推荐 -->
<img src="google.png" alt="Google">

尾随空格

删除尾随空格，因为是不需要的，而且会在做diff的时候，使diff结果复杂化。

<!-- 不推荐 -->
<p>What?_
<!-- 推荐 -->
<p>Yes please.

编码

文件字符编码采用UTF-8(no BOM)
HTML字符集编码语义指定<meta charset="utf-8">

文档类型

使用HTML5文档类型：<!DOCTYPE html>

使用HTML(MIME内容类型text/html)，不要使用XHTML(MIME内容类型application/xhtml+xml).

<!-- 不推荐 -->
<br />
<!-- 推荐 -->
<br>

HTML合法性

使用合法的HTML标签，不使用将废弃的HTML标签，比如：不要使用在HTML5中不支持的<font>标签，而使用CSS来替代。

HTML合法性测试工具：W3C HTML validator

标签语义

根据语义来使用标签，利于可访问性、复用性、高效性，比如：布局用div，不要用table；文章段落用p，不要用div等等。

<!-- 不推荐 -->
<div onclick="goToRecommendations();">All recommendations</div>
<!-- 推荐 -->
<a href="recommendations/">All recommendations</a>

多媒体描述内容

给多媒体添加多媒体描述内容，利于SEO、错误冗余、可访问性。

image 提供alt属性内容
video和audio 提供描述性元素
canvas

<!-- 不推荐 -->
<img src="spreadsheet.png">
<!-- 推荐 -->
<img src="spreadsheet.png" alt="Spreadsheet screenshot.">

关注点分离

保持结构（HTML标记）、外观（CSS样式）、行为（脚本）严格分离，并最小化三者的相互作用。利于维护、扩展。

结构代码：全部写到HTML文件中
外观代码：全部写到CSS文件中
行为代码：全部写到JS文件中

实体引用（HTML转义字符）

普通字符不要使用实体引用，HTML保留字符（如：<、>、&）、不可视字符（如：空格）使用实体引用。

可选标签

省略可选的标签？可以减小文件尺寸、增加代码可读性。

HTML5 specification定义了哪些标签是可以被省略的。

基于一致性和简单的原则，最好是省略所有的可选标签，而不只是一两个。

<!-- 不推荐 -->
<!DOCTYPE html>
<html>
  <head>
    <title>Spending money, spending bytes</title>
  </head>
  <body>
    <p>Sic.</p>
  </body>
</html>
<!-- 推荐 -->
<!DOCTYPE html>
<title>Saving money, saving bytes</title>
<p>Qed.

引用资源内容类型（type属性）

不要使用CSS、JS资源引用type属性，因为HTML5默认使用text/css和text/javascript，且对老浏览器友好。

<!-- 不推荐 -->
<link rel="stylesheet" href="//www.google.com/css/maia.css" type="text/css">
<!-- 推荐 -->
<link rel="stylesheet" href="//www.google.com/css/maia.css">
<!-- 不推荐 -->
<script src="//www.google.com/js/gweb/analytics/autotrack.js" type="text/javascript"></script>
<!-- 推荐 -->
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>

通用格式

块元素独占一行，块元素下的子元素新起一行，且缩进2空格。

<blockquote>
  <p><em>Space</em>, the final frontier.</p>
</blockquote>
<ul>
  <li>Moe
  <li>Larry
  <li>Curly
</ul>
<table>
  <thead>
    <tr>
      <th scope="col">Income
      <th scope="col">Taxes
  <tbody>
    <tr>
      <td>$ 5.00
      <td>$ 4.50
</table>

HTML引号

使用双引号，而非单引号。

<!-- 不推荐 -->
<a class='maia-button maia-button-secondary'>Sign in</a>
<!-- 推荐 -->
<a class="maia-button maia-button-secondary">Sign in</a>

参考引用

随机推荐

HTML编码规则
HTML编码规则目的：改善协作编码、代码质量。忽略协议忽略资源（图片及其他多媒体、样式表、脚本）URL的协议部分（http:, https:），变绝对URL为相对URL，好处：解耦资源依赖协

技术文档网

HTML编码规则