前端路线图

夜间模式

导航

HTML最佳实践 ​

HTML 最佳实践
编写易于维护与扩展的 HTML 文档。

以下为节选内容。

全局 ​

以 DOCTYPE 为开头 ​

激活标准模式需要 DOCTYPE。

Bad:

html
<html>
 ...
</html>

Good:

html
<!DOCTYPE html>
<html>
 ...
</html>

不要使用 XML 作为声明 ​

你确定想写 XHTML?

Bad:

html
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<!DOCTYPE html>

Good:

html
<!DOCTYPE html>

不要什么字符都转义 ​

如果你使用 UTF-8 编写 HTML 文档，那么几乎所有字符（包括表情）都可以直接写。

Bad:

html
<p><small>Copyright &copy; 2014 W3C<sup>&reg;</sup></small></p>

Good:

html
<p><small>Copyright © 2014 W3C<sup>®</sup></small></p>

使用字符实体引用来转义 &、<、>、" 和 ' ​

为了 HTML 文档不出错，这些字符应当始终被转义。

Bad:

html
<h1>The "&" character</h1>

Good:

html
<h1>The &quot;&amp;&quot; character</h1>

使用字符值引用来转义控制或隐藏字符 ​

这些字符很容易被误认为是其它字符，而且规范也不保证这些字符具有人类可读的名称。

Bad:

html
<p>This book can read in 1 hour.</p>

Good:

html
<p>This book can read in 1&#xA0;hour.</p>

在注释内容周围添加空格 ​

某些字符不能紧接在注释开始或结束的位置上。

Bad:

html
<!--This section is non-normative-->

Good:

html
<!-- This section is non-normative -->

一致性 ​

一致性是可读性的关键。

  • 不要杂糅空元素的格式
  • 不要在标签和属性值周围添加空格
  • 不要杂糅大小写
  • 不要杂糅单双引号
  • 不要用多个空格间隔属性

省略布尔型属性值 ​

这么写更简单，对吧？

Bad:

html
<audio autoplay="autoplay" src="/audio/theme.mp3">

Good:

html
<audio autoplay src="/audio/theme.mp3">

省略命名空间 ​

SVG 和 MathML 可以直接在 HTML 文档中使用。

Bad:

html
<svg xmlns="http://www.w3.org/2000/svg">
 ...
</svg>

Good:

html
<svg>
...
</svg>

首选默认隐式 ARIA 语义 ​

有些元素在 HTML 文档中隐含了某种 ARIA 语义，不要特意把它们指出来。

Bad:

html
<nav role="navigation">
 ...
</nav>

<hr role="separator">

Good:

html
<nav>
 ...
</nav>

<hr>

根元素 ​

添加 lang 属性 ​

lang 属性有助于翻译 HTML 文档。

Bad:

html
<html>

Good:

html
<html lang="en-US">

保持 lang 属性值尽可能简短 ​

日语只在日本使用，所以国家代码不是必须的。

Bad:

html
<html lang="ja-JP">

Good:

html
<html lang="ja">

文档元数据 ​

指定次要链接资源的 MIME 类型 ​

这提示了应用要怎么处理这项资源。

Bad:

html
<link href="/pdf" rel="alternate">
<link href="/feed" rel="alternate">
<link href="/css/screen.css" rel="stylesheet">

Good:

html
<link href="/pdf" rel="alternate" type="application/pdf">
<link href="/feed" rel="alternate" type="application/rss+xml">
<link href="/css/screen.css" rel="stylesheet">

别链接到 favicon.ico ​

几乎所有浏览器都会自动异步获取 /favicon.ico。

添加 apple-touch-icon ​

Good:

html
<link href="/apple-touch-icon.png" rel="apple-touch-icon">

指定文档字符编码格式 ​

UTF-8 暂时还不是所有浏览器的默认值。

Bad:

html
<head>
  <title>HTML Best Practices</title>
</head>

Good:

html
<head>
  <meta charset="UTF-8">
  <title>HTML Best Practices</title>
</head>

不要使用过时的字符编码格式 ​

HTTP 报文头部应该由服务器指定，简单点。

Bad:

html
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

Good:

html
<meta charset="UTF-8">

