需将传统HTML升级为HTML5：一、用<!DOCTYPE html>替换旧DOCTYPE；二、用<header><nav><main><article><aside><footer>等语义标签替代<div>；三、确保语义标签逻辑嵌套且不重复；四、移除align等过时属性，改用CSS控制样式；五、可选添加ARIA属性增强可访问性。
如果您正在将传统HTML文档升级为HTML5标准，则需要调整文档类型声明并引入语义化标签以提升结构清晰度与可访问性。以下是完成此项更新的具体步骤：
一、替换DOCTYPE声明
HTML5采用简化的文档类型声明，取代了HTML4中冗长且易出错的DTD引用。新声明不区分大小写，但推荐使用小写形式以保持一致性，并确保浏览器进入标准渲染模式。
1、打开HTML文件的顶部，定位到第一行原有的DOCTYPE声明，例如<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">或<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">。
2、将其完整删除。
立即学习“前端免费学习笔记（深入）”；
3、在文件最顶端（首行）插入：<!DOCTYPE html>。
二、替换<div>为语义化标签
HTML5引入了多个语义化元素，用于明确标识页面不同区域的功能，替代无意义的<div>嵌套，从而增强代码可读性与搜索引擎理解能力。
1、将原本用于页面头部的<div id="header">或<div class="header">替换为<header>。
2、将原本用于主导航区域的<div id="nav">或<div class="navigation">替换为<nav>。
3、将原本用于主要内容区块的<div id="content">或<div class="main">替换为<main>（注意：每个页面仅应有一个<main>，且不可嵌套于<article>、<aside>、<footer>、<header>或<nav>内）。
4、将原本用于文章内容单元的<div class="post">或<div id="article">替换为<article>。
5、将原本用于侧边栏的<div id="sidebar">或<div class="aside">替换为<aside>。
6、将原本用于页脚的<div id="footer">或<div class="bottom">替换为<footer>。
三、验证语义结构完整性
语义标签需按逻辑层级合理嵌套，避免交叉或孤立使用，否则可能影响辅助技术解析及SEO效果。
1、确认<header>、<nav>、<main>、<aside>、<footer>均直接位于<body>内或作为<article>/<section>的子元素，而非彼此的直接子级（如<header>内不应直接包含<footer>）。
2、检查<main>标签未被包裹在<article>中，且全页面仅出现一次。
3、确认<section>用于划分主题性内容区块，每个<section>应有对应的<h2>至<h6>标题；若无标题，优先考虑使用<div>或<article>。
4、验证所有替换后的标签均已闭合，且未出现<header><main></header></main>此类错误嵌套。
四、更新过时的呈现类属性
HTML5废除了部分仅用于样式控制的全局属性（如align、bgcolor、border），应通过CSS接管其功能，确保结构与样式的分离。
1、查找所有含align="center"、align="right"等属性的标签，移除该属性，并在对应CSS选择器中添加text-align: center;或margin: 0 auto;等声明。
2、删除所有bgcolor="#fff"、border="1"等属性，在CSS中使用background-color和border替代。
3、将<font color="red">文本</font>替换为文本，并在CSS中定义对应class，例如.highlight { color: red; }。
五、补充必要的ARIA角色与属性（可选但推荐）
对于动态内容或复杂交互组件，补充WAI-ARIA属性可进一步提升残障用户访问体验，尤其当语义标签不足以表达全部上下文时。
1、为<nav>添加role="navigation"（HTML5中可省略，但保留无害且兼容旧辅助技术）。
2、为<main>添加role="main"（同上，增强兼容性）。
3、若<section>包含可折叠内容，为其容器添加aria-expanded="false"，并在JavaScript中同步更新该属性值。
4、为自定义按钮（如<span onclick="toggle()">展开</span>）添加role="button"及tabindex="0"，使其可键盘聚焦并触发。
