href 主要属于链接，src 主要属于图片和媒体，type 会用在多种控件上。还有一组属性几乎能用于所有 HTML 元素，叫全局属性。我们已经用过其中一些，这一章把它们放回真实场景中检查。
id 给元素一个页面内唯一的标识：
<main id="main-content">
<!-- 主要内容 -->
</main>它常见于三种关系：
<!-- 页面内跳转 -->
<a href="#canal-route">跳到运河路线</a>
<h2 id="canal-route">运河慢行线</h2>
<!-- 表单标签关联 -->
<label for="email">邮箱</label>
<input id="email" name="email" type="email">
<!-- 标题为区域命名 -->
<section aria-labelledby="map-title">
<h2 id="map-title">路线地图</h2>
</section>同一页面不能出现两个 id="email"。重复 id 会让跳转、标签关联和脚本选择目标变得不确定。
多个元素可以共享一个 class：
<article class="route-card">
<h3>运河慢行线</h3>
</article>
<article class="route-card featured">
<h3>老街寻味线</h3>
</article>第二个 article 同时属于 route-card 和 featured 两组。类名通常用来连接 CSS 或 JavaScript。类名应该说明角色或状态，例如 route-card、error-message，不要只写 red-text 这类绑死外观的名称。
id 和 class 不是互相替代：id 标识页面内唯一目标，class 标识可重复的一组元素。
需要为脚本保存与元素相关的数据时，可以使用 data-*：
<article
class="route-card"
data-route-id="canal"
data-distance-km="4"
>
<h3>运河慢行线</h3>
</article>浏览器不会因为这些属性自动改变页面。JavaScript 以后可以通过元素的 dataset 读取它们。
不要把密码、访问令牌或隐私数据放进 data-*。它们会出现在页面源代码和 DOM 中，任何访客都能查看。
整页主要语言已经写在根元素上：
<html lang="zh-CN">如果某个短语使用另一种语言，可以在局部覆盖：
<p><span lang="en">City Walk</span> 通常指在城市中以步行为主的探索活动。</p>这能帮助屏幕阅读器切换发音规则。dir="rtl" 可用于从右向左书写的内容；没有实际需要时不要随意设置。
hidden 会让元素不参与正常显示：
<p id="success-message" hidden>报名信息已提交。</p>脚本可以在提交成功后移除这个属性。它适合暂时不相关的界面状态，但隐藏内容仍可能存在于源代码中，所以不能用来保护秘密。
<abbr title="Global Positioning System">GPS</abbr>title 常以鼠标悬停提示显示，但触屏和键盘环境不一定容易访问它。关键信息应该直接写在正文或可见标签中，不能只藏在 title。
原生链接、按钮和表单控件本来就能通过键盘聚焦。普通内容通常不需要 tabindex。
<!-- 脚本需要在错误发生后把焦点移到这里时，可以使用 -1 -->
<div id="form-errors" tabindex="-1"></div>避免使用正数 tabindex="1"、tabindex="2" 人工重排焦点顺序。它很容易与页面视觉顺序冲突。最可靠的键盘顺序来自合理的 DOM 顺序。
能用原生标签时，先用原生标签：
<!-- 推荐 -->
<button type="submit">提交报名</button>
<!-- 不推荐：需要自己补键盘行为和状态 -->
<div role="button" tabindex="0">提交报名</div>ARIA 适合补充原生结构中缺少的名称、状态或关系，例如：
<nav aria-label="主要导航">...</nav>
<a href="routes.html" aria-current="page">路线</a>
<section aria-labelledby="map-title">...</section>ARIA 不会自动添加点击行为、键盘操作或样式。错误的 ARIA 甚至会覆盖原生语义。
先在浏览器中做一次人工检查：
只使用键盘的 Tab、Shift + Tab 和 Enter，在四个页面之间移动。确认焦点能依次到达导航、正文链接和表单控件。
在开发者工具“元素”面板搜索 id=，检查每个 id 是否唯一，并确认所有 for、href="#..." 和 aria-labelledby 都能找到目标。
在“网络”面板刷新页面，检查图片、图标、音频、视频和字幕是否出现 404。
使用 HTML 验证器检查漏写的结束标签、错误嵌套、重复 id 和无效属性。修复第一条结构错误后再重新验证，因为一个早期错误可能引发多条后续提示。
常见错误可以按现象定位：
在四个页面中逐项完成：
lang="zh-CN"。main-content、路线锚点、表单控件等 id 不重复。aria-current="page"，其他链接没有。alt。iframe 都有说明内容的 title。name。tabindex，也没有用 title 代替正文说明。完成这次巡检后，你已经不只是“让页面显示出来”，而是在维护一份可导航、可理解、能被检查的 HTML 文档。最后一章会把四个页面整理成可交付版本，并给出完整代码和验收顺序。