垦荒学园

简体中文

English

简体中文

English

切换主题

HTML 语义化标签 ​

什么是语义化标签？ ​

语义化标签是指那些能够清晰描述其内容含义的 HTML 标签。使用语义化标签可以让代码更易读、更易维护，同时也有利于 SEO 和无障碍访问。

为什么使用语义化标签？ ​

  1. 提高可读性：代码结构更清晰，易于理解
  2. SEO 优化：搜索引擎更容易理解页面结构和内容
  3. 无障碍访问：屏幕阅读器能更好地解析页面
  4. 维护性：团队协作更高效
  5. 未来兼容性：符合 Web 标准

HTML5 语义化标签 ​

页面结构标签 ​

定义文档或节的页眉：

html
<header>
    <h1>网站标题</h1>
    <nav>
        <ul>
            <li><a href="#home">首页</a></li>
            <li><a href="#about">关于</a></li>
        </ul>
    </nav>
</header>

定义导航链接的容器：

html
<nav>
    <ul>
        <li><a href="/">首页</a></li>
        <li><a href="/products">产品</a></li>
        <li><a href="/contact">联系我们</a></li>
    </ul>
</nav>

<main> ​

定义文档的主要内容（每个页面只能有一个）：

html
<main>
    <h1>主要内容标题</h1>
    <p>这是页面的主要内容区域。</p>
</main>

<article> ​

定义独立的、完整的内容：

html
<article>
    <h2>文章标题</h2>
    <p>发布时间：<time datetime="2024-01-01">2024年1月1日</time></p>
    <p>文章内容...</p>
</article>

<section> ​

定义文档中的节：

html
<section>
    <h2>关于我们</h2>
    <p>公司简介...</p>
</section>

<section>
    <h2>我们的服务</h2>
    <p>服务介绍...</p>
</section>

<aside> ​

定义侧边栏或相关内容：

html
<aside>
    <h3>相关文章</h3>
    <ul>
        <li><a href="#">文章1</a></li>
        <li><a href="#">文章2</a></li>
    </ul>
</aside>

定义文档或节的页脚：

html
<footer>
    <p>&copy; 2024 我的网站。保留所有权利。</p>
    <nav>
        <a href="/privacy">隐私政策</a>
        <a href="/terms">使用条款</a>
    </nav>
</footer>

内容标签 ​

<figure> 和 <figcaption> ​

定义独立的内容（如图片、图表）及其标题：

html
<figure>
    <img src="image.jpg" alt="描述">
    <figcaption>图片说明文字</figcaption>
</figure>

<time> ​

定义日期或时间：

html
<p>发布于 <time datetime="2024-01-01T10:00">2024年1月1日上午10点</time></p>

<mark> ​

定义高亮文本：

html
<p>这是一段<mark>重要的</mark>文字。</p>

<details> 和 <summary> ​

创建可展开/折叠的内容：

html
<details>
    <summary>点击查看详情</summary>
    <p>这里是详细内容...</p>
</details>

