当前位置：Gxlcms > html代码 > html导航菜单为什么都用li+a标签，而不直接用a标签，或者用nav+a标签，html5中导航菜单该怎样写？

html导航菜单为什么都用li+a标签，而不直接用a标签，或者用nav+a标签，html5中导航菜单该怎样写？

时间：2021-07-01 10:21:17 帮助过：6人阅读

回复内容：

HTML5 很多新的元素容易产生误解，其中有一部分原因是因为有些元素本身有歧义，所表达的语义在规范中也是在不断修正的。

并不是指视觉上的导航栏，而是表示带有导航性质的内容，准确的说：

元素表示一个包含多个链接的区域，这些链接指向其他页面或本页面的其他部分。

需要注意以下几点：

并不是所有的链接都要放到 nav 元素里面，该元素内应包含用于构成主要导航区块的部分。举个反例，通常页脚有链接列表链接到网站的其他页面，比如：服务、首页、版权页。这种情况下，仅仅用 footer 元素就够了，没必要使用 nav 元素。
如果nav 元素里面的内容描述的是一个项目列表，那就应该用列表标记（ol,ul等）帮助理解（增强语义）和导航。
用户代理（如屏幕阅读器）可以通过该元素来确定页面上哪些内容可以直接跳过或者按要求提供选择。

所以通常一个页面导航可以这样写：


  
     href="index.html">Home
     href="#about">About
     href="#">Contact

从实现的角度来说你可以用任何标签来实现，但是为了语义化，为了搜索引擎友好通常都会这么写。

【HTML5触屏滑动侧边栏导航菜单特效】

特效说明：

一款HTML5触屏滑动侧边栏导航菜单特效下载，该Bootstrap导航菜单特效是一款基于jquery+html5实现的兼容手机和PC端动画导航菜单插件，响应式网站建设必备代码素材。请用支持HTML5+CSS3主流浏览器预览效果。（兼容测试：IE9、Firefox、Chrome、Opera、Safari、360等支持HTML5+CSS3主流浏览器）

使用方法：

1、调用CSS样式：

2、调用JS插件代码：
因为语义化标签。
简单的罗列出的导航菜单只是一盘散沙，互相之间没有任何联系，于SEO于屏幕阅读器都不友好。
而

的形式可以明确的表达出各个
之间是相关的，他们是一类内容。
赞同 @一丝对nav标签的使用说明。

html导航菜单为什么都用li+a标签，而不直接用a标签，或者用nav+a标签，html5中导航菜单该怎样写？

回复内容：

人气教程排行