HTML
DOCTYPE 头部开始
Bad:
Good:
不要用旧的 DOCTYPE
Bad:
Good:
不要用
Bad:
登录后复制
Good:
最好不要用字符引用
Bad:
Copyright © 2014 W3C
Good:
Copyright © 2014 W3C
###Escape &, , ", and ' 可以用字符引用
Bad:
The "&" character
Good:
The "&" character
Use named character references for control or invisible characters
Bad:
This book can read in 1 hour.
Good:
This book can read in 1 hour.
注释的内容两边留个空格
Bad:
Good:
不要忽略闭合标签
Bad:
不要搞混空元素的格式
Bad:
Good:
在标签里面和属性值里不要留空格
Bad:
HTML Best Practices
Good:
HTML Best Practices
不要搞混大小写
Bad:
Good:
General
不要混用引号标记
Bad:
Good:
Don't separate attributes with two or more white spaces
属性之间不要用两个空格隔开
Bad:
Good:
省略布尔属性的值
Bad:
Good:
省略命名空间
Bad:
Good:
不要用
Bad:
Good:
...不要搞混 data-*,Microdata，RDFa Lite 属性和通用的属性
Bad:
Good:
更强的原生语义
Bad:
Good:
根元素
添加语言属性
Bad:
Good:
忘了 hgroup 元素吧
Bad:
Good:
HTML Best Practices
For writing maintainable and scalable HTML documents.
仅仅当在联系信息的时候用 address 元素
Bad:
Good:
pre 元素不要在新的一行开始写
Bad:
<!DOCTYPE html>登录后复制
Good:
<!DOCTYPE html>登录后复制
在引号元素里面使用 appropriate 元素
Bad:
Good:
不要直接包含属性在 blockquote 元素里
Bad:
Good:
— HTML Best Practices
Also good (recommended by WHATWG):
Also good too (recommended by W3C):
每行只写一个列表项目
Bad:
- General
- The root Element
- Sections ...
Good:
- General
- The root Element
- Sections ...
给 ol 元素用上 type 属性
Bad:
Good:
把 figcaption 元素放在 figure 元素里的开头或结尾
Bad:
Good:
使用 main 元素
Bad:
...
Good:
尽量的避免使用 div 标签
Bad:
...
Good:
Text-level semantics
不要把相同的链接分开来，可以用一个来包围
Bad:
Good:
用下载属性下载一个资源
Bad:
offline version
Good:
offline version
如果需要的话就使用 rel,hreflang 等类型属性
Bad:
Japanese PDF version
Good:
Japanese PDF version
清理链接的文本
Bad:
Click here to view PDF version.
Good:
PDF version is also available.
不要使用 em 元素来警告着重
Bad:
Caution!
Good:
Caution!
尽量避免使用 s,i,b,u 这些元素
Bad:
Good:
不要在 q 元素里添加引号
Bad:
“For writing maintainable and scalable HTML documents”
Good:
For writing maintainable and scalable HTML documents
Also good:
“For writing maintainable and scalable HTML documents”
给 abbr 元素添加 title 属性
Bad:
Good:
ruby 标记元素要长一点
Bad:
Good:
给 non-machine-readable 元素添加 datetime 属性
Bad:
Good:
Specify code language with class attribute prefixed with language-
Bad:
<DOCTYPE html>Good:
<DOCTYPE html>让 kbd 元素尽可能的简单
Bad:
+
Good:
尽可能的避免 span 元素
Bad:
HTML Best PracticesGood:
HTML Best Practices
br 元素后面要换行
Bad:
HTML
Best
Practices
Good:
HTML
Best
Practices
不要滥用 br 元素标签
Bad:
Good:
不要在 del 和 ins 元素里插入其他标签元素
Bad:
For writing maintainable and scalable HTML documents.
Good:
For writing maintainable and scalable HTML documents.
嵌入内容
如果需要就给 img 元素添加 alt 属性值
Bad:
Good:
如果可以就把 Alt 的值空着
Bad:
Good:
如果有可能就省略 alt 标签
Bad:
Good:
清空 iframe 元素
Bad:
Good:
map 元素内容
Bad:
Good:
提供音频或视频元素后备内容
Bad:
Good:
表格数据
每行写一个 td
Bad:
General The root Element Sections
Good:
General The root Element Sections
给表格使用表头 header
Bad:
pre | No | Neither tag is omissible |
img | Yes | No end tag |
Good:
pre | No | Neither tag is omissible |
|---|---|---|
img | Yes | No end tag |
表单
用 label 元素包裹表单
Bad:
Query:
Good:
尽可能的省略属性
Bad:
Good:
使用合适的类型属性的input元素
Bad:
Good:
当输入框是提交属性时要添加 value 值
Bad:
Good:
当 input 元素有验证属性时，给他添加标题属性
Bad:
Good:
不要使用占位符属性标签
Bad:
Good:
每个 option 元素一行
Bad:
Good:
给进度条 元素添加最大的属性值
Bad:
Good:
给计数元素添加最小和最大值
Bad:
Good:
把 legend 元素作为 fieldest 元素的第一个元素
Bad:
Good:
Scripting
省略 js 的类型属性
Bad:
Good:
如果 script 元素有异步属性，需要给 script 标签添加异不属性
Bad:
Good:
不要注释 script 标签里的元素
Bad:
Also bad:
Good:
不要动态插入 script 元素标签
Bad:
Good:
缩进始终保持一致
Bad:
Good: