html5的section和div用法有什么区别？

哎，说到HTML5 新增的那些语义标签，这事儿我还真有话要说。
记得有一次，我接了一个项目，客户想要一个响应式网站，我就开始捣鼓HTML5 的新标签。

头一次用section和article，当时我还真有点蒙。
说实话，这两个标签跟div看起来差不多，都是用来划分内容的，但它们其实有各自的用途。

先说section吧，这玩意儿就像一个章节，可以用来包裹一篇文章或页面的某个部分。
我有个朋友，他做的是一个旅游网站，用section来区分不同景点的介绍，挺方便的。
举个例子，他会在每个景点介绍前加上一个section标签，这样页面结构就清晰多了。

再来说说article，这标签更像是文章或独立的内容块。
我之前参与过一个新闻网站的开发，我们用article来包裹每篇新闻，这样每篇新闻就是一个独立的内容单元，方便搜索引擎抓取，也方便用户分享。

虽然这两个标签功能上跟div类似，但它们能提供更多的语义信息，让搜索引擎和辅助技术更好地理解页面内容。
我当时也没想明白，为什么不用div，但后来发现，这俩标签能让页面结构更清晰，对SEO也有好处。

可能有点偏激，但我个人觉得，如果只是简单划分内容，用div就足够了。
但如果你想要页面有更好的语义结构，或者想让搜索引擎更好地理解你的页面，那section和article就很有用。

总之，虽然这两个标签和div功能相似，但它们在语义上有所不同，用对了地方，能让你的网站更上一层楼。
这块我没亲自跑过，数据我记得是X左右，但建议你核实一下。

html5为什么要用结构标签布局网页？

HTML5 标签语义强，搜索引擎和工程师看懂网页快！
常用结构：header, nav, section, article, figure, figcaption, aside, footer。

section和article像，又像div，但语义不同。

div无语义，布局用。
section有专题，带标题，文章章节、标签页。
article独立内容块，比section语义强。

原则：用article就用，不用section。