HTML 最佳实践

4,165 阅读5分钟
原文链接: github.com

DOCTYPE 头部开始

Bad:


  ...

Good:



  ...

不要用旧的 DOCTYPE

Bad:


Good:


不要用 XML 声明

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:


  
    ...

Good:


  
    ...
  

不要搞混空元素的格式

Bad:

HTML Best Practices

Good:

HTML Best Practices

在标签里面和属性值里不要留空格

Bad:

HTML Best Practices

Good:

HTML Best Practices

不要搞混大小写

Bad:

General

Good:

General

不要混用引号标记

Bad:

HTML Best Practices

Good:

HTML Best Practices

Don't separate attributes with two or more white spaces

属性之间不要用两个空格隔开

Bad:


Good:


省略布尔属性的值

Bad:


Good:


省略命名空间

Bad:


  ...

Good:


  ...

不要用 xml 属性

Bad:

...

Good:

...

不要搞混 data-*,Microdata,RDFa Lite 属性和通用的属性

Bad:

HTML Best Practices

Good:

HTML Best Practices

更强的原生语义

Bad:


  ...



Good:


  ...



根元素

添加语言属性

Bad:


Good:


保持语言属性值尽可能的短

Bad


Good:


文档的元数据

添加 title 元素

Bad:


  

Good:


  
  HTML Best Practices

指定微链接资源的 MIME 类型

Bad:




Good:




不要链接到 favicon.ico

Bad:


Good:

把 favicon.ico 放在根目录

添加 title 属性到 备用样式表

Bad:



Good:



给文档指定字符编码

Bad:


  HTML Best Practices

Good:


  
  HTML Best Practices

不要用旧的字符编码格式

Bad:


Good:


首先就要指定字符编码

Bad:


  
  
  ...

Good:


  
  
  ...

使用 utf-8 格式

Bad:


Good:


css 的 type 属性不用写

Bad:


  ...

Good:


  ...

不要注释 style 元素的内容

Bad:


<!--
  ...
  -->

Good:


  ...

不要搞混 css 和 js 标签

Bad:




Good:




Also good:




添加 body 标签

Bad:


  
    ...
  
  ...

Good:


  
    ...
  
  
    ...
  

忘了 hgroup 元素吧

Bad:


  

HTML Best Practices

For writing maintainable and scalable HTML documents.

Good:

HTML Best Practices

For writing maintainable and scalable HTML documents.

仅仅当在联系信息的时候用 address 元素

Bad:

No rights reserved.

Good:

Contact: Kyo Nagashima

pre 元素不要在新的一行开始写

Bad:

<!DOCTYPE html>

Good:

<!DOCTYPE html>

在引号元素里面使用 appropriate 元素

Bad:

For writing maintainable and scalable HTML documents.

Good:

For writing maintainable and scalable HTML documents.

不要直接包含属性在 blockquote 元素里

Bad:

For writing maintainable and scalable HTML documents.

— HTML Best Practices

Good:

For writing maintainable and scalable HTML documents.

— HTML Best Practices

Also good (recommended by WHATWG):

For writing maintainable and scalable HTML documents.

— HTML Best Practices

Also good too (recommended by W3C):

For writing maintainable and scalable HTML documents.

— HTML Best Practices

每行只写一个列表项目

Bad:

  • General
  • The root Element
  • Sections
  • ...

Good:

  • General
  • The root Element
  • Sections
  • ...

给 ol 元素用上 type 属性

Bad:


  
    .toc {
      list-style-type: upper-roman;
    }
  


  
  1. General
  2. The root Element
  3. Sections
  4. ...

Good:


  
  1. General
  2. The root Element
  3. Sections
  4. ...

把 figcaption 元素放在 figure 元素里的开头或结尾

Bad:

Front cover of the “HTML Best Practices” book
“HTML Best Practices” Cover Art
Back cover of the “HTML Best Practices” book

