HTML结构清晰取决于语义标签是否携带准确属性：lang必须精确声明（如zh-CN）、避免冗余role/aria-label、meta charset须置于head最前、id/class需语义化命名。
HTML结构是否清晰，不只取决于用了多少个 <header></header> 或 <main></main>，更取决于每个标签是否携带了准确、必要的属性信息。空有语义标签但缺失关键属性，等于给屏幕阅读器递了一张没写地址的快递单。
用 lang 属性声明文档语言
没有 lang 的 标签，会让语音合成器读错发音、搜索引擎误判内容区域、甚至影响某些 CSS 的排版行为（比如中文标点挤压）。
实操建议：
-
是中文站点最低要求，不要只写lang="zh"——zh-CN和zh-TW在标点、用词、字体回退上差异明显 - 如果页面内某段文字是英文引用，应局部覆盖：
<blockquote lang="en">...</blockquote> - 避免在多个嵌套元素上重复设置
lang，父级已设则子级继承，除非语种切换
role 和 aria-* 不要补在语义标签上
给本就具备明确语义的标签硬加 role="navigation" 或 aria-label，不仅多余，还可能覆盖原生语义，导致辅助技术重复播报或跳过内容。
立即学习“前端免费学习笔记（深入）”；
常见错误现象：
-
<nav role="navigation"></nav>——<nav></nav>本身已隐含 navigation role，加了反而干扰 -
<button aria-label="提交">确认</button>—— 按钮内文本已可读，aria-label会屏蔽“确认”，读成“提交” -
<main role="main"></main>—— 同样冗余，且若误写为role="region"可能破坏焦点流
真正需要 aria-* 的场景：自定义组件（如手写的 tab 切换）、动态内容加载后未触发语义更新、或 <div> 确实无法替换成语义标签时。<h3>meta charset 必须放在 head 最前面</h3>
<p><code><meta charset="utf-8"> 如果不在 开头几行，浏览器可能已按默认编码（如 ISO-8859-1）解析了部分 HTML，导致中文乱码或脚本中断 —— 这问题在服务端未显式声明 Content-Type 时尤为突出。
正确顺序示例：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>页面标题</title> <link rel="stylesheet" href="style.css"> </head>
注意：<meta charset> 必须在任何可能含非 ASCII 字符的标签之前，包括 <title></title> —— 即使 <title></title> 写的是中文，也要确保它在 <meta charset> 之后。
id 和 class 命名要兼顾结构与可维护性
一个 id="top" 或 class="box2" 看似能用，但无法传达结构意图，也不利于后续样式复用或 JS 定位逻辑变更。
推荐做法：
- 用语义化前缀：如
id="skip-to-main"（用于跳过导航）、class="article-header"、class="footer-legal" - 避免纯数字或缩写：不用
class="c1"或id="nav1"，除非是临时调试 - JS 绑定优先用
data-*属性，而非依赖class：比如<button data-action="toggle-menu"></button>，避免样式类变动导致 JS 失效
结构越复杂，属性越不能靠“能跑就行”。一个没写 lang 的页面，在国际化测试里可能卡住整个发布流程；一个 meta charset 放错位置的页面，上线后才发现部分用户看到的是方块字 —— 这些都不是后期能轻易热修复的问题。
