编辑“︁HTML文本语义化”︁

= HTML文本语义化 =

== 简介 ==
'''HTML文本语义化'''是指通过选择合适的HTML标签来明确表达内容的含义和结构，而不仅仅是控制其视觉呈现。语义化的HTML代码能够：

* 提升'''可访问性'''（屏幕阅读器等辅助技术能正确解读内容）
* 改善'''SEO'''（搜索引擎更容易理解页面结构）
* 增强'''代码可维护性'''（开发者能快速理解内容逻辑）
* 实现'''设备兼容性'''（不同设备能根据语义适配显示方式）

== 核心概念 ==
=== 语义化 vs 非语义化对比 ===
{| class="wikitable"
|-
! 非语义化写法 !! 语义化写法 !! 优势说明
|-
| <code><div>主要标题</div></code> || <code><h1>主要标题</h1></code> || 明确标识标题层级
|-
| <code><span>发布日期</span></code> || <code><time datetime="2023-05-15">发布日期</time></code> || 机器可读的日期数据
|-
| <code><div onclick="...">按钮</div></code> || <code><button>按钮</button></code> || 自带按钮交互特性
|}

=== 常用语义化标签分类 ===
<mermaid>
mindmap
  root((文本语义化标签))
    结构语义
      --> header
      --> nav
      --> main
      --> article
      --> section
      --> footer
    内容语义
      --> h1-h6
      --> p
      --> blockquote
      --> figure/figcaption
      --> cite
      --> code
      --> mark
</mermaid>

== 详细示例 ==
=== 基础文本标记 ===
<syntaxhighlight lang="html">
<!-- 非语义化写法 -->
<div class="important-text">警告信息</div>
<span class="date">2023-05-15</span>

<!-- 语义化写法 -->
<strong class="important-text">警告信息</strong>
<time datetime="2023-05-15">2023-05-15</time>
</syntaxhighlight>

'''输出效果对比'''：
* 视觉呈现可能相同，但语义化版本：
  * <code><strong></code> 会被屏幕阅读器识别为重要内容
  * <code><time></code> 允许浏览器/搜索引擎提取标准化日期

=== 复杂文档结构 ===
<syntaxhighlight lang="html">
<article>
  <header>
    <h1>量子计算入门</h1>
    <p>作者：<cite>张教授</cite></p>
    <time datetime="2023-04-01">发布于2023年4月</time>
  </header>
  
  <section>
    <h2>基本原理</h2>
    <p>量子比特与传统比特的区别...</p>
    <figure>
      <img src="qubit.png" alt="量子比特状态示意图">
      <figcaption>图1：量子比特的叠加态</figcaption>
    </figure>
  </section>
  
  <footer>
    <p>标签：<mark>量子物理</mark>, <mark>计算机科学</mark></p>
  </footer>
</article>
</syntaxhighlight>

'''语义解析'''：
* <code><article></code> 标识独立内容单元
* <code><cite></code> 明确引用作者
* <code><figure></code> 关联图片与说明文字
* <code><mark></code> 高亮关键词

== 高级应用 ==
=== 微数据增强 ===
结合 <code>itemscope</code> 和 <code>itemprop</code> 实现富媒体语义：

<syntaxhighlight lang="html">
<div itemscope itemtype="http://schema.org/Book">
  <h1 itemprop="name">HTML5权威指南</h1>
  <p>作者：<span itemprop="author">Adam Freeman</span></p>
  <time itemprop="datePublished" datetime="2022-09-01">2022年9月出版</time>
</div>
</syntaxhighlight>

'''SEO效果'''：搜索引擎会将该内容解析为结构化图书数据，可能在搜索结果中显示为富片段。

=== ARIA 补充语义 ===
当HTML原生语义不足时，使用WAI-ARIA增强：

<syntaxhighlight lang="html">
<div role="alert" aria-live="assertive">
  <h2>系统警告</h2>
  <p>您的会话将在5分钟后过期</p>
</div>
</syntaxhighlight>

== 最佳实践 ==
# '''层级分明的标题'''：保持 <code>h1</code>-<code>h6</code> 的合理嵌套
# '''适度使用'''：避免过度语义化（如用 <code><article></code> 包裹每个段落）
# '''渐进增强'''：先确保基础语义正确，再添加微数据/ARIA
# '''验证工具'''：使用 [https://validator.w3.org/ W3C验证器] 检查语义合理性

== 常见误区 ==
* '''样式驱动选择'''：不应因为某个标签的默认样式而选用它
* '''div/span滥用'''：这些无语义标签应作为最后选择
* '''忽略文档大纲'''：现代浏览器会根据语义标签生成文档大纲结构

<mermaid>
flowchart TD
    A[开始编写HTML] --> B{是否需要表达特定含义?}
    B -->|是| C[选择对应语义标签]
    B -->|否| D[使用div/span]
    C --> E[检查可访问性]
    D --> E
    E --> F[完成]
</mermaid>

== 数学公式示例 ==
当需要表示技术文档中的公式时：

<math>E = mc^2</math> 质能方程

<math>
\sum_{i=1}^n i^2 = \frac{n(n+1)(2n+1)}{6}
</math> 平方和公式

通过语义化标记，这些公式可以被数学辅助工具正确识别。

[[Category:编程语言]]
[[Category:HTML]]
[[Category:HTML文本元素]]