HTML使用的十宗罪

[b]第一宗罪：内联元素嵌套块元素[/b]

[img]http://dl.iteye.com/upload/attachment/172725/c27c43e4-11f9-3830-b668-1bcd41e9aac3.jpg[/img]

不要用内联元素嵌套块元素

HTML 有两种显示方式：块(block)、内联(inline)。每个标签默认显示其中的一个。
块元素包括<div>, <p> 等结构性标签。而内联元素应该包含在块元素里面并且连接文档流，例如锚点和<span>。所以，内联元素应该始终位于块元素之中，而不存在其他方式。


[b]第二宗罪：图片没有 alt 属性[/b]

[img]http://dl.iteye.com/upload/attachment/172727/712e91ee-b9c2-34f9-9bfa-dd365a8e5a9c.jpg[/img]

图片没有 alt 属性

网页中的图像必须包括 alt 属性，它可以让用户知道这是一个什么图片。当用户使用的是屏幕阅读器或者网速慢的时候会显示出来。alt 属性应该是对图片的描述，因此 alt=”图片”不是一个好习惯。如果图片纯粹是装饰性的，只需要加上一个空白的值即可：alt=””。


[b]第三宗罪：必要的时候不使用列表[/b]

[img]http://dl.iteye.com/upload/attachment/172729/26538ca2-0730-3c4c-8a5b-500e71f7c0a1.jpg[/img]

必要的时候不使用列表

ul (还有ol)用途很广并且在显示网页项目上非常灵活。毫无疑问，ul在显示列表上做的非常出色。所以，不要再用换行来代替列表了。


[b]第四宗罪：使用<b>和<i>表示粗体和斜体[/b]

[img]http://dl.iteye.com/upload/attachment/172731/323b4a9a-aec5-3fdb-b751-d734b97adc04.jpg[/img]

使用<b>和<i>表示粗体和斜体

<b>和<i>分别显示粗体和斜体，但在语义上它们属于表现标签。因此用 CSS 的font-weight 和font-style 代替会更好。如果要显示的文字很重要，则可以通过 <strong> 或 <em> 来进行强调。其效果和 <b>、<i>一样。但更棒。

<b> 即 bold ，粗体的意思。故 <b> 只是表示加粗而已。而 <strong> 则表示加强，有强调的意思，只是默认的表现方式跟 <b> 一样而已。


[b]第五宗罪：过多地使用换行符[/b]

[img]http://dl.iteye.com/upload/attachment/172733/b1c4a4ba-e515-35f6-988c-0acdf76f470c.jpg[/img]

过多地使用换行符

换行符 <br> 只能用于截断文档流另起新行，而不应该用于产生元素之间的间距。替代方法是用 <p> 标签进行分割，然后用 css 的margin 属性来控制。


[b]第六宗罪：使用错误的删除线标签[/b]

[img]http://dl.iteye.com/upload/attachment/172735/35515671-4ca1-35be-9b59-73ba3e5d3409.jpg[/img]

使用错误的删除线标签

以前，<s> 和 <strike> 用来包含允许编辑的网页文本。但是现在它们被列入不推荐使用的标签之列。这意味着它们在 Transitional 模式下依然能正常工作。不过现在又一组新的标签 <del> 和 <ins> 。它们通常一起使用，表示被删除和随后插入的文本。


[b]第七宗罪：使用行内样式[/b]

[img]http://dl.iteye.com/upload/attachment/172737/f7190130-34d6-3202-8266-0ce7cdd74b6a.jpg[/img]

使用行内样式

使用行内样式很糟糕，这你可能已经听过上千次了。HTML 和 CSS 的意义就在于将结构和表现分离。没有理由将样式写在 HTML 里面。请记住，永远保持你的样式在外部样式表中。


[b]第八宗罪：在HTML中添加或删除边框[/b]

[img]http://dl.iteye.com/upload/attachment/172739/7f300f9b-6fd7-3b17-98b8-2707e87834b6.jpg[/img]

在HTML中添加或删除边框

border 属性是另外一个表现元素，所以应该用CSS来定义它。即便是去掉一个默认的边框。


[b]第九宗罪：不使用标题标签[/b]

[img]http://dl.iteye.com/upload/attachment/172741/95b0d1c1-2ffd-3970-a83f-bffbc09876de.jpg[/img]

不使用标题标签

标题标签 <h1> 到 <h6> 都是可用的。可以很方便地通过作为标题来分隔你的文档。如果你有一段文字用来说明其次出现的内容，标题标签是一个不错的选择。你应该根据文档，从<h1> 到 <h6> 选择一个合适的。


[b]第十宗罪：使用 <blink> 和 <marquee> 标签[/b]

[img]http://dl.iteye.com/upload/attachment/172743/8c235aa8-24a8-3d12-8211-48786a38ae63.jpg[/img]

使用 <blink> 和 <marquee> 标签

<blink> 和 <marquee>不是W3C官方的 HTML 标准所赞同的。而且纯粹就是一种丑陋。
注意，我敢肯定你能够找出一堆方法让注意力转移到某个区域，而不是通过不停闪烁或者滚动网页。

原文地址：http://line25.com/articles/10-html-tag-crimes-you-really-shouldnt-commit