正文

新手写网页总被同事吐槽代码乱用div标签堆砌 一文讲清headersectionfooternav等HTML5语义化标签正确用法让SEO和可访问性同时提升

/0 浏览量
0908

新手写网页总被同事吐槽代码乱用div标签堆砌 一文讲清headersectionfooternav等HTML5语义化标签正确用法让SEO和可访问性同时提升

你肯定遇到过这种情况：打开同事的代码审查，满屏都是 <div class="header">、<div class="nav">、<div class="footer">，然后你就忍不住吐槽：”你这代码看着太累了。”

但说实话，刚入门的时候，我也犯过同样的错误。觉得所有东西都是方方正正的盒子，就用div一盖，省事。后来被老鸟教育了一顿，才发现原来HTML5早就给我们准备了一套”专用工具”，只是我们一直没学会用。

这篇文章就想掰开揉碎，把那些语义化标签给你讲清楚。不是那种教科书式的罗列，而是我踩过坑之后的真实体会。

先说个故事：为什么div用多了会被骂

去年我带一个新来的实习生，他写了一个公司的官网首页。打开代码一看：

<div class="page-wrapper">
  <div class="top-bar">
    <div class="logo">
      <div class="logo-img">
        <img src="logo.png" alt="公司logo">
      </div>
      <div class="logo-text">某某公司</div>
    </div>
    <div class="contact-info">
      <div class="phone">400-123-4567</div>
      <div class="email">contact@example.com</div>
    </div>
  </div>
  <div class="header">
    <div class="nav-container">
      <div class="nav-list">
        <div class="nav-item">
          <a href="/">首页</a>
        </div>
        <div class="nav-item">
          <a href="/products">产品</a>
        </div>
        <div class="nav-item">
          <a href="/about">关于</a>
        </div>
        <div class="nav-item">
          <a href="/contact">联系我们</a>
        </div>
      </div>
    </div>
  </div>
  <div class="banner">
    <div class="banner-content">
      <div class="banner-title">欢迎来到我们公司</div>
      <div class="banner-desc">我们致力于提供最优质的服务</div>
      <div class="banner-btn">
        <div class="btn-primary">了解更多</div>
      </div>
    </div>
  </div>
  <div class="main-content">
    <div class="features">
      <div class="feature-item">
        <div class="feature-icon">🚀</div>
        <div class="feature-title">快速</div>
        <div class="feature-desc">极速响应</div>
      </div>
      <div class="feature-item">
        <div class="feature-icon">🔒</div>
        <div class="feature-title">安全</div>
        <div class="feature-desc">安全可靠</div>
      </div>
      <div class="feature-item">
        <div class="feature-icon">💡</div>
        <div class="feature-title">智能</div>
        <div class="feature-desc">智能推荐</div>
      </div>
    </div>
  </div>
  <div class="footer">
    <div class="footer-content">
      <div class="footer-links">
        <div class="footer-link-item">
          <a href="/privacy">隐私政策</a>
        </div>
        <div class="footer-link-item">
          <a href="/terms">服务条款</a>
        </div>
      </div>
      <div class="copyright">© 2024 某某公司</div>
    </div>
  </div>
</div>

我盯着这堆代码看了三秒钟，感觉心脏有点疼。三百多行代码，全是用div嵌套出来的”套娃”。这时候同事走过来说：”你这代码，读起来像天书，搜索引擎也看不懂。”

我当时的反应是：”不就是div吗？写起来简单啊。”

同事笑了笑：”div确实万能，但万能不等于好用。你想想，如果你是搜索引擎，看到这一堆div，你怎么知道哪个是导航，哪个是正文，哪个是页脚？你只能靠类名猜，猜错了就是猜错了。”

这句话让我一下子醒悟了。原来div就像是一个空白的盒子，它本身没有任何含义。你用class给盒子贴标签，只是给人看的，机器可不会读你的class。

语义化标签是什么？为什么它这么重要

简单来说，语义化标签就是HTML5提供的一系列”有含义”的标签。它们告诉浏览器、搜索引擎、屏幕阅读器，这段内容到底是什么。

