前面我们学习了不少标签，很多人由于不熟悉标签的语义，常常用某一个标签来代替另一个标签，从而实现相同的效果。举个很简单的例子，如果想要实现有序列表的效果，可能有些小伙伴会使用下面代码来实现。

举例：

在线测试
<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div>1.HTML</div>
    <div>2.CSS</div>
    <div>3.JavaScript</div>
    <div>4.jQuery</div>
    <div>5.Vue.js</div>
</body>
</html>

浏览器预览效果如下图所示。

分析：

乍一看，代码不同，但是跟使用ul和li实现的效果差不多咧！然后在心里暗暗窃喜：“哎呀，这方法太棒了，估计也就只有我能想得出来！”曾经我也这样自诩过，实在惭愧。

用某一个标签来代替另外一个标签实现相同的效果，这是大多数初学者都会遇到的问题。正是这种错误的思维，导致很多人在学习HTML时，没有认真地把每一个标签的语义理解清楚，糊里糊涂就学过去了。能用某一个学过的标签来代替，我就懒得认真学新的标签，这就是HTML学习中最大的误区。

不少人可能会问：“对于大多数标签实现的效果，使用div和span这两个就可以做到了，干嘛那么费心费力去学习那么多标签呢？”这个问题刚好戳中了HTML的精髓。说得一点都没错，你可以用div来代替p，也可以使用p来代替h1。但是这样你就违背了HTML这门语言的初衷。

HTML的精髓就在于标签的语义。在HTML中，大部分标签都有它自身的语义，例如p标签，表示的是paragraph，标记的是一个段落；h1标签，表示header1，标记的是一个最高级标题……而div和span是无语义的标签，我们应该优先使用其他有语义的标签。

语义化，是非常重要的一个思想。在整站开发中，编写的代码往往都是成千上万行，你现在的几行代码无法与其相提并论。如果全部使用div和span来实现，我相信你看得头都晕。要是某一行代码出错了怎么办？你怎么快速地找到那一行代码呢？除了可读性，语义化对于搜索引擎优化（即SEO）来说，也是极其重要的。

HTML很简单，因此很多初学者往往忽略了它的目的和重要性。我们学习HTML的目的并不是记住所有的标签，更重要的是在你需要的地方使用正确的语义化标签。把标签用在对的地方，这才是学习HTML的目的所在。