一开始就指定字符编码 ​

规范要求字符编码必须在文档的前 1024 字节中被指定。

Bad:

html
<head>
  <meta content="width=device-width" name="viewport">
  <meta charset="UTF-8">
  ...
</head>

Good:

html
<head>
  <meta charset="UTF-8">
  <meta content="width=device-width" name="viewport">
  ...
</head>

省略 CSS 的 type 属性 ​

在 HTML 中，style 元素的默认 type 属性值就是 text/css。

Bad:

html
<style type="text/css">
  ...
</style>

Good:

html
<style>
  ...
</style>

区块 ​

添加 body 元素 ​

有时浏览器会在预料之外的地方补充 body 元素。

Bad:

html
<html>
  <head>
    ...
  </head>
  ...
</html>

Good:

html
<html>
  <head>
    ...
  </head>
  <body>
    ...
  </body>
</html>

分组内容 ​

在 blockquote 元素中使用恰当的元素 ​

blockquote 元素的内容是引用，而不仅仅是一堆字符。

Bad:

html
<blockquote>For writing maintainable and scalable HTML documents.</blockquote>

Good:

html
<blockquote>
  <p>For writing maintainable and scalable HTML documents.</p>
</blockquote>

使用 ol 元素的 type 属性 ​

有时标记会被附近的内容引用。如果使用 type 属性更改标记，就可以安全地引用。

Bad:

html
<head>
  <style>
    .toc {
      list-style-type: upper-roman;
    }
  </style>
</head>
<body>
  <ol class="toc">
    <li>General</li>
    <li>The root Element</li>
    <li>Sections</li>
    ...
  </ol>
</body>

Good:

html
<body>
  <ol type="I">
    <li>General</li>
    <li>The root Element</li>
    <li>Sections</li>
    ...
  </ol>
</body>

尽可能避免 div 元素 ​

实在没办法了，才用 div 元素。

Bad:

html
<div class="chapter">
  ...
</div>

Good:

html
<section>
  ...
</section>

文本语义 ​

不要把一个链接拆成两半 ​

a 元素可以包裹几乎所有元素（除了表单控制等交互性元素和 a 元素自身）。

Bad:

html
<h1><a href="https://whatwg.org/">WHATWG</a></h1>

<p><a href="https://whatwg.org/">A community maintaining and evolving HTML since 2004.</a></p>

Good:

html
<a href="https://whatwg.org/">
  <h1>WHATWG</h1>

  <p>A community maintaining and evolving HTML since 2004.</p>
</a>

按需使用 rel、hreflang 和 type 属性 ​

它们有助于提示应用怎么处理链接到的资源。

Bad:

html
<a href="/ja/pdf">Japanese PDF version</a>

Good:

html
<a href="/ja/pdf" hreflang="ja" rel="alternate" type="application/pdf">Japanese PDF version</a>

明确的链接文本 ​

链接文本应该是对应资源的名称。

Bad:

html
<p><a href="/pdf" rel="alternate" type="application/pdf">Click here</a> to view PDF version.</p>

Good:

html
<p><a href="/pdf" rel="alternate" type="application/pdf">PDF version</a> is also available.</p>

尽可能避免 s、i、b 和 u 元素 ​

这些元素的语义太难解读。

不要在 q 元素外使用引号 ​

浏览器会自动加上引号。

Bad:

html
<q>“For writing maintainable and scalable HTML documents”</q>

Good:

html
<q>For writing maintainable and scalable HTML documents</q>

Also good:

html
“For writing maintainable and scalable HTML documents”

给 abbr 元素添加 title 属性 ​

这是显示全称的唯一方式。

Bad:

html
<abbr>HBP</abbr>

Good:

html
<abbr title="HTML Best Practices">HBP</abbr>

给电脑无法识别的 time 元素添加 datetime 属性 ​

当 datetime 属性不存在，time 元素内容的格式会受限制。

Bad:

html
<time>Dec 19, 2014</time>

Good:

html
<time datetime="2014-12-19">Dec 19, 2014</time>

使用 language- 前缀的 class 属性指定代码语言 ​

没有统一的实现方式，但规范中有提及。

Bad:

html
<code>&lt;!DOCTYPE html&gt;</code>

