跳到主要内容

语义化 HTML

语义化 HTML 是现代网页开发的核心概念，它使用正确的 HTML 元素来传达内容的含义和结构。

什么是语义化？​

语义 vs 呈现​

  • 语义（Semantics）：元素所代表的意义
  • 呈现（Presentation）：元素的外观样式

例如，<strong> 和 <b> 都可使文字加粗，但 <strong> 在语义上表示"重要"，而 <b> 只是视觉上的加粗。

为什么需要语义化？​

  1. 可访问性（Accessibility）：屏幕阅读器能正确理解页面结构
  2. 搜索引擎优化（SEO）：搜索引擎能更好地理解页面内容
  3. 代码可维护性：开发者更容易阅读和理解代码
  4. 跨设备兼容：不同设备能正确解析页面内容

语义化元素概览​

文档结构元素​

元素说明
<header>页面或区块的头部
<nav>导航区域
<main>主内容区域（唯一）
<article>独立完整的内容
<section>文档的章节
<aside>侧边栏内容
<footer>页面或区块的底部

文本语义元素​

元素说明
<h1> - <h6>标题级别
<p>段落
<blockquote>块级引用
<q>行内引用
<abbr>缩写词
<time>日期/时间
<mark>标记/高亮
<address>联系信息

列表元素​

元素说明
<ul>无序列表
<ol>有序列表
<dl>定义列表
<li>列表项

表格语义元素​

元素说明
<table>表格容器
<thead>表头区域
<tbody>表体区域
<tfoot>表脚区域
<caption>表格标题

文档结构详解​

header - 头部​

<header> 用于表示页面或区块的头部区域：

<!-- 页面头部 -->
<header>
    <h1>网站名称</h1>
    <nav>
        <a href="/">首页</a>
        <a href="/about">关于我们</a>
    </nav>
</header>

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

nav - 导航​

<nav> 用于主要的导航链接区域：

<header>
    <nav>
        <ul>
            <li><a href="/">首页</a></li>
            <li><a href="/products">产品</a></li>
            <li><a href="/about">关于我们</a></li>
        </ul>
    </nav>
</header>

<!-- 页面底部导航 -->
<footer>
    <nav>
        <a href="/terms">使用条款</a>
        <a href="/privacy">隐私政策</a>
    </nav>
</footer>
提示

不是所有链接都需要放在 <nav> 中，只有主要的导航链接组才需要使用这个元素。

main - 主内容​

<main> 表示页面的主要 content（唯一使用）：

<body>
    <header>...</header>
    <nav>...</nav>
    
    <main>
        <!-- 主要内容 -->
        <article>
            <h1>文章标题</h1>
            <p>文章内容...</p>
        </article>
        
        <aside>
            <!-- 侧边栏内容 -->
        </aside>
    </main>
    
    <footer>...</footer>
</body>
注意

<main> 在页面中应该只出现一次，不要在 <article> 或其他区块内部使用。

article - 文章​

<article> 表示独立、可分发的内容单元：

<!-- 博客文章 -->
<article>
    <header>
        <h2>如何学习编程</h2>
        <p>作者：张三 | <time datetime="2024-01-15">2024年1月15日</time></p>
    </header>
    
    <p>内容正文...</p>
    
    <footer>
        <p>标签：<a href="/tag/programming">编程</a></p>
    </footer>
</article>

<!-- 论坛帖子 -->
<article>
    <h2>回复：如何学习编程</h2>
    <p>李四的回复内容...</p>
</article>

<!-- 独立小部件 -->
<article>
    <p>用户评论内容...</p>
</article>

section - 章节​

<section> 用于将相关内容分组：

<article>
    <header>
        <h1>网页开发入门</h1>
    </header>
    
    <section>
        <h2>第一章：HTML基础</h2>
        <p>HTML的基本概念...</p>
    </section>
    
    <section>
        <h2>第二章：CSS样式</h2>
        <p>CSS的选择器...</p>
    </section>
    
    <section>
        <h2>第三章：JavaScript</h2>
        <p>JS的变量和数据类型...</p>
    </section>
</article>
如何选择 article 和 section？
  • article：内容是独立、可分发的（如博客文章、新闻报道）
  • section：内容是主题相关的一组内容（如章节、标签页内容）

aside - 侧边栏​

<aside> 表示与周围内容间接相关的区域：

