5. 正确的标签嵌套
在我们的网站标题里面，我们使用《h1》作为网站标题标签，这是完美的。并且添加了一个到首页的链接，但错误就出在把链接放到了《h1》外面，《a》链接包围了《h1》。这种简单的嵌套错误，大多数浏览器都能良好的处理，但从技术上来说，这是不行的。
锚链接是一个内联元素，而《h1》标题是一个区块元素，区块元素不应该被放在内联元素中。
6. 去除不必要的DIV
我不知道谁首先发明，但我喜欢“ divitis ”这个词，它指的是在HTML标记中过度的使用divs。在学习网页设计的某个阶段，大家学习如何使用一个DIV来包裹诸多其它元素来实现方便的布局和样式化。这就导致了DIV元素的滥用，需要的地方我们用了，完全不必要的地方我们也用了。
在上图的例子中，我们使用了一个 div （”topNav”） 来包含了UL列表 （”bigBarNavigation”）。 但DIV和UL都是区块元素，所以没有必要使用DIV来包裹UL元素。
7. 使用更好的命名惯例
现在正好谈一下命名管理， 在上一条所说的示例中，我们的UL使用了ID名称 “bigBarNavigation.” 其中 “Navigation” 很好的说明了该区块的内容，但 “big” 和 “Bar” 描述的却是设计而不是内容。 它可能是在说这个菜单是一个很大的工具条， 但如果这个菜单的设计变成垂直的，那这个名称就会显得混乱和不相关。
友好的 class 和 id 名称 例如 “mainNav，” “subNav，” “sidebar，” “footer，” “metaData，” ，它们描述了所包含的内容。 不好的 class 和 id 名称则描述设计， 比如 “bigBoldHeader，” “leftSidebar，” and “roundedBox.”
注： Chris 所强调的是按内容还是按设计来进行命名。个人补充一点： ID和Class名称使用大写还是小写，或单词首字母大写。首先，完全的大写单词是不利于阅读的，排除。至于完全使用小写还是单词首字母大写，就看个人的习惯了。重要的一点是，不管使用哪种规则，应该保持一致。不要一会儿纯小写，一会儿又首字母大写，会很混乱。
另外，我个人比较迷糊的是，对比较长的名称，是加下划线“_”， 还是连字符”-”，亦或不用。或者是我想的太复杂了吧。用哪种都好，保持一致就OK。
8. 把字型排版留给CSS
在菜单的设计中，我们一般都使用大写字母。这很简单啊，把菜单项写成大写的不就行了？但为了将来的可扩展性，我们不应该这么做。在代码中，我们应该仍然使用标准的单词大小写写法，或完全写成小写。而之后，我们可以通过CSS来改变文字的字型，比如通过text- transform:uppercase; 把字母转换为大写，通过text-transform:capitalize;把转换为单词首字母大写。
更多的12条原则：保持你的HTML代码整洁又规范请到论坛查看: http://BBS.TC711.COM
【 双击滚屏 】 【 评论 】 【 收藏 】 【 打印 】 【 关闭 】
来源：
chinaz
日期：2009-3-14
