正好可以作为课堂里的“思考题”来引导学生理解 语义化标签 和 无障碍属性。

1. 为什么要用 <nav> 而不是 <div>？

（1）从 HTML 语义 角度

• <div>：只是一个无语义的容器，相当于一个“盒子”，不会告诉浏览器和搜索引擎“里面是什么内容”。
• <nav>：专门表示 导航区块，告诉浏览器、搜索引擎、屏幕阅读器“这是导航菜单”。

（2）对 SEO（搜索引擎优化） 的好处

• 搜索引擎（百度/Google）遇到 <nav> 时，会优先识别其中的链接是“网站导航”。
• 用 <div> 就没有这种信息，SEO 效果较差。

（3）对 无障碍（Accessibility） 的好处

• 屏幕阅读器会直接读出 “导航（navigation landmark）”，帮助盲人用户快速跳转到导航区域。
• 如果只是 <div>，读屏器只能读出“分区”，没法知道这是导航。

👉 所以：用 <nav> 是 语义明确、利于SEO、友好无障碍；用 <div> 虽然功能上没问题，但缺乏这些额外价值。

2. 为什么要有 aria-expanded？

（1）这是一个 ARIA 属性，用来表示按钮的“展开/收起”状态

• 当 aria-expanded="false"：表示这个按钮控制的菜单当前是关闭的。
• 当 aria-expanded="true"：表示这个按钮控制的菜单当前是展开的。

（2）对 键盘/读屏用户 的帮助

• 普通用户能“看见”菜单展开或收起，但盲人用户依靠屏幕阅读器。