PHP小码农

Appearance

语义化 vs div 布局 ​

在实际项目中，开发者需要在语义化标签和 <div> 之间做出选择。本节通过对比示例和改造策略，帮助你在不同场景下做出正确的标签选择，实现从传统 div 布局到语义化布局的渐进式迁移。

前置知识

阅读本节前，建议先了解：dialog 对话框

基础概念 ​

核心原则 ​

选择标签的决策优先级：

  1. 语义化标签优先：如果内容有明确语义，使用对应的语义化标签
  2. div 作为补充：只在纯布局/样式目的时使用 div
  3. 渐进式改造：旧项目逐步替换，不要求一步到位
html
<!-- 决策流程 -->
<!--
  这段内容有明确语义吗？
  ├── 是：文章 → <article>
  │      ├── 导航 → <nav>
  │      ├── 章节 → <section>
  │      ├── 侧边栏 → <aside>
  │      ├── 头部 → <header>
  │      └── 底部 → <footer>
  └── 否：纯布局 → <div>
-->

语法与使用 ​

对决策表 ​

内容特征推荐标签div 可替代说明
页面/区块头部<header>是header 更好
导航链接组<nav>是nav 更好
主内容区<main>否必须用 main
独立文章<article>是article 更好
有标题的章节<section>否必须有标题
辅助内容<aside>是aside 更好
页面/区块底部<footer>是footer 更好
Flexbox/Grid 容器<div>-纯布局
JS 操作目标<div>-纯交互

详细说明 ​

改造前后对比 ​

示例 1：博客文章页 ​

html
<!-- 改造前：纯 div 布局 -->
<div class="wrapper">
  <div class="header">
    <div class="logo">TechBlog</div>
    <div class="menu">
      <a href="/">首页</a>
      <a href="/blog">博客</a>
    </div>
  </div>
  <div class="content">
    <div class="main-content">
      <div class="post">
        <div class="post-title">文章标题</div>
        <div class="post-meta">2024-01-15 | 张三</div>
        <div class="post-body">正文内容...</div>
      </div>
    </div>
    <div class="sidebar">
      <div class="widget">相关文章</div>
    </div>
  </div>
  <div class="footer">
    <p>&copy; 2024 TechBlog</p>
  </div>
</div>

<!-- 改造后：语义化布局 -->
<div class="wrapper">
  <header class="site-header">
    <h1 class="logo">TechBlog</h1>
    <nav class="menu" aria-label="主导航">
      <a href="/">首页</a>
      <a href="/blog">博客</a>
    </nav>
  </header>
  <main>
    <article class="post">
      <header>
        <h1>文章标题</h1>
        <p class="post-meta">
          <time datetime="2024-01-15">2024 年 1 月 15 日</time> |
          <address>张三</address>
        </p>
      </header>
      <p>正文内容...</p>
    </article>
  </main>
  <aside class="sidebar">
    <div class="widget">相关文章</div>
  </aside>
  <footer class="site-footer">
    <p>&copy; 2024 TechBlog</p>
  </footer>
</div>

示例 2：电商产品页 ​

html
<!-- 改造前 -->
<div class="page">
  <div class="top-bar">
    <div class="user-links">登录 | 注册</div>
  </div>
  <div class="main-area">
    <div class="product-detail">
      <div class="product-title">产品名称</div>
      <div class="product-price">¥999</div>
      <div class="product-desc">产品描述...</div>
    </div>
    <div class="reviews">
      <div class="review-item">用户评论...</div>
    </div>
  </div>
</div>

<!-- 改造后 -->
<div class="page">
  <header class="top-bar">
    <nav aria-label="用户导航">
      <a href="/login">登录</a> |
      <a href="/register">注册</a>
    </nav>
  </header>
  <main class="main-area">
    <article class="product-detail">
      <h1 class="product-title">产品名称</h1>
      <p class="product-price">¥999</p>
      <p class="product-desc">产品描述...</p>
    </article>
    <section class="reviews">
      <h2>用户评价</h2>
      <article class="review-item">
        <p>用户评论...</p>
      </article>
    </section>
  </main>
</div>

改造策略 ​

渐进增强三步法 ​

第一步：添加 main 和 nav（最高优先级）

html
<!-- 在现有页面中添加 -->
<body>
  <div class="header">...</div>

  <!-- 新增：包裹主内容 -->
  <main>
    <div class="content">...</div>
  </main>

  <div class="footer">...</div>
</body>

第二步：替换明显的语义元素

html
<!-- 替换导航 -->
<div class="nav"> → <nav class="nav" aria-label="主导航">

<!-- 替换文章 -->
<div class="post"> → <article class="post">

<!-- 替换头部/底部 -->
<div class="header"> → <header class="header">
<div class="footer"> → <footer class="footer">

第三步：优化细节

html
<!-- 添加标题层级 -->
<div class="post-title"> → <h1>文章标题</h1>

