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