写页面时,先把标题、正文、导航和补充信息分清楚。语义化标签不只是换一种写法,它能让浏览器、搜索工具和辅助技术更准确地理解内容。
- 用
header和nav表达站点导航,把主要内容放进main。 - 标题按内容层级组织,不要仅为了字号选择标题级别。
- 图片提供贴合内容的替代文本;装饰图片使用空的
alt。 - 操作用按钮,跳转用链接,并保留清晰可见的键盘焦点。
<main>
<article>
<h1>一篇开发笔记</h1>
<p>先把内容结构表达清楚。</p>
</article>
</main>
布局完成后,检查长标题、窄窗口和键盘操作。页面能在没有脚本的情况下展示核心内容,通常也是一个值得保留的基础。
延伸阅读:MDN 的语义说明