HTML转HTML5需用语义化标签替代无意义div，如header、nav、main、aside、footer；section和article非div直替，须依内容逻辑选用；废弃font、center等旧标签，保留必要div用于样式或JS挂载。
HTML 转 HTML5 不是简单改个 就完事，核心是用语义化标签替代无意义的 <code><div> 堆砌，让结构可读、可访问、可被搜索引擎和辅助工具理解。
<h3>哪些旧标签必须换掉</h3>
<p>HTML4/ XHTML 中大量使用的通用容器，在 HTML5 里已有明确语义标签替代，继续用 <code><div id="header"> 这类写法等于放弃 HTML5 的结构优势。
<ul><li><code><div id="header"> → 改用 <code><header></header>
<div id="nav"> 或 <code><div class="menu"> → 改用 <code><nav></nav>
<div id="main"> → 改用 <code><main></main>（注意：<main></main> 页面中只能出现一次）
<div id="sidebar"> → 改用 <code><aside></aside>（内容需与主内容相关但非核心，如侧边栏推荐、作者信息）
<div id="footer"> → 改用 <code><footer></footer>
特别注意：<section></section> 和 <article></article> 不是 <div> 的直替——<code><section></section> 表示有标题的逻辑区块（如“产品特性”“用户评价”），<article></article> 表示能独立分发的内容（如一篇博客、一条新闻、一个评论）。
<div> 不能全删，但得知道留哪些
<p>不是所有 <code><div> 都该删。HTML5 没废除它，只是限制了使用场景：<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul><li>纯样式包裹（如 <code><div class="card-shadow">）、JS 动态挂载点（如 <code><div id="root">）、BEM 布局单元（如 <code><div class="header__logo">）——这些仍合理保留
<li>但凡带功能或内容含义的 <code><div>，比如 <code><div class="post-list">，应优先考虑 <code><section></section> 或 <article></article>
<div>（如三层以上 <code><div><div><div>）大概率暴露结构缺失，先补语义标签再考虑是否需要 <code><div>
<h3>老式布局标签要彻底移除</h3>
<p>以下标签在 HTML5 中已废弃，浏览器虽仍渲染，但不建议继续使用，也不再被 W3C 规范支持：</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill11244" title="Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20d79f23518.jpg" alt="Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill11244" title="Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转">Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转</a>
<p>实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。</p>
</div>
<a href="/xiazai/skill11244" title="Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<ul>
<li>
<code><font></font>、<center></center>、<u></u>、<strike></strike> —— 全部交由 CSS 控制样式<frame>、<frameset></frameset>、<noframes></noframes> —— 已被现代路由、SPA 和响应式布局取代<acronym></acronym> —— 统一用 <abbr></abbr>（HTML5 中 <acronym></acronym> 不再有效）检查时重点搜 <font>、<code><center>、<code><frame> 这类字符串，批量替换为 CSS 类或语义等价标签即可。
兼容性与验证要点
结构升级后，别只盯着视觉效果，几个关键点容易漏检：
- 屏幕阅读器依赖语义标签导航，改完后用 NVDA 或 VoiceOver 实测
<nav></nav>是否能被识别为导航区 -
<main></main>必须且仅能出现一次；多个<article></article>可以存在，但每个都应有<h1>–<h6></h6> </h1>标题（可用<header></header>包裹） - 用 W3C HTML Validator 验证，关注 “Element X is not supported in HTML5” 和 “Article lacks heading” 类报错
- 部分老 CMS 输出的 HTML 会自动加
<div class="clearfix">，这类纯 hack 标签可直接删，用 <code>overflow: hidden或display: flow-root替代语义结构不是“锦上添花”，而是现代 Web 的基础层——改得不彻底，SEO、无障碍、维护性都会打折扣；但改得太机械，比如把每个
<div> 都硬套 <code><section></section>，反而破坏语义。关键在判断内容意图，而不是标签数量。
