使用整洁的HTML标记，构建符合标准的页面可以帮助你做到这些，更重要的，它可以是你在未来的运营中节省大量的时间和金钱。

网页技术是跟随互联网技术的发展而进步的，HTML技术已经发展了很长时间，它的伴生技术也已发展稳定。

首先是Javascript，然后是CSS、XML，直到现在的AJAX，HTML5的大规模运用也已初现端倪——Firefox、Safari、 Opera和Chrome已经基本完全支持HTML5（在这个问题上，微软的Internet Explorer再一次阻碍了互联网的发展#-_-）

在这篇文章里，我们会探讨基础的web标准，讨论它们是什么，他们有什么意义，以及这些重要但常被忽视的问题的解决方法。

什么是“整洁”的HTML标记？

简单来说，“整洁”的HTML标记指的是：没有累赘，符合标准，使用有意义的标签和结构。

没有累赘的HTML代码可以充分的利用标签，消除了不必要的代码，仅保存有意义的标记。它避免了无用的属性，比如嵌入式CSS，保持了文档结构的整齐。

同样的，没有累赘的CSS代码应该避免自身的重复，使用可继承的属性(记住CSS的本意是层叠样式表)，并且科学的重用CSS Class。

符合标准指的是你的页面可以通过W3C的HTML、CSS、XML标准验证，使用免费的W3C验证器，找出并修改错误，继续测试知道100%符合标准。

为什么要这样？只要能正常显示不就够了吗？

每个项目都有一个紧迫的时限，用户希望网站越早发布越好。所以网站开发和设计人员都被要求快速高效的完成工作。

人很容易陷入一种陷阱——快速就意味着草率，书写整洁、符合标准的代码会浪费时间。经常有人说：“它正常显示了，就没问题了”。

虽然此时此刻它显示了，但明年呢？三年以后呢？浏览器换代怎么办？设备兼容吗？

你真的以为搜索引擎会去一行一行的抠你的代码吗，它们是很挑剔的，如果你不使用标准化的代码，就相当于你自己赶跑了搜索引擎。

如果有其他的员工来修改你的代码会怎样，如果你被老板炒了，或者自己跳槽了会怎样？会有继任者来看你的代码，理解它们的意思。你是想让这件事变得简单，还是想让他在背地里扎你的小人？

开始正确的书写它吧，这并不是一项烦人的事情，它会节省你的时间和金钱，并且让你少些后顾之忧。

你可能以为使用嵌入式CSS写页面更快，你也可能觉得不考虑结构直接书写HTML更方便。

但是当你修改文档或者将来你要改版网站的时候，你会花更多的时间来弥补劣质代码造成的干扰。如果你建立了新的样式表，那分散在HTML代码中的嵌入式CSS会给你带来很大麻烦，你可能会花几小时的时间来剥离他们。

可扩展，设备友好，语义化和易升级

手机浏览器的发展越来越快，手机上网不再是黑莓的专利，现在每天有数以亿计的人在使用手机浏览网页。

具备为视力障碍人士开发的辅助浏览技术或为肢体不方便的人设计的特殊操作界面的设备已经很常见。如果你不想失去这么庞大的用户群的话，就要考虑设备友好的问题。

你的网站可能会被以盲文的形式提供给用户，有了  互联网内容存储、 Google快照等工具，你的网页即使被删除，也可能会在网络上被保留很长时间。

使用整洁、符合标准的标记可以使你轻松应对以上的情况。

Do和Don’t (“要”和”不要”)

DO – 使用预定义的标签。例如：h1是一个网页内容中最重要的部分，然后是h2,h3等等，一个网页中只能有一个h1；

DO – 使用有意义的元素命名。问问自己如果别人来阅读代码的话，会不会明白你的class和ID的命名的意思，比如，同样一个层，用#box12 还是#comment-footer，你觉得哪个更好些？

DO – 充分利用CSS的继承性。例如：你在一个container中设置了字体属性，那么你就不必在其子元素中再分别设置了，除非它用不同的字体。这会使你的样式表明晰简洁。

DO – 让你的HTML、CSS、XML代码符合标准。使用W3C验证器验证错误和警告，修改它们知道100%符合标准。

DO – 双向检查所见即所得编辑器产生的代码。所见即所得浏览器是产生垃圾代码的大头，一定要尽量精简它产生的代码。

DON’T – 不要使用嵌入式css样式和无关的标记和属性。及时你很忙乱，也不要顺手加这些东西。

DON’T – 不要满足于“正确显示”。因为隐藏在页面中的错误可能会在其他浏览器或设备中把页面毁的面目全非。

扩展阅读

• 使用Web标准进行设计: Jeffrey Zeldman
• W3C 标准验证器: XHTML 验证, CSS 验证
• W3C 建议 如何书写整洁的代码
• Web可扩展性教程
• Web标准项目 – Web标准的信息、发展趋势和很多实例代码

作者

原作：Alvaro Guzman @ Wedsigner Depot
翻译：幼学笔记