html5 nav 怎么用,html5 NAV TAG正确使用(html5 NAV TAG proper usage)

html5 NAV TAG正确使用(html5 NAV TAG proper usage)

我已经开始在我的页面上使用html标签，并且我试图确定NAV标签的正确用法。 我已经阅读了文档，看起来我应该对自己的产品感到满意，但是我注意到其他大多数开发人员在“ul”“li”标签中都有导航“块”。 我使用div。

我的问题是，使用“ul”“li”标签而不是div的优点/缺点是什么？

以下将使用导航？

I've begun to use html tags on my pages, and I'm trying to determine what is the proper usage of the NAV tag. I've read the documentation, and it seems like I should be okay with what I have, but I noticed that most other developers have their navigation 'blocks' within "ul" "li" tags. I've using divs.

My question is, what are the pros / cons to using "ul" "li" tags rather than divs?

And would the following work with nav?

原文：https://stackoverflow.com/questions/7002854

更新时间：2021-05-07 13:05

最满意答案

您发布的代码不是最佳做法。 它应该是：

• 和
• 标签比使用div标签更好，几乎总是用于菜单。 通过使用ul s和li s，您不会因为WAY太多ID而阻塞您的代码。

  The code you posted isn't a best practice. It should be:

  • and
  • tags are better than using div tags, and are almost always used for menus. By using uls and lis, you don't clog up your code with WAY too many IDs.

    相关问答

    引用规格： nav元素表示链接到其他页面或页面内部分的页面部分：包含导航链接的部分。 并非页面上的所有链接组都需要位于导航元素中 - 只有由主要导航块组成的部分适用于导航元素。 特别是，页脚通常有一个链接到网站各个页面的简短列表，例如服务条款，主页和版权页。 没有导航元素的情况下，单独使用页脚元素就足够了。 因此，请随意将它们都包装在一个导航标签中。 不要包装页脚，但在这里使用页脚标签:) 阅读这里的规格： http : //dev.w3.org/html5/spec/Overview.html#

    ...

    这两个例子都是语义的。 在第一个例子中，锚点列表明确是一个无序列表。 在第二个例子中，链接列表只是锚元素的集合。 如果你只是想要一个链接的一维集合，我建议坚持

    Link

    Link

    Link

    然而，使用ul元素允许显式的分层菜单(如下拉菜单或树列表)：

    • Link

    ...

    那么你可以争辩说，不包括HTML5标签增加了你的HTML文件的可读性。 但是，对于搜索引擎优化的目的，使用html5标签可能有助于您的网页排名，所以如果您正在开发商业网页，这可能是一个考虑因素。 在这个特例中，如果

  • 目的不是用于导航，那么我怀疑你会对它有任何批评。 Well you could argue that not including html5 tags increases the readability of your html file. However, for SEO pu

    ...

    nav用于内部链接( a元素)组。 通常这意味着链接应该移动到单独的页面，或者在AJAX页面的情况下更改内容。 点击nav项目时，可能会改变某种内容。 menu用于控件组( a ， input ， button )。 通常这意味着输入应该在页面内执行一个功能。 当点击menu项时，期待某种JavaScript交互。 nav ：该网站的导航 。 menu ：Web应用程序的菜单 。 nav is used for groups of internal links (a elements). Gene

    ...

    您可以自己确定主要导航链接是什么。 你必须这样看：你的主要导航链接是对使用你网站的人很重要的链接，当然包括你自己。 因此，如果您认为在导航器上某处有快速登录链接会很好，那么是，登录应该在您的导航中。 没有人会检查你的导航是否正确，没有人会责怪你在你的导航中添加登录链接。 You can determine all by yourself what a major nav link is. You have to see it like this: Your Major Navigation lin

    ...

    直接从马的嘴巴： http://dev.w3.org/html5/spec-author-view/interactive-elements.html#menus 菜单元素表示一系列命令。 例如：

    New...

    Open...

    ...

    没有垫片，IE7将无法识别导航标签(或其他仅支持html5的元素)。 我知道的最流行的解决方案是html5shiv： https://github.com/aFarkas/html5shiv 如果您想了解更多相关信息，可以在此处执行此操作： http://paulirish.com/2011/the-history-of-the-html5-shiv/ IE7 won't recognize the nav tag (or other html5-only elements) without a

    ...

    您发布的代码不是最佳做法。 它应该是：

• 和
• 标签比使用div标签更好，几乎总是用于菜单。 通过使用ul s和li s，您不会因为WAY太多ID而阻塞您的代码。 The code you posted isn't a be

  ...

  这不是多余的。 DOM元素nav与CSS类nav 。 如果您想按类设置此元素的样式，则可以使用此样式声明(例如)： .nav { background-color : #F00; }

  如果按元素类型设置样式，它将是： nav { background-color : #F00; }

  这可能看似微不足道，但那个时期. 有所作为。 这意味着您要按类识别项目，而不是按元素名称识别项目。 如果您使用类语法(使用. )，那么您还可以编写：

  如果您包含类定

  ...

  - 被认为与页面主要内容分开的内容 您可以将主要内容放入元素中。

  - 用于图表，插图，照片和代码示例 由于徽标不是独立的单位，我不会使用图形元素。 考虑将该图像设置为页面背景或其他东西 - 它只是一个图像，因此这里不需要太多标记。 - 可以是论坛帖子，杂志或报纸文章，博客文章，用户提交的评论，互动小部件或小工具或任何其他独立内容项目 资料来源： http : //html5doctor.com/the-article-elem

  ...