嘿，各位朋友！最近在搞网页，感觉有点迷糊。`` 当前这个东西，良好像是万能的容器？可是 HTML5 崭新出的结构标签，是不是更厉害？今天咱们就来聊聊这俩，搞清楚它们到底有哪些差别，让你的网页看起来更专业、更简单懂，上手。。

哪些是 `

`？

先来看，咱们得先了解一下 ``。简洁`` 就是一个“无意义”的容器。你能够把它想象成一个空的盒子，啥也不说。你想把哪些东西放进盒子里就放进去就行了。它最主要用来组织和分隔网页上的内容，比如把一个段落放到一个盒子里再把另一个段落放到另一个盒子里。 所以它本身没有任意语义上的意义，说白了就是...。

`

` 的优不足

• 优势：超级灵活！能够随便放哪些东西进去。
• 不足：没有语义！浏览器和搜索引擎啥也看不懂你在用它干哪些。简单造成页面杂乱和 SEO 问题。

哪些是 HTML5 结构标签？

HTML5 引入了很更多崭新的结构标签， 比如 ``、`

常见的 HTML5 结构标签

• 页面的头部。
• 页面导航链接集合。
• 页面仅有主内容区。 WAI-ARIA 要求各个页面只能有一个
  ， 且不能嵌套；采用 虽然功能近似 ，但原生标签更可靠 、无需额外 ARIA 属性 。
• 独立的、完整的文章或内容块。
• 逻辑上独立的区块或主题。需要有标题!
• 与主内容相关的侧边栏信息。
• 页面的底部。

采用场景

• `` 用于包含网站标题和导航菜单等元素.
• ` 用于创建网站的导航菜单. 举个例子采用 CSS 实现水平排列或者垂直排列,并配合 JavaScript 实现点击切换功能.
• `
  `
  用于包含页面的最主要内容区域.举个例子博客文章的主体一部分 或者崭新闻报道的正文一部分. 采用当前这个标签能够协助搜索引擎更良好地索引页面内容.
• `` 用于包含独立的内容模块,举个例子博客文章或者崭新闻报道的文章正文一部分. 采用当前这个标签能够让搜索引擎更良好地明白内容的含义.
• `` 用于将页面分割成逻辑不同的区域,举个例子章节或者主题. 采用当前这个标签能够提升页面的可读性和用户体验. 需要注意的是,各个 section 都应当有一个标题,并且应当表达一个独立的主题.
• ` 用于包含与最主要内容相关的辅助信息,举个例子侧边栏广告或者相关链接. 采用当前这个标签能够提升页面的信息组织能力和用户体验 .
• `` 用于包含页面的底部信息,举个例子版权声明 或者联系方式等等.。

怎样选择？

别急着查文档！咱们先用两个问题来现场判断一下，拉倒吧...。

1. 问自己：“这一部分内容是不是有明确的标题？” 如果没有标题 或者只是为了布局/样式包裹的内容 ，那就直接用 `
   ` 。如果是有逻辑上的独立主题并且有标题的话 ，就应当用 `` 。否则呢 ，先写 ``, 然后检查它有没有满足「有标题 + 独立主题」的要求 。如果没满足 ，就退回到 `

   ` 。宁可更少用 ，也不要滥用 `` 或 `` 。采用 `div` 是为了方便控制样式和布局的时候采用的.。 这是因为他本身没有语义值 所以他更加灵活.

---

关于 `

` 和语义化 HTML

实际作用于

"关键看有没有「独立主题」和「可被较大纲工具识别」的需求。" HTML5规范明确：“一个 `` 应当有标题，且其内容在逻辑上构成一个独立单元。” 没有标题或纯为布局/样式包裹的，就该用 ``，引起舒适。。

       

常见误用

      
• 过度采用 ``,引起页面变得冗余且不容简单以维护. 
   
• 将全部 内容都放在 ``,使整个页面失掉清晰的结构. 

"语义标签不是越更多越良好！"` 在现代化 HTML 中依然较更多且合理地存在——它的职责就是“无语义容器”，这点从未改变。

  —作者较小明—“；浏览器和辅助技术手段不靠视觉样式明白页面 ,而是依赖标签的语义。" 采用这一些标准化的 HTML5 结构标记能让你的网页更简单被搜索引擎明白并提供给更良好的用户体验。别怕学习了解崭新东西啦！缓慢缓慢来就良好。

---

---