什么才是漂亮的 HTML 代码

我最初是在两年前写的这篇文章。它已经有点过时了，尤其是现在 HTML5 已经出现，并且使得 HTML 比 XHTML 1.1 更漂亮。所以我更新了它！

我忍不住要查看源代码，我看到每个好看的网站。就像如果你有一副 X 光眼镜，可以让你随意看到任何你看到的人的内衣。你怎么能不看呢？这太诱人了，想知道一个漂亮的网站是否是用漂亮的代码构建的，或者它的美只是表面的。代码？漂亮？当然。毕竟，代码就是诗。这只是 HTML，所以它不可能像动态语言那样复杂和优雅，但它仍然带着创造者的笔触。

这让我思考，是什么让代码变得漂亮？在 HTML 中，它归结为精湛的工艺。让我们看看一些以应有的方式编写的标记，看看它可以有多漂亮。

它足够大，可以打印出来贴在你的储物柜里，给你的朋友留下深刻印象。好吧，它的大小可能有点尴尬。我会提供 PSD，如果你想修改它。

• HTML5 – HTML5 及其新元素打造了迄今为止最漂亮的 HTML。
• DOCTYPE – HTML5 有史以来最好的 DOCTYPE
• 缩进 – 代码缩进以显示父子关系并强调层次结构。
• 字符集 – 声明为头部中的第一件事，在任何内容之前。
• 标题 – 网站标题简单干净。页面的目的是第一位的，使用分隔符，并以网站的标题结尾。
• CSS – 仅使用一个样式表（媒体类型在样式表中声明），并且仅提供给好的浏览器。IE 6 及以下版本使用通用样式表。
• 主体 – 为主体应用 ID，以便在没有任何额外标记的情况下允许进行独特的页面样式。
• JavaScript – jQuery（最漂亮的 JavaScript 库）从 Google 提供。仅加载一个 JavaScript 文件。这两个脚本都引用在页面底部。
• 文件路径 – 网站资源使用相对文件路径以提高效率。内容文件路径是绝对的，假设内容是联合的。
• 图像属性 – 图像包括替代文本，主要用于视障人士，但也用于验证。应用高度和宽度以提高渲染效率。
• 主要内容优先 – 页面的主要内容出现在基本身份和导航之后，但在任何辅助内容（如侧边栏材料）之前。
• 合适的描述性块级元素 – 标题、导航、部分、文章、旁注……所有这些都比旧的 div 更恰当地描述了它们包含的内容。
• 层次结构 – 标题标签保留给真正的内容，并遵循清晰的层次结构。
• 合适的描述性标签 – 列表标记为列表，具体取决于列表的需要：无序、有序和未充分利用的定义列表。
• 通用内容包含 – 多个页面中通用的内容通过服务器端包含（通过适合您的任何方法、语言或 CMS）插入。
• 语义类 – 除了适当的元素名称之外，类和 ID 也是语义的：它们描述而不指定。（例如，“col” 比“left” 好得多）
• 类 – 只要需要将类似样式应用于多个元素，就会使用类。
• ID – 只要元素在页面上只出现一次，并且不能以其他合理的方式进行定位，就会使用 ID。
• 动态元素 – 需要动态的元素是动态的。
• 字符编码 – 如果是特殊字符，则进行编码。
• 无样式 – 页面上的任何内容都不会应用样式，甚至不会暗示样式可能是怎样的。页面上的所有内容要么是必需的网站资源、内容，要么是描述内容。
• 注释 – 注释包含在可能在查看代码时不会立即显而易见的事物中。
• 有效 – 代码应遵守 W3C 指南。标签已关闭，使用必需的属性，没有任何已弃用的属性，等等。