文中提到的Markup，在这里我简单地理解为(x)HTML标签，简称标签，以下所说的标签都指Markup。

也许写HTML标签真的是一件很简单的事情，没有什么技术含量；但是，仔细看看下面列出来的这些东西，对照一下你写出来的标签，可以做的事情还是很多的。

标签是前台代码地基础，她和设计、内容、可用性、CSS、DOM脚本等相互影响，标签的质量直接影响网站程序的运行效率和维护成本。也许你认为自己的标签能够让页面效果在浏览器中被呈现出来就行了，但是有些看不见的东西也是不能忽视的，希望以下提到的东西能帮助你更好地认识标签。简单地说，写好标签是一项基础投资，她可以让：
        后续的CSS书写更精简
        DOM脚本编写更独立
        页面可用性更好
        搜索引擎更对页面内容更友好


简单重于一切


简单的标签代码，可以让错误无处藏身，减少错误出现的机会，也更容易被别人或者你自己解读，这就是我们的第一条，简单。

1、简单、简单、再简单
简单，需要清除一切不恰当和非必须的标签：用于布局的表格、font标签、内嵌的样式属性、内嵌的JavaScript...

2、不要用表格来布局
表格布局不利于后期维护，让页面标签异常臃肿，也给可用性带来麻烦，更缺少具体的语义结构。

3、标签完全语义化，排除用于装饰的元素
让每一个标签都能很好地概括她所包含的内容，内嵌的样式属性、font标签、strike和s元素、用于装饰的图像和文字，这些没有实际含义的元素都要清除。对于页面中的图像，除照片、图表等有具体含义的，别的装饰性图像可以在样式表中作为背景显示。这有利于表现和结构的完全分离。

4、消除标签中的的脚本程序，包括事件触发语句
内嵌的JavaScript，完全破坏了标签代码的结构和逻辑顺序，让标签变得异常丑恶。她直接导致标签语句的可读性降低，给错误的滋生提供了角落空间，标签和脚本的交错也提高了开发和维护成本。
把脚本程序放到一个外部单独的文件中，通过getElementById和getElementsByTagName等来获得对象，进而触发各种事件，进行操作，这样她们就能够完全独立于标签，做到行为和结构的完全分离。


因此，标签必须独立并且集中


5、不要在脚本里加标签
这会是后期的调试和维护时的恶梦。

6、不要在脚本里加内容
也许这有些难度，但必须最大限度的减少脚本中标签和内容的出现。


谨慎处理标签与CSS、脚本之间的接口


当我们把表现和行为从标签中分离出来以后，标签就成为了一个枢纽，把CSS和DOM和标签连接起来，这时候，接口成为了关键。虽然，我们可以随意给标签添加IDs和classes，来到达我们的需求的，但是这样可能会出现一些冗余的CSS和代码，也违背了简单的原则，因此如何合理地使用IDs和classes成为了一个重要的问题。

7、避免不必要的classes和IDs
例如，我们可以用#primary div h3来代替h3#name，虽然这样可能会让CSS比较复杂，但标签是一切的基础，权衡之下，#primary div h3减少了ID的使用，更加合适。我们首先考虑的是，尽量保持接口最少化。

8、Classes和IDs必须根据内容来命名而不是表现
避免名称表示的是表现的某个风格元素，如right_col，因为，最后我们可能会把这部分放到左边，容易造成后期改版维护的混乱。

9、根据功能来命名Classes和IDs
如上面的right_col，可以改成second_nav_bar，很好的表示了这个模块的功能，而和布局无关。


了结标签代码和你需要的选项


10、适当地使用微格式
微格式是一组标签和Classes、IDs命名的固定组合，一个你自己定义的固定的小模块，例如一个有姓名、职务、地址、联系方式、备注的名片模块。理解微格式之后，可以很统一地快速地书写标签中常出现地一些元素，把她们当作你自己的HTML标签。

11、了解所有地HTML标签
虽然微格式能够解决一些问题，但只是你自己的一些标签和命名，并不适用于所有的地方，HTML标签才是一切代码的基础，掌握并能正确使用HTML标签，是不可避免的。

12、不要用已经淘汰或者有争议标签
知道什么地方用什么标签是不够的，还要知道什么地方不能用什么标签，例如font标签，已经被CSS中的字体样式取代。

13、通过语义标签来传到意思。
例如del和strong标签，她们传达出删除和加粗地意思。

14、了解各个浏览器和她们之间的差异
知道在什么情况下用哪个标签是不够的，还需要熟悉各个浏览器对各个标签的支持，例如IE6就不支持abbr和q标签,此时我们需要另外寻找解决办法。

15、了解所有地HTML标签属性
许多HTML标签都不止一个属性，不同的属性有不同的用途，但是象rel、rev、alt、title等属性，经常被错误地应用，正确使用标签属性可以给用户提供更多有价值的信息。


关注细节


16、让标签代码保持一定的逻辑顺序

细微之处见真章，细节反应的是令一个层次的东西。先看，标签代码的顺序，虽然CSS可以控制我们看到的一切视觉效果包括内容顺序，但是标签代码的顺序对于提高可用性非常重要。而且在标签中排列好顺序比起用CSS更简单，还能够让页面内容的逻辑层次更清晰。

17、超链接的文字
让内容成为一个流畅的整体是我们的目标，超链接的文字是关键的细节。 好的超链接的文字，可以提高可用性，能用性，搜索引擎友好性。因此花点时间，让超链接的文字更好地描述目标链接有益无害。

18、有用的alt替换文本
alt替换文本也是一个重要的细节，alt替换文本不仅要描述图片的内容，还必须把这些文字和上下文联系起来，考虑图片的环境。

19、标题hx是对内容的逻辑概括
通过阅读标题来了结页面的大概意思和内容的逻辑结构，是应用标题的理想境界。标题标签的语义化只是第一步，让标题来概括和她相关的内容，理顺内容的逻辑顺序才是我们的目标。

20、做好表单
表单是书写标签时能够做的最多的东西，利用label、field等标签，可以改善表单的可用性。

21、用表格来更好地展示数据
我们反对用表格来布局，但是，在处理数据地时候，表格却拥有不凡地能力。如何利用caption、tbody、thead、tfoot、th、col等标签来处理数据不是一个简单地问题。

通过上面这些努力，写出来地标签代码时整洁的，流畅的，具有语义和逻辑结构，能表达具体的信息，更好的可用性，容易被解读和维护，最重要的是能从中的到一种特别的享受...

其实，写HTML标签也可以是有技术含量的

Markup as a Craft
Garrett Dimon
http://www.digital-web.com/articles/markup_as_craft/