Good:

Front cover of the “HTML Best Practices” book Back cover of the “HTML Best Practices” book
“HTML Best Practices” Cover Art

使用 main 元素

Bad:

...

Good:


  ...

尽量的避免使用 div 标签

Bad:

...

Good:


  ...

Text-level semantics

不要把相同的链接分开来,可以用一个来包围

Bad:

WHATWG

A community maintaining and evolving HTML since 2004.

Good:


  

WHATWG

A community maintaining and evolving HTML since 2004.

用下载属性下载一个资源

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:

HBP

Good:

HBP

ruby 标记元素要长一点

Bad:

HTMLえいちてぃーえむえる

Good:

HTML (えいちてぃーえむえる) 

给 non-machine-readable 元素添加 datetime 属性

Bad:


Good:


Specify code language with class attribute prefixed with language-

Bad:

<DOCTYPE html>

Good:

<DOCTYPE html>

让 kbd 元素尽可能的简单

Bad:

Ctrl+F5

Good:

Ctrl+F5

尽可能的避免 span 元素

Bad:

HTML Best Practices

Good:

HTML Best Practices

br 元素后面要换行

Bad:

HTML
Best
Practices

Good:

HTML
Best
Practices

不要滥用 br 元素标签

Bad:

Rule name:
Rule description:

Good:

Rule name:

Rule description:

不要在 del 和 ins 元素里插入其他标签元素

Bad:

For writing maintainable and scalable HTML documents. And for mental stability.

Don't trust!

Good:

For writing maintainable and scalable HTML documents. And for mental stability.

Don't trust!

嵌入内容

如果需要就给 img 元素添加 alt 属性值

Bad:


Good:

HTML Best Practices

如果可以就把 Alt 的值空着

Bad:

Question mark icon

Good:

 

如果有可能就省略 alt 标签

Bad:

CAPTCHA

Good:


清空 iframe 元素

Bad:


  <p>If your browser support inline frame, ads are displayed here.</p>

Good:


map 元素内容

Bad:


  General
   |
  The root element
   |
  Sections
  

Good:


  

General | The root element | Sections

提供音频或视频元素后备内容

Bad:


  
  
  ...

Good:


  
  
  ...
  

表格数据

每行写一个 td

Bad:


  GeneralThe root ElementSections

Good:


  General
  The root Element
  Sections

给表格使用表头 header

Bad:

Good:

Element Empty Tag omission
pre No Neither tag is omissible
img Yes No end tag

表单

用 label 元素包裹表单

Bad:

Query:

Good:

Query:

尽可能的省略属性

Bad:

Query: 

Good:

Query: 

使用合适的类型属性的input元素

Bad:

Search keyword: 

Good:

Search keyword: 

当输入框是提交属性时要添加 value 值

Bad:


Good:


当 input 元素有验证属性时,给他添加标题属性

Bad:


Good:


不要使用占位符属性标签

Bad:


Good:

Email: 

每个 option 元素一行

Bad:


  

Good:


  
  
  

给进度条 元素添加最大的属性值

Bad:

 50%

Good:

 50%

给计数元素添加最小和最大值

Bad:

 512GB used (1024GB total)

Good:

 512GB used (1024GB total)

把 legend 元素作为 fieldest 元素的第一个元素

Bad:


  

Is this section is useful?:

... About "General"

Good:


  About "General"
  

Is this section is useful?:

...

Scripting

省略 js 的类型属性

Bad:


Good:


如果 script 元素有异步属性,需要给 script 标签添加异不属性

Bad:


Good:


不要注释 script 标签里的元素

Bad:


Also bad:


Good:


不要动态插入 script 元素标签

Bad:


Good:


缩进始终保持一致

Bad:


    
      ...
    
  
    ...
  

Good:


  
    ...
  
  
    ...
  

Element Empty Tag omission
pre No Neither tag is omissible
img Yes No end tag