<main>
    <article>
        <h1>学习HTML的重要性</h1>
        <p>HTML是网页的基础...</p>
    </article>
    
    <aside>
        <h3>相关推荐</h3>
        <ul>
            <li><a href="/css-guide">CSS入门指南</a></li>
            <li><a href="/js-tutorial">JavaScript教程</a></li>
        </ul>
    </aside>
</main>

footer - 底部​

<footer> 用于表示页面或区块的底部：

<!-- 页面底部 -->
<footer>
    <p>&copy; 2024 我的网站. All rights reserved.</p>
    <address>
        联系方式：<a href="mailto:[email protected]">[email protected]</a>
    </address>
</footer>

<!-- 文章底部 -->
<article>
    <footer>
        <p>本文作者：张三</p>
        <p>
            标签：
            <a href="/tag/html">HTML</a>
            <a href="/tag/web">Web开发</a>
        </p>
    </footer>
</article>

文本语义元素​

标题 h1-h6​

<h1>页面主标题</h1>  <!-- 最重要的标题，每个页面一个 -->
<h2>章节标题</h2>    <!-- 主要章节 -->
<h3>子章节标题</h3>  <!-- 子章节 -->
<h4>小节标题</h4>    <!-- 更小的节 -->
<h5>细节标题</h5>    <!-- 很少使用 -->
<h6>最小标题</h6>    <!-- 很少使用 -->
层级顺序

标题应该按层级顺序使用，不要跳级（如从 h1 直接跳到 h3）。搜索引擎会根据标题层级判断页面结构。

强调和重要性​

<!-- 重要性，强调 -->
<p>请务必<strong>准时参加会议</strong>！</p>

<!-- 关键词 -->
<p>这是一段关于<strong>搜索引擎优化</strong>的文章。</p>

<!-- 语气强调 -->
<p>我真的<em>非常</em>抱歉！</p>

<!-- 技术术语 -->
<p>CSS 代表 <abbr title="Cascading Style Sheets">CSS</abbr>。</p>

效果预览：

请务必准时参加会议！

我真的非常抱歉！

CSS 代表 CSS。

引用​

<!-- 块级引用 -->
<blockquote cite="https://example.com/source">
    <p>这是引用的内容，通常会缩进显示。</p>
    <footer>— <cite>引用来源</cite></footer>
</blockquote>

<!-- 行内引用 -->
<p>正如他所说：<q>学习是终身的任务</q>。</p>

> 这是一个块级引用的示例，内容通常会缩进显示。

时间和日期​

<!-- 带机器可读格式的时间 -->
<p>会议时间：<time datetime="2024-01-15T14:30">2024年1月15日下午2:30</time></p>

<!-- 只包含日期 -->
<p>发布日期：<time datetime="2024-01-15">2024年1月15日</time></p>

<!-- 相对日期 -->
<p>更新时间：<time datetime="2024-01-15">三天前</time></p>

其他文本元素​

<!-- 删除/插入内容 -->
<p>原价：<del>¥100</del>，现价：<ins>¥80</ins></p>

<!-- 高亮标记 -->
<p>重点内容：<mark>需要牢记的知识点</mark></p>

<!-- 代码 -->
<p>使用 <code>console.log()</code> 输出信息。</p>

<!-- 预格式化文本 -->
<pre><code>function hello() {
    console.log("Hello!");
}</code></pre>

<!-- 缩写 -->
<p><abbr title="JavaScript">JS</abbr> 是流行的编程语言。</p>

<!-- 联系信息 -->
<address>
    联系人：张三<br>
    邮箱：<a href="mailto:[email protected]">[email protected]</a><br>
    电话：138-0000-0000
</address>

效果预览：

  • ¥100 → ¥80（原价格删除线，新价格下划线）
  • 重点内容：需要牢记的知识点（高亮）
  • console.log()：代码片段样式

列表语义​

定义列表 dl/dt/dd​

<dl>
    <dt>HTML</dt>
    <dd>超文本标记语言，用于创建网页结构。</dd>
    
    <dt>CSS</dt>
    <dd>层叠样式表，用于控制网页外观。</dd>
    
    <dt>JavaScript</dt>
    <dd>编程语言，为网页添加交互功能。</dd>
</dl>

在浏览器中渲染后，定义列表会显示为术语在前、定义在后的格式。

完整语义化页面示例​

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="编程学习网站">
    <title>博客文章标题</title>
