语义 X/HTML 标记如何节省时间 -
今天我要向学生解释这些事情。
我有一些例子，但我想要一些更好的例子和想法来很好地解释。
我想从开发人员的角度解释语义 X/HTML 标记的好处。
提前致谢
更新：
使用语义标记的好处：
【问题讨论】：
标签： css xhtml web-standards semantic-markup
对于开发人员而言，除了更可靠和可控的代码外，主要优势是清晰的代码。 通过编写语义 XHTML，您可以避免编写其他开发人员或您将来难以破译的模糊代码。
IE。 <address> 比使用 <div> 更适合列出地址（这种情况经常发生......），同时具有相同的灵活性、样式和提高可读性。
【讨论】：
根据我的工作经验：我现在有好几次从我的前任或完全其他人那里查看遗留标记（实际上我自己也看过一两次）。有时我只有在浏览器中查看源代码的结果。到目前为止，我的发现是：
如果作者尽可能地使用语义标记，再加上清晰的逻辑类名，找出页面的结构真的很容易和有趣，例如，编写新的小部件或重组列布局或内容
如果作者使用table based布局，而且我也有90年代末的东西可以看，那真是一团糟。您必须弄清楚，哪个表格行做什么，哪个表格单元格属于哪个表格，如果您开始认为您会掌握，您之前忽略了rowspan="3" 300 行标记。即使在 Firebug 中，你也会对这样的标签汤感到愤怒。
在这里添加新东西可能会变得非常冒险。如果您将内容添加到表格单元格，并且没有完全修复新内容的宽度和高度，您可能会发现整个页面都有令人不快的间隙，并且忘记在某处打开或关闭<td>s（带有 200原始页面上的验证错误，您可能会在某处遗漏某些内容）可能会导致完全错误的视图。
如果作者到处使用divs和spans，但没有做语义标记（即写<div class="header1"/>而不是<h1/>），还是比表格布局（最多是因为提到的 rowspan 和 colspan 并且因为如果某处缺少 </div> ，您有可能页面可能不会完全炸毁），但您仍然可以对标记发疯，例如
</div></div>
</div>
</div>
</div>
</div></div>
</div>
此外，如果我有一个随附的样式表，那也基本上是一团糟。区分 .header、.header1、div.header_level1 和 #middle .h1 会迫使您在样式表和标记之间来回切换。
【讨论】：
- 我们将第一次为网站编写 CSS
每个网站都有不同的外观/布局，你必须第一次为它编写 css，除非它们在你的布局之间有一些相似之处。
- 如果将来有任何设计更改来自客户。
您可以使用 MVC 设计模式制作您的网站，这将为您的网站设计带来很多变化。
- 以及为什么基于表格的布局总是需要更多时间 条件
因为他们的标记被设计成你必须写更多，而在基于 div 的布局中，我们主要使用 clear 和 float 来快速创建布局.
【讨论】：