完整页面结构示例 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>语义化 HTML 示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 0;
        }
        
        header {
            background-color: #333;
            color: white;
            padding: 1rem;
        }
        
        nav ul {
            list-style: none;
            padding: 0;
        }
        
        nav ul li {
            display: inline;
            margin-right: 20px;
        }
        
        nav a {
            color: white;
            text-decoration: none;
        }
        
        main {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 20px;
        }
        
        article {
            background-color: #f4f4f4;
            padding: 20px;
            margin-bottom: 20px;
        }
        
        aside {
            background-color: #e9e9e9;
            padding: 20px;
        }
        
        footer {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 1rem;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <!-- 页眉 -->
    <header>
        <h1>我的博客</h1>
        <nav>
            <ul>
                <li><a href="#home">首页</a></li>
                <li><a href="#blog">博客</a></li>
                <li><a href="#about">关于</a></li>
                <li><a href="#contact">联系</a></li>
            </ul>
        </nav>
    </header>
    
    <!-- 主要内容 -->
    <main>
        <!-- 内容区域 -->
        <div>
            <article>
                <header>
                    <h2>文章标题</h2>
                    <p>
                        作者：张三 | 
                        发布时间：<time datetime="2024-01-01">2024年1月1日</time>
                    </p>
                </header>
                
                <section>
                    <h3>引言</h3>
                    <p>这是文章的引言部分...</p>
                </section>
                
                <section>
                    <h3>主要内容</h3>
                    <p>这是文章的主要内容...</p>
                    
                    <figure>
                        <img src="example.jpg" alt="示例图片" style="max-width: 100%;">
                        <figcaption>图1：示例图片说明</figcaption>
                    </figure>
                </section>
                
                <section>
                    <h3>结论</h3>
                    <p>这是文章的结论部分...</p>
                </section>
                
                <footer>
                    <p>标签：<a href="#">HTML</a>, <a href="#">Web开发</a></p>
                </footer>
            </article>
            
            <article>
                <h2>另一篇文章</h2>
                <p>文章内容...</p>
            </article>
        </div>
        
        <!-- 侧边栏 -->
        <aside>
            <section>
                <h3>关于作者</h3>
                <p>作者简介...</p>
            </section>
            
            <section>
                <h3>热门文章</h3>
                <ul>
                    <li><a href="#">文章1</a></li>
                    <li><a href="#">文章2</a></li>
                    <li><a href="#">文章3</a></li>
                </ul>
            </section>
            
            <section>
                <h3>归档</h3>
                <details>
                    <summary>2024年</summary>
                    <ul>
                        <li><a href="#">1月</a></li>
                        <li><a href="#">2月</a></li>
                    </ul>
                </details>
            </section>
        </aside>
    </main>
    
    <!-- 页脚 -->
    <footer>
        <p>&copy; 2024 我的博客。保留所有权利。</p>
        <nav>
            <a href="#privacy">隐私政策</a> | 
            <a href="#terms">使用条款</a>
        </nav>
    </footer>
</body>
</html>

语义化 vs 非语义化 ​

非语义化（不推荐） ​

html
<div id="header">
    <div id="nav">
        <div class="menu-item">首页</div>
    </div>
</div>
<div id="content">
    <div class="post">
        <div class="title">文章标题</div>
        <div class="text">文章内容</div>
    </div>
</div>
<div id="footer">
    <div class="copyright">版权信息</div>
</div>

语义化（推荐） ​

html
<header>
    <nav>
        <a href="/">首页</a>
    </nav>
</header>
<main>
    <article>
        <h1>文章标题</h1>
        <p>文章内容</p>
    </article>
</main>
<footer>
    <p>版权信息</p>
</footer>

选择合适的标签 ​

何时使用 <article>？ ​

  • 博客文章
  • 新闻报道
  • 论坛帖子
  • 用户评论
  • 独立的小部件

何时使用 <section>？ ​

  • 文档的章节
  • 选项卡内容
  • 主题分组
  • 页面的不同部分

何时使用 <div>？ ​

  • 纯粹的样式容器
  • 没有语义含义的分组
  • 布局需要

最佳实践 ​

  1. 优先使用语义化标签：能用语义化标签就不用 <div>
  2. 正确嵌套：遵循 HTML 标签的嵌套规则
  3. 一个页面一个 <main>：每个页面只能有一个主要内容区域
  4. 合理使用标题：使用 <h1> 到 <h6> 建立清晰的层级结构
  5. 添加 ARIA 属性：在需要时添加无障碍属性
  6. 保持一致性：在整个网站中保持一致的结构

无障碍访问 ​

语义化标签配合 ARIA 属性：

html
<nav aria-label="主导航">
    <ul>
        <li><a href="/">首页</a></li>
        <li><a href="/about">关于</a></li>
    </ul>
</nav>

<main role="main" aria-labelledby="main-heading">
    <h1 id="main-heading">页面标题</h1>
    <p>内容...</p>
</main>

总结 ​

使用语义化标签是现代 Web 开发的最佳实践。它不仅能让代码更清晰、更易维护，还能提高 SEO 效果和无障碍访问性。在编写 HTML 时，应该优先考虑使用语义化标签，而不是简单地使用 <div> 和 <span>。