应优先使用、、、、等语义化标签替代和，其中每页唯一且不可嵌套，须有主题和标题，用于可独立分发内容，表相关补充信息，误用会破坏无障碍访问与SEO结构。
直接用语义化标签代替 <div> 和 <code><span></span>，不是“加 class 模拟语义”，而是让浏览器、屏幕阅读器和搜索引擎天然理解结构。
哪些标签该用在什么位置
选错标签比不写样式更危险——它会让辅助技术误读内容层级或忽略关键区块。
-
<main></main>必须且只能出现一次，包裹页面核心内容；嵌套多个<main></main>会被屏幕阅读器当作错误结构处理 -
<section></section>不是“画个盒子”，它需要有明确主题和标题（<h2></h2>–<h6></h6>），否则不如用<div> <li> <code><article></article>用于可独立分发的内容（如博客正文、新闻条目），内部应含<header></header>或时间信息，不能只包一段<p></p> -
<aside></aside>不是“右边那栏”，而是与当前上下文相关但非必需的补充信息；广告、作者简介可用，但导航菜单必须用<nav></nav> - 现代浏览器基本能正确解析，但无障碍测试工具（如 axe、WAVE）仍会标记为“语义冗余”
- 真正需要 wrapper 的场景（如全屏背景、动效容器），用
<div> 没问题，但别让它成为语义标签的父级 <li>若需 CSS 布局控制，直接给 <code><main></main>或<section></section>加 class，而不是套一层<div> <h3>表单和列表必须严格匹配语义类型</h3> <p>用错列表类型或表单结构，会导致屏幕阅读器跳过整块内容，或把术语解释读成无序项目。</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审">使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审</a> <p>使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。</p> </div> <a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <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><dl></dl>是唯一合法承载术语+描述对的标签；用<ul></ul>+<li>模拟参数表，会丢失“键值关联”语义 -
<fieldset></fieldset>+<legend></legend>是分组控件的强制规范；仅靠视觉缩进或 class 分组，对键盘用户不可见 - 每个
<input>必须有显式<label></label>（for+id关联），<label></label>内包裹<input>也合法，但不可省略
常见错误：用 div 包裹语义标签反而破坏结构
比如 <div class="main-wrapper"><main>...</main></div> 看似无害，但某些旧版屏幕阅读器会优先识别外层 <div> 的 class 名而非内层 <code><main></main> 的语义角色。
最常被忽略的是文档大纲完整性：<h1></h1> 到 <h6></h6> 的层级断层、跳级（如 <h2></h2> 后直接 <h4></h4>）、或在 <aside></aside> 里放 <h1></h1>，都会让结构解析失效。语义不是装饰，是浏览器和辅助工具赖以工作的协议。
