正文

孩子都懂HTML5语义标签用nav替代div老犯错的正确写法教程

/0 浏览量
0913

嘿，小朋友，你是不是也遇到过这种情况？明明写了 <nav>，结果网页跑起来跟用了 <div> 没什么两样，或者浏览器提示你“这个标签用错地方了”。别急，这其实不是 nav 的错，而是我们把它用在了奇怪的地方。今天咱们就一边喝茶一边聊聊，怎么才算是真的“懂”了 <nav> 这个标签。

先别急着否定 div，它们各有各的活儿

在讲 <nav> 之前，咱们得先搞清楚一个误区：很多人觉得 nav 就是“高级的 div”，可以随便替换。错啦！div 是个盒子，啥都能装；但 nav 是个“导航员”，它只管带路的事情。

想象一下，你在家里的地图上画了一条线，从卧室指到客厅，再从客厅指到厨房。这条“带路的线”就是导航。如果你的地图里有一个框框，里面画的是你昨天吃的苹果，那这个框框能叫“导航”吗？当然不能，那是“内容”。

HTML5 引入语义标签，就是为了告诉浏览器：“嘿，这一块是给人看的导航，那一块是给人读的文章。”这样，搜索引擎、屏幕阅读器（给视障人士用的工具）、还有未来的智能设备，都能更快地理解你的网页。

什么时候该用 nav？记住这三个场景

根据 Web 标准（W3C）的说法，<nav> 标签最适合包裹主要的导航链接。咱们来个生活中的类比：

  • 网站的主菜单：比如顶部的“首页、关于、联系、产品”。
  • 页脚链接：比如底部的“隐私政策、使用条款、网站地图”。
  • 目录：比如一篇文章开头的“1. 简介 2. 原理 3. 示例”。

但是！请注意这个但是：

如果这些链接只是“看起来像导航”，但实际上是文章里的一部分内容，那就千万别用 nav。

举个例子：你在写一篇《如何煮鸡蛋》的文章，文章中间有一段说：“除了水煮蛋，你还可以试试蒸鸡蛋或者炒鸡蛋。” 这里的链接是文章的一部分，应该用 <p> 或者 <section> 包起来，而不是 <nav>。因为读者是在“阅读”这些建议，不是在“导航”到另一个页面。

老犯错的三种典型姿势，你中招了吗？

错误一：把面包屑（Breadcrumb）硬塞进 nav

很多新手开发者喜欢把“首页 > 产品 > 电子产品”这种面包屑导航用 <nav> 包起来。

这真的错了吗？

其实，不算完全错，但要注意上下文。如果面包屑只是当前页面的辅助定位，用 <nav> 是可以的。但如果你把文章侧边栏里的一堆分类链接全塞进一个 <nav>，浏览器可能会困惑：这到底是我该重点看的导航，还是旁边的装饰？

正确做法： 给每个 <nav> 加个 aria-label，告诉浏览器它到底是什么。

<!-- 正确的面包屑 -->
<nav aria-label="面包屑导航">
  <ol>
    <li><a href="/">首页</a></li>
    <li><a href="/products">产品</a></li>
    <li><a href="/products/electronics">电子产品</a></li>
  </ol>
</nav>

错误二：用 nav 包裹整个页面的主要内容

你是不是见过这种代码：

<nav>
  <h1>欢迎来到我的世界</h1>
  <p>我是小明，一个热爱编程的孩子。</p>
  <img src="me.jpg" alt="我的照片">
</nav>

大错特错！ <nav> 不是用来装内容的。内容请用 <main> 或者 <article>。<nav> 里应该只有链接，而且是起到“指引方向”作用的链接。如果你在里面放了图片、大段文字，屏幕阅读器会以为这些也是导航，读出来的时候会把“欢迎来到我的世界”当成一个链接读给你听，这可就尴尬了。

错误三：忽略了无障碍访问（Accessibility）

