制作导航栏：<nav><a>与<nav><ul><li><a>哪种方案更合适？

首先纠正你给出的代码示例2的写法问题：示例2里所有链接都放在同一个<li>里是不规范的，正确的列表式导航应该每个导航项对应一个独立的<li>，写法如下：

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Login</a></li>
    <li><a href="#">Register</a></li>
  </ul>
</nav>

接下来从核心维度分析两种结构的合理性：

1. 语义化与可访问性 #

导航栏本质是一组相关的导航链接集合，<ul><li>的结构能明确传递“列表”语义：浏览器和屏幕阅读器会识别这是一组有序/无序列表，屏幕阅读器会向视障用户播报“包含N个项目的导航列表”，帮助用户理解内容的组织结构。

而直接用<nav>包裹零散的<a>，虽然<nav>本身标记了导航区域，但里面的链接只是孤立的行内元素，没有明确的分组语义，对于依赖辅助设备的用户来说，体验会打折扣。

2. 样式与扩展性 #

• 直接用<nav><a>确实能减少嵌套层级，CSS写起来更省事——不用重置<ul>的默认内边距、外边距，也不用清除<li>的默认列表符号，但这种优势只限于极简的单级导航场景。
• 如果后续需要给导航项加子菜单、图标、消息徽章等额外内容，<ul><li>的结构扩展性要强得多：每个<li>可以作为独立容器，轻松包裹更多元素；而直接用<a>的话，后续扩展大概率要重构结构，反而增加成本。
• 另外，在响应式布局中，列表结构的样式逻辑更清晰：比如用Flex布局时，<ul>作为容器，<li>作为子项，天然的层级划分让布局调整更直观。

3. 规范结论 #

如果是完全不会扩展的极简单级导航，<nav><a>的写法能正常工作，但从语义化、可访问性的前端最佳实践出发，更推荐使用<nav><ul><li><a>的结构——这是行业公认的标准写法，既符合HTML的语义设计原则，也能更好地适配各类用户和未来的功能扩展。

内容的提问来源于stack exchange，提问作者Aqmal Mahissa Gunawan