真正起布局作用的标签只有div和语义化区块标签（header、nav、main、aside、footer、section、article）；table仅用于表格数据展示，非布局工具。
HTML文档结构中真正起布局作用的标签只有少数几个，div 和 section、header、nav、main、aside、footer 这些语义化标签才是现代布局的主力；table 标签不是布局工具，仅用于表格数据展示。
哪些标签能真正用于页面分区布局
布局的本质是划分区域、建立层级、表达意图。能直接参与结构划分的只有两类：
-
div：无语义、纯容器，兼容性最好，适合快速原型或需要精细控制的场景 - 语义化区块标签：
header、nav、main、aside、footer、section、article—— 它们本身不带样式，但明确告诉浏览器和辅助技术“这是什么”，对 SEO 和可访问性有直接影响
注意：section 不等于“随便分一块”，它必须包含一个主题性内容组（比如带标题的模块）；aside 应该是与主内容相关但可独立存在的补充信息，不是所有侧边栏都该用它。
为什么不能用 table 做布局
table 标签在 HTML5 中已被明确定义为「仅用于表示表格化数据」。强行用它布局会带来三个实际问题：
立即学习“前端免费学习笔记（深入）”；
- 语义错误：屏幕阅读器会把整个页面读成一张大表格，破坏导航逻辑
- 响应式困难：
table的列宽由内容撑开，display: table-cell在小屏上无法自然堆叠 - 维护成本高：嵌套多层
tr/td后，改一个位置可能要动七八行代码
哪怕看到老项目里还有 <table><tr><td> 套 layout，也别模仿——那不是“兼容写法”，是历史包袱。
div 和语义标签混用时的关键判断点
实际开发中常遇到“该用 div 还是 section”的犹豫。判断依据很简单：
- 这个区域有没有独立的主题？有 → 优先用
section或article - 这个区域是否承担明确功能角色？比如顶部导航栏 → 用
nav，不是div class="nav" - 这个区域只是纯粹为了 CSS 定位或 JS 操作而存在？没语义需求 → 用
div
示例：<div class="card"> 是合理用法，因为卡片是视觉组件，不是语义单元；但 <div class="main-content"> 就该换成 <main> —— 后者自带语义，且无需额外 class。
移动端和旧浏览器的兼容性现实
语义化标签在 IE8 及更早版本中不被识别，但这个问题早已有解：
- 只需在
<head>中引入 html5shiv（一行 script），IE9 以下就能正确解析header等标签 - 所有现代浏览器（Chrome/Firefox/Safari/Edge）和 Android/iOS WebView 均原生支持，无需 polyfill
- 真正要注意的是：部分老安卓 WebView 对
main的支持不稳定，若需覆盖 Android 4.4 以下设备，可用div role="main"替代
别因“怕兼容”就放弃语义化——只要项目不需支持 IE8，直接用标准语义标签即可；而 IE8 本身已退出主流支持范围多年。