<!-- 添加语义化文本标签 -->
<span class="date"> → <time datetime="2024-01-15">

<!-- 添加 ARIA 属性 -->
<nav> → <nav aria-label="主导航">

实战示例 ​

完整的改造示例 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>语义化改造示例</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: -apple-system, sans-serif; color: #333; }

    .page-wrapper {
      max-width: 1100px; margin: 0 auto;
      display: grid; grid-template-columns: 1fr 280px; gap: 2rem;
      padding: 2rem;
    }

    /* 语义化标签 + div 混合使用 */
    header.site-header {
      background: #1e293b; color: #fff; padding: 1rem 2rem;
      display: flex; justify-content: space-between; align-items: center;
    }

    header.site-header nav a {
      color: #94a3b8; text-decoration: none; margin-left: 1.5rem;
    }

    main article {
      background: #fff; padding: 2rem; border-radius: 8px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1); margin-bottom: 1.5rem;
    }

    main article h1 { font-size: 1.5rem; margin-bottom: 0.75rem; }

    main article .meta {
      color: #64748b; font-size: 0.85rem; margin-bottom: 1.5rem;
      padding-bottom: 1rem; border-bottom: 1px solid #e2e8f0;
    }

    /* div 用于纯布局目的 */
    .card-grid {
      display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;
      margin-top: 1rem;
    }

    .card-grid .card {
      padding: 1rem; background: #f8fafc; border-radius: 6px;
      border: 1px solid #e2e8f0;
    }

    .card-grid .card h3 { font-size: 0.95rem; margin-bottom: 0.25rem; }
    .card-grid .card p { font-size: 0.85rem; color: #64748b; }

    aside .widget {
      background: #fff; padding: 1.25rem; border-radius: 8px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1); margin-bottom: 1.5rem;
    }

    aside .widget h2 {
      font-size: 1rem; padding-bottom: 0.5rem;
      margin-bottom: 0.75rem; border-bottom: 2px solid #3b82f6;
    }

    aside .widget ul { list-style: none; }
    aside .widget li { margin-bottom: 0.5rem; }
    aside .widget a { color: #3b82f6; text-decoration: none; font-size: 0.9rem; }

    footer.site-footer {
      background: #1e293b; color: #94a3b8;
      text-align: center; padding: 1rem; margin-top: 2rem;
    }

    @media (max-width: 768px) {
      .page-wrapper { grid-template-columns: 1fr; }
      .card-grid { grid-template-columns: 1fr; }
    }
  </style>
</head>
<body>
  <header class="site-header">
    <h1>DevHub</h1>
    <nav aria-label="主导航">
      <a href="/">首页</a>
      <a href="/tutorials">教程</a>
      <a href="/about">关于</a>
    </nav>
  </header>

  <div class="page-wrapper">
    <main>
      <!-- 语义化：article -->
      <article>
        <h1>前端框架对比：React vs Vue vs Svelte</h1>
        <p class="meta">
          作者：<address style="font-style:normal"><a href="#" style="color:#3b82f6">张三</a></address>
          &middot; <time datetime="2024-02-01">2024 年 2 月 1 日</time>
        </p>
        <p>2024 年前端框架领域竞争激烈，React、Vue 和 Svelte 各有优势...</p>

        <!-- div 用于纯布局：卡片网格 -->
        <div class="card-grid">
          <div class="card">
            <h3>React</h3>
            <p>组件化开发，生态最丰富</p>
          </div>
          <div class="card">
            <h3>Vue</h3>
            <p>渐进式框架，上手简单</p>
          </div>
          <div class="card">
            <h3>Svelte</h3>
            <p>编译时框架，无虚拟DOM</p>
          </div>
          <div class="card">
            <h3>Angular</h3>
            <p>完整框架，适合大型项目</p>
          </div>
        </div>
      </article>
    </main>

    <!-- 语义化：aside -->
    <aside>
      <div class="widget">
        <h2>分类</h2>
        <ul>
          <li><a href="#">前端框架</a></li>
          <li><a href="#">CSS 技术</a></li>
          <li><a href="#">JavaScript</a></li>
        </ul>
      </div>
    </aside>
  </div>

  <footer class="site-footer">
    <p>&copy; 2024 DevHub. All rights reserved.</p>
  </footer>
</body>
</html>

注意事项 ​

改造风险 ​

风险说明应对措施
样式变化语义化标签可能影响选择器使用具体 class 而非标签选择器
测试覆盖需要回归测试渐进式改造，小步提交
团队适应团队需要学习培训 + 代码规范

最佳实践 ​

  1. 建立语义化规范：制定团队统一的标签选择指南
  2. 使用 linter 检查：配置 ESLint 规则检查语义化标签使用
  3. 代码审查：将语义化作为 PR 审查的检查项
  4. 渐进式改造：新代码强制语义化，旧代码逐步改造

下一节

继续学习：SEO 优化建议

参考链接 ​