html4依赖div堆砌结构、语义靠class硬凑，可读性差且不利seo与无障碍；html5用header、nav、main等语义标签直接映射内容逻辑，提升可访问性与维护性，但需配合正确heading层级与aria属性。
HTML4 时代靠 <div> 堆出结构，语义全靠 class 名硬凑<p>那时候没有 <code><header></header>、<nav></nav>、<article></article> 这些标签，页面靠一堆嵌套的 <div id="header">、<code><div class="main-content"> 撑起来。可读性差，辅助技术（如屏幕阅读器）几乎无法理解内容层级，SEO 也得靠额外标注或 JS 补救。<p>常见写法示例：</p><pre class="brush:php;toolbar:false;"><div id="wrapper">
<div id="header"></div>
<div id="nav"></div>
<div id="content">
<div class="post"></div>
</div>
<div id="footer"></div>
</div></pre><h3>HTML5 引入语义化标签，结构即含义</h3>
<p>不是“多几个标签而已”，而是把文档逻辑直接映射到标记中：<code><header></header> 就是页眉或章节头，<nav></nav> 专指导航区块，<main></main> 明确标识主体内容——浏览器、搜索引擎、无障碍工具能原生识别这些角色。
关键变化点：
立即学习“前端免费学习笔记（深入）”；
-
<main></main>在整个页面中只能出现一次，且不能嵌套在<article></article>、<aside></aside>、<footer></footer>等内 -
<section></section>和<article></article>不是互斥关系：<article></article>是可独立分发/复用的内容（如博客正文），<section></section>是主题相关的一组内容（如“评论区”“相关推荐”） -
<aside></aside>不等于“右边栏”，它表示与当前内容关联较弱的旁注（比如侧边术语解释、作者简介），哪怕它在视觉上居中也没问题
实际布局中，HTML5 结构 ≠ 视觉布局
很多人一上来就按“头部-导航-主栏-侧栏-底部”写死标签顺序，结果发现 CSS Grid/Flexbox 调整位置时语义崩了。HTML5 结构描述的是内容逻辑关系，不是像素坐标。
例如：一个移动端优先页面，视觉上 <nav></nav> 在 <main></main> 下方，但 HTML 中仍应放在 <main></main> 前面——因为导航对整页有意义，不从属于主体内容。
错误示范（语义错位）：
<main>
<h1>文章标题</h1>
<p>正文…</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/1022" title="Reecho睿声"><img
src="https://img.php.cn/upload/ai_manual/000/000/000/175680027111017.png" alt="Reecho睿声" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/1022" title="Reecho睿声">Reecho睿声</a>
<p>Reecho AI：超拟真语音合成与瞬时语音克隆平台</p>
</div>
<a href="/ai/1022" title="Reecho睿声" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<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></dialog>、<figure></figure>等语义标签 - 别为了“语义”强行套标签——比如用
<article></article>包裹一个按钮组，不如老实用<div role="group"><p>最常被忽略的一点：语义结构必须配合正确的 heading 层级（<code><h1></h1>–<h6></h6>）和 ARIAlandmark属性才完整。光有<main></main>标签，没合理 heading 嵌套，屏幕阅读器照样理不清主次。
