HTML4依赖div堆砌结构、语义靠class硬凑，可读性差且不利SEO与无障碍；HTML5用header、nav、main等语义标签直接映射内容逻辑，提升可访问性与维护性，但需配合正确heading层级与ARIA属性。
HTML4 时代靠 <div> 堆出结构，语义全靠 class 名硬凑
那时候没有 <header>、<nav>、<article> 这些标签，页面靠一堆嵌套的 <div id="header">、<div class="main-content"> 撑起来。可读性差，辅助技术（如屏幕阅读器）几乎无法理解内容层级，SEO 也得靠额外标注或 JS 补救。
常见写法示例：
<div id="wrapper">
<div id="header"></div>
<div id="nav"></div>
<div id="content">
<div class="post"></div>
</div>
<div id="footer"></div>
</div>HTML5 引入语义化标签，结构即含义
不是“多几个标签而已”，而是把文档逻辑直接映射到标记中：<header> 就是页眉或章节头，<nav> 专指导航区块，<main> 明确标识主体内容——浏览器、搜索引擎、无障碍工具能原生识别这些角色。
关键变化点：
立即学习“前端免费学习笔记（深入）”；
-
<main>在整个页面中只能出现一次，且不能嵌套在<article>、<aside>、<footer>等内 -
<section>和<article>不是互斥关系：<article>是可独立分发/复用的内容（如博客正文），<section>是主题相关的一组内容（如“评论区”“相关推荐”） -
<aside>不等于“右边栏”，它表示与当前内容关联较弱的旁注（比如侧边术语解释、作者简介），哪怕它在视觉上居中也没问题
实际布局中，HTML5 结构 ≠ 视觉布局
很多人一上来就按“头部-导航-主栏-侧栏-底部”写死标签顺序，结果发现 CSS Grid/Flexbox 调整位置时语义崩了。HTML5 结构描述的是内容逻辑关系，不是像素坐标。
例如：一个移动端优先页面，视觉上 <nav> 在 <main> 下方，但 HTML 中仍应放在 <main> 前面——因为导航对整页有意义，不从属于主体内容。
错误示范（语义错位）：
<main> <h1>文章标题</h1> <p>正文…</p> <nav><!-- 导航本该服务整页，却塞进 main 里 --></nav> </main>
正确写法（结构先行）：
<header><h1>网站名</h1></header>
<nav><ul><li>首页</li></ul></nav>
<main>
<article>
<h2>文章标题</h2>
<p>正文…</p>
</article>
</main>
<aside><p>作者信息</p></aside>
<footer><p>版权</p></footer>兼容性与渐进增强：老标签没淘汰，但新结构值得坚持
IE8 及更早版本不识别 HTML5 语义标签，但用 document.createElement 或 html5shiv 可补丁支持渲染和基本样式继承。真正影响大的是语义缺失带来的长期维护成本：团队交接时看 class 名猜意图，自动化测试难定位区域，无障碍审核反复报 role 缺失。
务实建议：
- 新项目无条件用 HTML5 语义结构，哪怕只支持现代浏览器
- 旧项目改造不必重写 DOM，但新增模块（如弹窗、卡片组件）优先使用
<dialog>、<figure>等语义标签 - 别为了“语义”强行套标签——比如用
<article>包裹一个按钮组，不如老实用<div role="group">
最常被忽略的一点：语义结构必须配合正确的 heading 层级（<h1>–<h6>）和 ARIA landmark 属性才完整。光有 <main> 标签，没合理 heading 嵌套，屏幕阅读器照样理不清主次。