比如，你想表达”这是网站的头部”，用div你要写：

<div class="header">头部内容</div>

而用语义化标签，你只需要写：

<header>头部内容</header>

看起来差不多？但差别大了。

对搜索引擎来说，<header> 明确告诉它”这是头部”，而不是”这是一个名叫header的div”。搜索引擎的爬虫会优先抓取有语义的标签，理解页面结构，从而更好地判断页面内容的重要性。

对屏幕阅读器来说，视障用户用屏幕阅读器浏览网页时，他们可以跳转到页面的某个特定区域。比如按快捷键直接跳到导航，或者跳到主要内容。如果整个页面都是div，屏幕阅读器就只能从头到尾朗读，体验极差。

对其他开发者来说，看到 <nav> 就知道这是导航，看到 <article> 就知道这是一篇文章，阅读代码的速度和准确性都会大幅提升。

header标签：别把它当成所有页面的”顶部”

这是新手最容易踩的坑之一。很多人觉得header就是网站最顶上的那个区域，于是每个页面都写一个<header>。

但实际上，<header> 的语义是”介绍性内容”，它可以出现在页面的任何地方，用来介绍它所在的那个区域。

来看一个常见的错误用法：

<!-- 错误示范：整个页面只有一个header -->
<body>
  <header>
    <div class="logo">Logo</div>
    <nav>导航</nav>
  </header>
  
  <section>
    <header>
      <h1>文章标题</h1>
      <p>作者信息</p>
    </header>
    <p>文章内容...</p>
  </section>
  
  <footer>页脚</footer>
</body>

这样写其实没问题，但很多人会犯另一个错误：把header当成布局容器，往里面塞一堆不相干的东西。

<!-- 错误示范：header里塞了不该塞的东西 -->
<header>
  <div class="logo">Logo</div>
  <nav>导航</nav>
  <div class="search-box">搜索框</div>
  <div class="user-menu">用户菜单</div>
  <div class="advertisement">广告</div>  <!-- 广告不该在这里 -->
  <div class="breadcrumb">面包屑</div>   <!-- 面包屑也不该在这里 -->
</header>

header应该只包含介绍性的内容：Logo、站点标题、导航、搜索框等。广告、面包屑这些属于功能性或导航性的内容，应该放在它们合适的位置。

正确的用法应该是这样的：

<body>
  <!-- 网站级别的header -->
  <header class="site-header">
    <div class="logo">
      <a href="/">
        <img src="logo.svg" alt="公司Logo">
        <span>某某公司</span>
      </a>
    </div>
    <nav class="main-nav">
      <ul>
        <li><a href="/">首页</a></li>
        <li><a href="/products">产品</a></li>
        <li><a href="/about">关于</a></li>
        <li><a href="/contact">联系我们</a></li>
      </ul>
    </nav>
    <div class="header-actions">
      <div class="search-box">
        <input type="search" placeholder="搜索...">
      </div>
      <div class="user-menu">
        <a href="/login">登录</a>
      </div>
    </div>
  </header>

  <!-- 页面主要内容 -->
  <main>
    <!-- 文章级别的header -->
    <header>
      <h1>HTML5语义化标签完全指南</h1>
      <p>发布于 <time datetime="2024-01-15">2024年1月15日</time> | 作者：张三</p>
    </header>
    
    <article>
      <p>正文内容...</p>
    </article>
  </main>

  <!-- 页脚 -->
  <footer class="site-footer">
    <div class="footer-links">
      <a href="/privacy">隐私政策</a>
      <a href="/terms">服务条款</a>
      <a href="/sitemap">网站地图</a>
    </div>
    <p>© 2024 某某公司</p>
  </footer>
</body>

注意看，这里用了两个header。一个是网站级别的header，包含Logo、导航、搜索等。另一个是文章级别的header，包含文章标题和元信息。这是完全合法的，也是推荐的做法。

nav标签：导航就该有自己的家

-- 展开阅读全文 --