这是最容易被忽视的一点。<nav> 标签本身已经给了浏览器一个语义信号：“这里是导航区域”。但如果你不用 aria-label 区分不同的导航，用户可能分不清哪个是“主菜单”，哪个是“页脚链接”。

正确做法： 每个 <nav> 都应该有一个明确的标签，除非只有一个导航在页面上。

<!-- 只有一个导航时，可以省略 aria-label -->
<nav>
  <ul>
    <li><a href="/">首页</a></li>
    <li><a href="/about">关于</a></li>
  </ul>
</nav>

<!-- 有多个导航时，必须加 aria-label -->
<nav aria-label="主导航">
  <ul>
    <li><a href="/">首页</a></li>
    <li><a href="/about">关于</a></li>
  </ul>
</nav>

<nav aria-label="页脚导航">
  <ul>
    <li><a href="/privacy">隐私政策</a></li>
    <li><a href="/terms">使用条款</a></li>
  </ul>
</nav>

来，动手写个正确的例子

咱们写一个简单的个人主页，看看 nav 该怎么用。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>小明的编程小天地</title>
  <style>
    /* 简单的美化，让导航看起来像导航 */
    nav ul {
      list-style: none;
      padding: 0;
      background-color: #f0f0f0;
      border-radius: 8px;
    }
    nav li {
      display: inline-block;
      margin-right: 20px;
    }
    nav a {
      text-decoration: none;
      color: #333;
      font-weight: bold;
    }
    nav a:hover {
      color: #007bff;
    }
    main {
      margin-top: 20px;
    }
  </style>
</head>
<body>

  <!-- 主导航：这是最重要的导航，告诉用户怎么在网站里转 -->
  <nav aria-label="主导航">
    <ul>
      <li><a href="/">首页</a></li>
      <li><a href="/projects">项目</a></li>
      <li><a href="/blog">博客</a></li>
      <li><a href="/contact">联系我</a></li>
    </ul>
  </nav>

  <!-- 主要内容区：这里是文章，不是导航 -->
  <main>
    <h1>你好，我是小明！</h1>
    <p>我喜欢写代码，尤其是 HTML 和 CSS。</p>
    <p>今天，我学会了怎么用 <code>&lt;nav&gt;</code> 标签。</p>
  </main>

  <!-- 页脚导航：这是次要的导航，告诉用户法律和政策 -->
  <nav aria-label="页脚导航">
    <ul>
      <li><a href="/privacy">隐私政策</a></li>
      <li><a href="/sitemap">站点地图</a></li>
    </ul>
  </nav>

</body>
</html>

为什么这样做很重要？

你可能会问：“用 <div> 包起来不行吗？不也能显示？”

行，当然行。但你想过没有，如果有一个小朋友眼睛看不见，他靠屏幕阅读器上网，他会怎么感知你的网页？

  • 如果用了 <nav>，屏幕阅读器会说：“导航区域，主导航，里面有4个链接。” 然后用户可以快速跳转到导航，或者直接跳过导航去读正文。
  • 如果用 <div>，屏幕阅读器只会说：“一段文字，里面有链接。” 用户就得一个一个点过去，累不累？

所以，用 <nav> 不是为了装酷，而是为了让所有人都能平等地访问你的网页。这就是“语义化”的真正意义。

最后的小贴士

  1. 不要滥用：一个页面通常只需要 1-3 个 <nav>，多了反而让人困惑。
  2. 不要嵌套太多层：导航里面再嵌套导航，除非是 mega menu（超大菜单），否则别这么干。
  3. 加 aria-label：这是区分不同导航区域最简单的方法。
  4. 记住：nav 是给“路标”用的，不是给“风景”用的。

好了，今天的教程就到这里。下次写代码的时候，不妨停下来想一想：这个 <div> 是不是真的需要一个更有身份的 <nav> 呢？祝你写出既漂亮又友好的网页！

-- 展开阅读全文 --