本节书摘来自异步社区《Web前端开发精品课 HTML与CSS进阶教程》一书中的第2章，第2.1节，作者： 莫振杰 更多章节内容可以访问云栖社区“异步社区”公众号查看。
第02章 语义化
2.1 语义化简介
由于HTML简单，很多初学者对它存在一种偏见，觉得它没多少东西，因此在学习的过程中随便对待。其实，学习HTML的重点不在于掌握了多少标签，而是在于掌握标签的语义以及如何编写一个语义结构良好的页面。
在实际开发过程中，很多人由于对标签语义不熟悉，常常用某一个标签代替另外一个标签来实现某些效果。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body{font-family:"微软雅黑";font-size:14px;}
.content
{
width:300px;
padding:10px;
border:1px dashed gray;
}
.content div
{
font-size:16px;
font-weight:bold;
height:24px;
line-height:24px;
}
</style>
</head>
<body>
<div class="content">
<div>web前端开发</div>
<p>web前端开发最核心3个技术：HTML、CSS和JavaScript。HTML控制网页的结构，CSS控制网页的样式，JavaScript控制网页的行为。</p>
</div>
</body>
</html>
在浏览器预览效果如图2-1所示。
对于上面的标题效果，正确的做法应该是使用h1～h6标签来实现，但这里却使用div来代替了。虽然页面效果一样，但是这种“用某一个标签代替另外一个标签来实现相同效果”的做法是完全不可取的，因为它违背了HTML这门语言的初衷。
HTML的精髓就在于标签的语义。在HTML中，大部分标签都有它自身的语义，例如p标签，表示的是“paragraph”，标记的是一个段落；h1标签，表示“header1”，标记的是一个最高级标题……而div和span是无语义的标签，我们应该尽可能少用。
HTML很简单，因此很多初学者往往忽略了它的目的和重要性。我们学习HTML并不是看自己学了多少标签，更重要的是在你需要的地方能否用到正确的语义化标签。把标签用在对的地方，这才是HTML学习的目的所在。
我们都知道前端最核心的技术是HTML、CSS和JavaScript这三种。其中HTML是网页的结构，CSS是网页的外观，JavaScript是网页的行为。在这三大元素中，HTML才是最重要的，而CSS和JavaScript只是用来修饰结构的。就像你盖房子，房子装饰得再漂亮，如果结构不稳也容易塌。
整站开发时，编写的代码往往都是成千上万行，如果我们全部使用div和span来代替语义化标签，后期维护会非常困难。此外对于一个页面来说，我们可以根据一个页面的外观来判断哪些是标题，哪些是图片。但是搜索引擎跟人不一样，它可“看不懂”一个页面长什么样的。它只会根据HTML代码来识别。搜索引擎一般都是根据HTML标签来识别这里是一个img标签，那里是一个p标签等。如果整个页面都是div和span，搜索引擎小蜘蛛肯定会迷路，可能以后都不想来光顾你这个站点。要是这样的话，你崩溃了，你的老板也跟着崩溃了。
从上面我们知道，编写一个语义结构良好的页面在实际开发中极其重要。主要有两个最大的优点：①利于开发调试和后期维护；②利于搜索引擎优化。在这一章，我们从以下7个方面给大家详细讲解HTML语义化。
（1）标题语义化。
（2）图片语义化。
（3）表格语义化。
（4）表单语义化。
（5）其他语义化。
（6）语义化验证。
（7）HTML 5摒弃的标签。
103
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
