本节书摘来自异步社区《Web前端开发精品课 HTML与CSS进阶教程》一书中的第1章，第1.4节，作者： 莫振杰 更多章节内容可以访问云栖社区“异步社区”公众号查看。
1.4 id和class
id和class是HTML元素中两个最基本的公共属性。一般情况下，id和class都用来选择元素，以便进行CSS操作或者JavaScript操作。但是很多新手对id和class这两个属性感到很迷茫，不知道什么时候用id，什么时候用class，甚至随便使用。
1.4.1 id属性
id属性具有唯一性，也就是说在一个页面中相同的id只允许出现一次。W3C建议，对于页面关键的结构或者大结构，我们才使用id。所谓的关键结构，指的是诸如LOGO、导航、主体内容、底部信息栏等结构。对于一些小地方，还是建议使用class属性。
我们知道搜索引擎识别一个页面结构，是根据标签的语义以及id属性来识别的。因此id属性不要轻易使用。此外，id的命名也十分关键，特别是对搜索引擎优化而言。对于id和class的命名，我们在CSS进阶部分会详细介绍。
1.4.2 class属性
class，顾名思义，就是“类”。它采用的思想跟C、Java等编程语言中的“类”相似。我们可以为同一个页面的相同元素或者不同元素设置相同的class，然后使得相同class的元素具有相同的CSS样式。
如果你要为两个或者两个以上元素定义相同的样式，建议使用class属性。因为这样可以减少大量的重复代码。
注意，对于一个元素而言，我们可以定义多个class。一般来说，定义多个class的目的在于：一般用一个class抽取公共样式，然后用另外一个class定义单独样式。
举个例子，在一个页面中有如图1-2所示的三个栏目，仔细分析我们会发现这三个栏目具有部分相同样式，此时我们可以使用一个class来定义公共样式，但是这三个栏目又有各自的样式。该怎么办呢？这时候我们应该为这三个栏目分别定义不同的class，以便在CSS中控制单独的样式。这就是多个class的用处。
上图的三个栏目的HTML关键结构如下：
<div class="column blog">
<h2></h2>
<div></div>
</div>
<div class="column manual">
<h2></h2>
<div></div>
</div>
<div class="column tool">
<h2></h2>
<div></div>
</div>
对于id和class，我们总结一下：对于页面关键结构，建议使用id；对于小地方，建议使用class。就算我们不需要对关键结构进行CSS操作或者JavaScript操作，也建议加上id，以便搜索引擎识别页面结构。
