HTML5导航标记内容

前端之家收集整理的这篇文章主要介绍了HTML5导航标记内容前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
与< nav>相关的文档中似乎存在相互矛盾的示例.标记html5中.我见过的大多数例子都使用了这个:
  1. <nav>
  2. <ul>
  3. <li><a href='#'>Link</a></li>
  4. <li><a href='#'>Link</a></li>
  5. <li><a href='#'>Link</a></li>
  6. </ul>
  7. </nav>

但我想知道这是否只是因为人们习惯使用div.我见过的例子就是这样做

  1. <nav>
  2. <a href='#'>Link</a>
  3. <a href='#'>Link</a>
  4. <a href='#'>Link</a>
  5. </nav>

第二种方式对我来说似乎更清晰,更具语义性.有“官方”正确的版本吗?是否有充分的理由继续使用< ul>在nav标签内,而不是直接使用锚元素?

解决方法

这两个例子都是语义的.

在第一个示例中,锚列表显式为无序列表.在第二个示例中,链接列表只是一个锚元素的集合.

如果你只是想要一个一维的链接集合,我建议你坚持下去

  1. <nav>
  2. <a href='#'>Link</a>
  3. <a href='#'>Link</a>
  4. <a href='#'>Link</a>
  5. </nav>

但是,使用ul元素允许显式分层菜单(例如下拉列表或树列表):

  1. <nav>
  2. <ul>
  3. <li>
  4. <a href="#">Link</a>
  5. </li>
  6. <li>
  7. <a href="#">Link</a>
  8. <ul>
  9. <li>
  10. <a href="#">Sub link</a>
  11. </li>
  12. <li>
  13. <a href="#">Sub link</a>
  14. </li>
  15. <li>
  16. <a href="#">Sub link</a>
  17. </li>
  18. </ul>
  19. </li>
  20. <li>
  21. <a href="#">Link</a>
  22. </li>
  23. <li>
  24. <a href="#">Link</a>
  25. <ul>
  26. <li>
  27. <a href="#">Sub link</a>
  28. </li>
  29. <li>
  30. <a href="#">Sub link</a>
  31. </li>
  32. </ul>
  33. </li>
  34. </ul>
  35. </nav>

猜你在找的HTML5相关文章