</head>
<body>
    <!-- 页面头部 -->
    <header>
        <h1>我的博客</h1>
        <nav>
            <ul>
                <li><a href="/">首页</a></li>
                <li><a href="/tutorials">教程</a></li>
                <li><a href="/about">关于</a></li>
            </ul>
        </nav>
    </header>

    <!-- 主内容区 -->
    <main>
        <!-- 博客文章 -->
        <article>
            <header>
                <h2>JavaScript 基础入门</h2>
                <p>
                    作者：<span>张三</span> | 
                    <time datetime="2024-01-15">2024年1月15日</time>
                </p>
            </header>
            
            <section>
                <h3>什么是JavaScript？</h3>
                <p>JavaScript是一种<strong>脚本语言</strong>，用于...</p>
            </section>
            
            <section>
                <h3>变量和数据类型</h3>
                <p>在JavaScript中，我们可以使用<code>let</code>和<code>const</code>来声明变量...</p>
                
                <h4>数据类型</h4>
                <ul>
                    <li>Number（数字）</li>
                    <li>String（字符串）</li>
                    <li>Boolean（布尔）</li>
                    <li>Object（对象）</li>
                </ul>
            </section>
            
            <section>
                <h3>总结</h3>
                <p>本文介绍了JavaScript的基础知识，包括...</p>
            </section>
            
            <footer>
                <p>标签：
                    <a href="/tag/javascript">JavaScript</a>
                    <a href="/tag/programming">编程</a>
                </p>
            </footer>
        </article>

        <!-- 侧边栏 -->
        <aside>
            <section>
                <h3>相关推荐</h3>
                <ul>
                    <li><a href="/post/css-basics">CSS基础教程</a></li>
                    <li><a href="/post/html-intro">HTML入门</a></li>
                </ul>
            </section>
            
            <section>
                <h3>关于作者</h3>
                <p>我是全栈开发者，热爱分享技术知识。</p>
            </section>
        </aside>
    </main>

    <!-- 页面底部 -->
    <footer>
        <p>&copy; 2024 我的博客. All rights reserved.</p>
        <nav>
            <a href="/privacy">隐私政策</a> |
            <a href="/terms">使用条款</a>
        </nav>
        <address>
            联系：<a href="mailto:[email protected]">[email protected]</a>
        </address>
    </footer>
</body>
</html>

非语义元素​

div 和 span​

当没有合适的语义元素时，使用通用的无语义元素：

<!-- div：块级无语义容器 -->
<div class="card">
    <div class="card-header">标题</div>
    <div class="card-body">内容</div>
</div>

<!-- span：行内无语义容器 -->
<p>价格：<span class="price">¥99</span></p>
<p>状态：<span class="badge">热卖中</span></p>
何时使用 div？
  • 纯用于样式的容器
  • 需要用 JavaScript 操作的一组元素
  • 实在没有合适的语义元素

可访问性注意事项​

使用正确的标题层级​

<!-- 正确 -->
<h1>页面标题</h1>
    <h2>主要章节</h2>
        <h3>子章节</h3>

<!-- 错误：跳级 -->
<h1>页面标题</h1>
    <h3>直接跳到h3</h3>

链接文本​

<!-- 好的链接文本 -->
<a href="/article">阅读更多关于HTML的文章</a>
<a href="/products">查看所有产品 →</a>

<!-- 不好的链接文本（屏幕阅读器无法理解） -->
<a href="#">点击这里</a>
<a href="#">更多</a>
<a href="javascript:void(0)">链接</a>

列表结构​

屏幕阅读器会告诉用户列表中有多少项目：

<!-- 使用正确的列表元素 -->
<ul>
    <li>项目一</li>
    <li>项目二</li>
</ul>

小结​

本章学习了：

  1. 语义化的重要性：可访问性、SEO、可维护性
  2. 文档结构元素：header、nav、main、article、section、aside、footer
  3. 文本语义元素：h1-h6、strong、em、blockquote、time 等
  4. 何时使用无语义元素：div 和 span
  5. 可访问性注意事项：标题层级、链接文本、列表结构

练习​

  1. 将一个使用 div 堆砌的页面改写为语义化结构
  2. 创建一个博客页面，包含完整的语义化结构
  3. 为所有表单元素添加正确的 label
  4. 检查自己的代码，确保标题层级不跳级
  5. 使用语义化元素重写一段包含引用的内容