技术小站

记录一些能用的东西

本页目录

改造前	改造后	换来什么
`div.t1` 当标题	`header > h1`	大纲有根，读屏可跳标题
`div.nav1 > span`	`nav > ul > li > a` + `aria-label`	地标可跳转、Tab 可达、多导航时能区分名字；`aria-current="page"` 标出当前页
`div.c1` 装正文	`main` + 每篇一个 `article`	正文抽取准确，卡片可独立复用
文字日期	`time datetime`	机器读得到时间，可参与富结果
`div.btn1` 假按钮	标题整条做成 `a`（`a` 可包块级内容）	一个真实链接、命中区域更大、不再需要 JS 绑定跳转
`div.side1`	`aside` + `ul`	与主内容剥离的关系被标出
`div.f1`	`footer`	contentinfo 地标

注意改造后没有增加一个 aria role——全靠原生标签自带语义。role="main"、role="navigation" 这类写法在已有 <main>/<nav> 时是冗余的。