Good:

html
<code class="language-html">&lt;!DOCTYPE html&gt;</code>

在 br 元素后换行 ​

使用 br 元素后应当换行。

Bad:

html
<p>HTML<br>Best<br>Practices</p>

Good:

html
<p>HTML<br>
Best<br>
Practices</p>

不要只为了格式好看就用 br 元素 ​

br 元素不是用来给所有元素换行的，是用来在文本内容中换行的。

内嵌内容 ​

按需为 img 元素添加 alt 属性 ​

alt 属性对那些无法处理图片或禁用了图片加载的人很有帮助。

Bad:

html
<img src="/img/logo.png">

Good:

html
<img alt="HTML Best Practices" src="/img/logo.png">

若有可能则省略 alt 属性 ​

有时你不一定知道 alt 要写什么。

留空 iframe 内容 ​

iframe 的内容是受限的，留空比较安全。

Bad:

html
<iframe src="/ads/default.html">
  <p>If your browser support inline frame, ads are displayed here.</p>
</iframe>

Good:

html
<iframe src="/ads/default.html"></iframe>

为 audio 和 video 元素提供备用内容 ​

HTML 新引进的元素需要备用内容，以防旧版浏览器不支持。

Bad:

html
<video>
  <source src="/mov/theme.mp4" type="video/mp4">
  <source src="/mov/theme.ogv" type="video/ogg">
  ...
</video>

Good:

html
<video>
  <source src="/mov/theme.mp4" type="video/mp4">
  <source src="/mov/theme.ogv" type="video/ogg">
  ...
  <iframe src="//www.youtube.com/embed/..." allowfullscreen></iframe>
</video>

表单 ​

使用 label 元素包裹表单控制元素 ​

label 元素有助于表单元素的聚焦。

Bad:

html
<p>Query: <input name="q" type="text"></p>

Good:

html
<p><label>Query: <input name="q" type="text"></label></p>

若有可能则省略 for 属性 ​

label 元素可以包含表单元素。

Bad:

html
<label for="q">Query: </label><input id="q" name="q" type="text">

Good:

html
<label>Query: <input name="q" type="text"></label>

为 input 元素选择合适的 type 属性 ​

使用 type 属性后，浏览器会赋予 input 元素一些新功能。

Good:

html
<label>Search keyword: <input name="q" type="search"></label>

给有 pattern 属性的 input 元素添加 title 属性 ​

如果输入文本与 pattern 属性不匹配，title 属性的值就会被显示为提示。

Bad:

html
<input name="security-code" pattern="[0-9]{3}" type="text">

Good:

html
<input name="security-code" pattern="[0-9]{3}" title="A security code is a number in three figures." type="text">

为 progress 元素添加 max 属性 ​

有了 max 属性，value 属性就易于编写。

Bad:

html
<progress value="0.5"> 50%</progress>

Good:

html
<progress max="100" value="50"> 50%</progress>

为 meter 元素添加 min 和 max 属性 ​

有了 min 和 max 属性，value 属性就易于编写。

Bad:

html
<meter value="0.5"> 512GB used (1024GB total)</meter>

Good:

html
<meter min="0" max="1024" value="512"> 512GB used (1024GB total)</meter>

脚本 ​

省略 JavaScript 的 type 属性 ​

在 HTML 中，script 元素的默认 type 属性值就是 text/javascript。

不要使用注入脚本的 script 元素 ​

async 属性既简单又高效。

Bad:

html
<script>
  var script = document.createElement("script");
  script.async = true;
  script.src = "//example.com/widget.js";
  document.getElementsByTagName("head")[0].appendChild(script);
</script>

Good:

html
<script async defer src="https://example.com/widget.js"></script>

其它 ​

使用相对路径引用内部链接 ​

无网络链接时，相对链接在本机有更好的表现。

Bad:

html
<link rel="apple-touch-icon" href="http://you.example.com/apple-touch-icon-precomposed.png">
...
<p>You can find more at <a href="//you.example.com/contact.html">contact page</a>.</p>

Good:

html
<link rel="apple-touch-icon" href="/apple-touch-icon-precomposed.png">
...
<p>You can find more at <a href="/contact.html">contact page</a>.</p>