语义化标签的语义来自标签名本身，不可乱加role或自定义属性；必须正确使用id、class、lang等标准全局属性，aria-属性仅在必要时补充，且table相关标签须严格配对、嵌套合规。
语义化标签本身不支持自定义属性，但必须正确使用标准属性
HTML语义化标签如 <header></header>、<nav></nav>、<main></main> 本身没有专属“语义属性”，它们的语义来自标签名本身。你不能给 <main></main> 加个 role="main" 来“增强语义”——这反而多余，因为浏览器和读屏器已原生识别它。真正要配置的是通用全局属性，且必须符合规范。
常见错误现象：在 <section></section> 上乱加 data-role="content"，或给 <footer></footer> 写 type="copyright"（该属性不存在）。
-
id和class可用，但仅用于样式或 JS 定位，不改变语义 -
lang、dir、hidden等全局属性可安全使用，有明确语义影响（如lang="zh-CN"告知屏幕阅读器发音规则） -
aria-属性仅在必要时补充，例如<nav aria-label="主导航"></nav>—— 当页面含多个<nav></nav>时才需区分 - 避免给语义标签加
role（除非降级兼容极老辅助技术，且已验证必要性）
table 相关语义标签必须配对使用，否则破坏结构语义
<thead>、<code><tbody>、<code><tfoot> 不是可选装饰，而是表格逻辑分层的强制约定。漏掉 <code><tbody> 或把 <code><th> 直接塞进 <code><table> 顶层，会导致屏幕阅读器无法正确播报行列关系，也影响 CSS 选择器精度。
<p>使用场景：生成报表、后台数据列表、价格对比表等所有含行列逻辑的数据展示。</p>
<ul><li>必须用 <code><th> 表示标题单元格，配合 <code>scope="col" 或 scope="row" 明确作用范围
<caption></caption> 应始终存在，且放在 <table> 开始后第一行，不可用 <code><h2></h2> 替代
<div> 模拟表格结构——语义彻底丢失，SEO 和无障碍双失败
<h3>main、article、aside 的嵌套规则直接影响可访问性树</h3>
<p><code><main></main> 必须全局唯一，且不能出现在 <article></article>、<aside></aside>、<header></header>、<footer></footer>、<nav></nav> 内部。违反这条，屏幕阅读器会跳过或重复播报主内容，搜索引擎也可能忽略主体文本。
容易踩的坑：
- 在
<article></article>里再写一个<main></main>—— 错误。文章内的主要内容就属于该<article></article>，无需额外包裹 - 把侧边栏广告用
<aside></aside>包裹，却放在<main></main>外部（比如紧跟）—— 结构错位，语义弱化 -
<aside></aside>内容必须与所在上下文相关，纯推广链接应慎用，否则被读屏器判定为干扰信息
HTML5 新增表单与媒体属性不能脱离语义标签独立生效
required、autofocus、controls 这些属性只有在对应语义标签内才具备完整意义。把 required 加到 <div> 上毫无作用；给 <code><img> 加 autoplay 会被忽略。
性能与兼容性影响：
-
srcset+sizes必须与<img>或<source></source>（在<picture></picture>内）配合，否则响应式图片加载失效 -
download属性只在<a></a>标签上有效，且仅对同源 URL 生效；跨域链接加了也无下载行为 -
placeholder在<input type="number">中部分浏览器不显示——这不是 bug，是规范允许的行为，别强求
语义标签不是装饰，是结构契约。一旦用了 <main></main>，就得确保它真承载主内容；用了 <figure></figure>，就得配 <figcaption></figcaption>。省略细节看似省事，实则让机器更难理解你的页面。
